@tamagui/web 1.5.22 → 1.5.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/cjs/views/Theme.js +4 -3
  2. package/dist/cjs/views/Theme.js.map +2 -2
  3. package/dist/esm/views/Theme.js +4 -3
  4. package/dist/esm/views/Theme.js.map +2 -2
  5. package/dist/esm/views/Theme.mjs +4 -3
  6. package/dist/esm/views/Theme.mjs.map +2 -2
  7. package/package.json +9 -9
  8. package/src/views/Theme.tsx +6 -3
  9. package/types/views/Theme.d.ts +1 -1
  10. package/types/views/Theme.d.ts.map +1 -1
package/dist/cjs/views/Theme.js CHANGED
@@ -38,16 +38,16 @@ function Theme(props) {
38
38
  props.children,
39
39
  (child) => (0, import_react.cloneElement)(child, { ["data-themeable"]: true })
40
40
  ) : props.children;
41
- return useThemedChildren(themeState, children, props);
41
+ return useThemedChildren(themeState, children, props, isRoot);
42
42
  }
43
- function useThemedChildren(themeState, children, options) {
43
+ function useThemedChildren(themeState, children, options, isRoot = false) {
44
44
  const { themeManager, isNewTheme, className, theme } = themeState;
45
45
  const { shallow, forceClassName } = options;
46
46
  const hasEverThemed = (0, import_useServerHooks.useServerRef)(false);
47
47
  if (isNewTheme) {
48
48
  hasEverThemed.current = true;
49
49
  }
50
- if (isNewTheme || hasEverThemed.current || forceClassName) {
50
+ if (isNewTheme || hasEverThemed.current || forceClassName || isRoot) {
51
51
  let next = import_react.Children.toArray(children);
52
52
  if (shallow && themeManager) {
53
53
  next = next.map((child) => {
@@ -69,6 +69,7 @@ function useThemedChildren(themeState, children, options) {
69
69
  };
70
70
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${className || ""} _dsp_contents`, style: colorStyle, children: wrapped });
71
71
  }
72
+ return wrapped;
72
73
  }
73
74
  return children;
74
75
  }
package/dist/cjs/views/Theme.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/views/Theme.tsx"],
4
- "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { Children, cloneElement, isValidElement } from 'react'\n\nimport { variableToString } from '../createVariable.js'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext.js'\nimport { useServerRef } from '../hooks/useServerHooks.js'\nimport { ChangedThemeResponse, useChangeThemeEffect } from '../hooks/useTheme.js'\nimport type { ThemeProps } from '../types.js'\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: {\n forceClassName?: boolean\n shallow?: boolean\n passPropsToChildren?: boolean\n }\n) {\n const { themeManager, isNewTheme, className, theme } = themeState\n const { shallow, forceClassName } = options\n const hasEverThemed = useServerRef(false)\n if (isNewTheme) {\n hasEverThemed.current = true\n }\n\n if (isNewTheme || hasEverThemed.current || forceClassName) {\n // be sure to memoize shouldReset to avoid reparenting\n let next = Children.toArray(children)\n\n // each children of these children wont get the theme\n if (shallow && themeManager) {\n next = next.map((child) => {\n return isValidElement(child)\n ? cloneElement(\n child,\n undefined,\n <Theme name={themeManager.state.parentName}>\n {(child as any).props.children}\n </Theme>\n )\n : child\n })\n }\n\n // tried this but themes css doesn't fully like it\n // if (shouldAttachClassName && options.passPropsToChildren) {\n // next = next.map((child: any) => {\n // const childStyle = child.props?.style\n // console.log('pass it down', className, child.props.className || '')\n // const newProps = {\n // className: (child.props.className || '') + ' ' + className,\n // style: Array.isArray(childStyle)\n // ? [colorStyle, ...childStyle]\n // : {\n // ...colorStyle,\n // ...childStyle,\n // },\n // }\n // return isValidElement(child) ? cloneElement(child as any, newProps) : child\n // })\n // }\n\n const wrapped = (\n <ThemeManagerContext.Provider value={themeManager}>\n {next}\n </ThemeManagerContext.Provider>\n )\n\n if (forceClassName === false) {\n return wrapped\n }\n\n if (isWeb && !options.passPropsToChildren) {\n // in order to provide currentColor, set color by default\n const themeColor = theme && isNewTheme ? variableToString(theme.color) : ''\n const colorStyle = {\n color: themeColor,\n }\n\n return (\n <span className={`${className || ''} _dsp_contents`} style={colorStyle}>\n {wrapped}\n </span>\n )\n }\n }\n\n return children\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkDc;AAlDd,uBAAsB;AACtB,mBAAuD;AAEvD,4BAAiC;AACjC,iCAAoC;AACpC,4BAA6B;AAC7B,sBAA2D;AAGpD,SAAS,MAAM,OAAmB;AAEvC,MAAI,MAAM;AAAS,WAAO,MAAM;AAChC,QAAM,SAAS,CAAC,CAAC,MAAM,SAAS;AAChC,QAAM,iBAAa,sCAAqB,OAAO,MAAM;AACrD,QAAM,WAAW,MAAM,gBAAgB,IACnC,sBAAS;AAAA,IAAI,MAAM;AAAA,IAAU,CAAC,cAC5B,2BAAa,OAAO,EAAE,CAAC,gBAAgB,GAAG,KAAK,CAAC;AAAA,EAClD,IACA,MAAM;AAEV,SAAO,kBAAkB,YAAY,UAAU,KAAK;AACtD;AAEO,SAAS,kBACd,YACA,UACA,SAKA;AACA,QAAM,EAAE,cAAc,YAAY,WAAW,MAAM,IAAI;AACvD,QAAM,EAAE,SAAS,eAAe,IAAI;AACpC,QAAM,oBAAgB,oCAAa,KAAK;AACxC,MAAI,YAAY;AACd,kBAAc,UAAU;AAAA,EAC1B;AAEA,MAAI,cAAc,cAAc,WAAW,gBAAgB;AAEzD,QAAI,OAAO,sBAAS,QAAQ,QAAQ;AAGpC,QAAI,WAAW,cAAc;AAC3B,aAAO,KAAK,IAAI,CAAC,UAAU;AACzB,mBAAO,6BAAe,KAAK,QACvB;AAAA,UACE;AAAA,UACA;AAAA,UACA,4CAAC,SAAM,MAAM,aAAa,MAAM,YAC5B,gBAAc,MAAM,UACxB;AAAA,QACF,IACA;AAAA,MACN,CAAC;AAAA,IACH;AAoBA,UAAM,UACJ,4CAAC,+CAAoB,UAApB,EAA6B,OAAO,cAClC,gBACH;AAGF,QAAI,mBAAmB,OAAO;AAC5B,aAAO;AAAA,IACT;AAEA,QAAI,0BAAS,CAAC,QAAQ,qBAAqB;AAEzC,YAAM,aAAa,SAAS,iBAAa,wCAAiB,MAAM,KAAK,IAAI;AACzE,YAAM,aAAa;AAAA,QACjB,OAAO;AAAA,MACT;AAEA,aACE,4CAAC,UAAK,WAAW,GAAG,aAAa,oBAAoB,OAAO,YACzD,mBACH;AAAA,IAEJ;AAAA,EACF;AAEA,SAAO;AACT;",
4
+ "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { Children, cloneElement, isValidElement } from 'react'\n\nimport { variableToString } from '../createVariable.js'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext.js'\nimport { useServerRef } from '../hooks/useServerHooks.js'\nimport { ChangedThemeResponse, useChangeThemeEffect } from '../hooks/useTheme.js'\nimport type { ThemeProps } from '../types.js'\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, isRoot)\n}\n\nexport function useThemedChildren(\n themeState: ChangedThemeResponse,\n children: any,\n options: {\n forceClassName?: boolean\n shallow?: boolean\n passPropsToChildren?: boolean\n },\n isRoot = false\n) {\n const { themeManager, isNewTheme, className, theme } = themeState\n const { shallow, forceClassName } = options\n const hasEverThemed = useServerRef(false)\n if (isNewTheme) {\n hasEverThemed.current = true\n }\n\n if (isNewTheme || hasEverThemed.current || forceClassName || isRoot) {\n // be sure to memoize shouldReset to avoid reparenting\n let next = Children.toArray(children)\n\n // each children of these children wont get the theme\n if (shallow && themeManager) {\n next = next.map((child) => {\n return isValidElement(child)\n ? cloneElement(\n child,\n undefined,\n <Theme name={themeManager.state.parentName}>\n {(child as any).props.children}\n </Theme>\n )\n : child\n })\n }\n\n // tried this but themes css doesn't fully like it\n // if (shouldAttachClassName && options.passPropsToChildren) {\n // next = next.map((child: any) => {\n // const childStyle = child.props?.style\n // console.log('pass it down', className, child.props.className || '')\n // const newProps = {\n // className: (child.props.className || '') + ' ' + className,\n // style: Array.isArray(childStyle)\n // ? [colorStyle, ...childStyle]\n // : {\n // ...colorStyle,\n // ...childStyle,\n // },\n // }\n // return isValidElement(child) ? cloneElement(child as any, newProps) : child\n // })\n // }\n\n const wrapped = (\n <ThemeManagerContext.Provider value={themeManager}>\n {next}\n </ThemeManagerContext.Provider>\n )\n\n if (forceClassName === false) {\n return wrapped\n }\n\n if (isWeb && !options.passPropsToChildren) {\n // in order to provide currentColor, set color by default\n const themeColor = theme && isNewTheme ? variableToString(theme.color) : ''\n const colorStyle = {\n color: themeColor,\n }\n\n return (\n <span className={`${className || ''} _dsp_contents`} style={colorStyle}>\n {wrapped}\n </span>\n )\n }\n\n return wrapped\n }\n\n return children\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmDc;AAnDd,uBAAsB;AACtB,mBAAuD;AAEvD,4BAAiC;AACjC,iCAAoC;AACpC,4BAA6B;AAC7B,sBAA2D;AAGpD,SAAS,MAAM,OAAmB;AAEvC,MAAI,MAAM;AAAS,WAAO,MAAM;AAChC,QAAM,SAAS,CAAC,CAAC,MAAM,SAAS;AAChC,QAAM,iBAAa,sCAAqB,OAAO,MAAM;AACrD,QAAM,WAAW,MAAM,gBAAgB,IACnC,sBAAS;AAAA,IAAI,MAAM;AAAA,IAAU,CAAC,cAC5B,2BAAa,OAAO,EAAE,CAAC,gBAAgB,GAAG,KAAK,CAAC;AAAA,EAClD,IACA,MAAM;AAEV,SAAO,kBAAkB,YAAY,UAAU,OAAO,MAAM;AAC9D;AAEO,SAAS,kBACd,YACA,UACA,SAKA,SAAS,OACT;AACA,QAAM,EAAE,cAAc,YAAY,WAAW,MAAM,IAAI;AACvD,QAAM,EAAE,SAAS,eAAe,IAAI;AACpC,QAAM,oBAAgB,oCAAa,KAAK;AACxC,MAAI,YAAY;AACd,kBAAc,UAAU;AAAA,EAC1B;AAEA,MAAI,cAAc,cAAc,WAAW,kBAAkB,QAAQ;AAEnE,QAAI,OAAO,sBAAS,QAAQ,QAAQ;AAGpC,QAAI,WAAW,cAAc;AAC3B,aAAO,KAAK,IAAI,CAAC,UAAU;AACzB,mBAAO,6BAAe,KAAK,QACvB;AAAA,UACE;AAAA,UACA;AAAA,UACA,4CAAC,SAAM,MAAM,aAAa,MAAM,YAC5B,gBAAc,MAAM,UACxB;AAAA,QACF,IACA;AAAA,MACN,CAAC;AAAA,IACH;AAoBA,UAAM,UACJ,4CAAC,+CAAoB,UAApB,EAA6B,OAAO,cAClC,gBACH;AAGF,QAAI,mBAAmB,OAAO;AAC5B,aAAO;AAAA,IACT;AAEA,QAAI,0BAAS,CAAC,QAAQ,qBAAqB;AAEzC,YAAM,aAAa,SAAS,iBAAa,wCAAiB,MAAM,KAAK,IAAI;AACzE,YAAM,aAAa;AAAA,QACjB,OAAO;AAAA,MACT;AAEA,aACE,4CAAC,UAAK,WAAW,GAAG,aAAa,oBAAoB,OAAO,YACzD,mBACH;AAAA,IAEJ;AAEA,WAAO;AAAA,EACT;AAEA,SAAO;AACT;",
6
6
  "names": []
7
7
  }
package/dist/esm/views/Theme.js CHANGED
@@ -14,16 +14,16 @@ function Theme(props) {
14
14
  props.children,
15
15
  (child) => cloneElement(child, { ["data-themeable"]: true })
16
16
  ) : props.children;
17
- return useThemedChildren(themeState, children, props);
17
+ return useThemedChildren(themeState, children, props, isRoot);
18
18
  }
19
- function useThemedChildren(themeState, children, options) {
19
+ function useThemedChildren(themeState, children, options, isRoot = false) {
20
20
  const { themeManager, isNewTheme, className, theme } = themeState;
21
21
  const { shallow, forceClassName } = options;
22
22
  const hasEverThemed = useServerRef(false);
23
23
  if (isNewTheme) {
24
24
  hasEverThemed.current = true;
25
25
  }
26
- if (isNewTheme || hasEverThemed.current || forceClassName) {
26
+ if (isNewTheme || hasEverThemed.current || forceClassName || isRoot) {
27
27
  let next = Children.toArray(children);
28
28
  if (shallow && themeManager) {
29
29
  next = next.map((child) => {
@@ -45,6 +45,7 @@ function useThemedChildren(themeState, children, options) {
45
45
  };
46
46
  return /* @__PURE__ */ jsx("span", { className: `${className || ""} _dsp_contents`, style: colorStyle, children: wrapped });
47
47
  }
48
+ return wrapped;
48
49
  }
49
50
  return children;
50
51
  }
package/dist/esm/views/Theme.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/views/Theme.tsx"],
4
- "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { Children, cloneElement, isValidElement } from 'react'\n\nimport { variableToString } from '../createVariable.js'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext.js'\nimport { useServerRef } from '../hooks/useServerHooks.js'\nimport { ChangedThemeResponse, useChangeThemeEffect } from '../hooks/useTheme.js'\nimport type { ThemeProps } from '../types.js'\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: {\n forceClassName?: boolean\n shallow?: boolean\n passPropsToChildren?: boolean\n }\n) {\n const { themeManager, isNewTheme, className, theme } = themeState\n const { shallow, forceClassName } = options\n const hasEverThemed = useServerRef(false)\n if (isNewTheme) {\n hasEverThemed.current = true\n }\n\n if (isNewTheme || hasEverThemed.current || forceClassName) {\n // be sure to memoize shouldReset to avoid reparenting\n let next = Children.toArray(children)\n\n // each children of these children wont get the theme\n if (shallow && themeManager) {\n next = next.map((child) => {\n return isValidElement(child)\n ? cloneElement(\n child,\n undefined,\n <Theme name={themeManager.state.parentName}>\n {(child as any).props.children}\n </Theme>\n )\n : child\n })\n }\n\n // tried this but themes css doesn't fully like it\n // if (shouldAttachClassName && options.passPropsToChildren) {\n // next = next.map((child: any) => {\n // const childStyle = child.props?.style\n // console.log('pass it down', className, child.props.className || '')\n // const newProps = {\n // className: (child.props.className || '') + ' ' + className,\n // style: Array.isArray(childStyle)\n // ? [colorStyle, ...childStyle]\n // : {\n // ...colorStyle,\n // ...childStyle,\n // },\n // }\n // return isValidElement(child) ? cloneElement(child as any, newProps) : child\n // })\n // }\n\n const wrapped = (\n <ThemeManagerContext.Provider value={themeManager}>\n {next}\n </ThemeManagerContext.Provider>\n )\n\n if (forceClassName === false) {\n return wrapped\n }\n\n if (isWeb && !options.passPropsToChildren) {\n // in order to provide currentColor, set color by default\n const themeColor = theme && isNewTheme ? variableToString(theme.color) : ''\n const colorStyle = {\n color: themeColor,\n }\n\n return (\n <span className={`${className || ''} _dsp_contents`} style={colorStyle}>\n {wrapped}\n </span>\n )\n }\n }\n\n return children\n}\n"],
5
- "mappings": "AAkDc;AAlDd,SAAS,aAAa;AACtB,SAAS,UAAU,cAAc,sBAAsB;AAEvD,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,SAAS;AAChC,QAAM,aAAa,qBAAqB,OAAO,MAAM;AACrD,QAAM,WAAW,MAAM,gBAAgB,IACnC,SAAS;AAAA,IAAI,MAAM;AAAA,IAAU,CAAC,UAC5B,aAAa,OAAO,EAAE,CAAC,gBAAgB,GAAG,KAAK,CAAC;AAAA,EAClD,IACA,MAAM;AAEV,SAAO,kBAAkB,YAAY,UAAU,KAAK;AACtD;AAEO,SAAS,kBACd,YACA,UACA,SAKA;AACA,QAAM,EAAE,cAAc,YAAY,WAAW,MAAM,IAAI;AACvD,QAAM,EAAE,SAAS,eAAe,IAAI;AACpC,QAAM,gBAAgB,aAAa,KAAK;AACxC,MAAI,YAAY;AACd,kBAAc,UAAU;AAAA,EAC1B;AAEA,MAAI,cAAc,cAAc,WAAW,gBAAgB;AAEzD,QAAI,OAAO,SAAS,QAAQ,QAAQ;AAGpC,QAAI,WAAW,cAAc;AAC3B,aAAO,KAAK,IAAI,CAAC,UAAU;AACzB,eAAO,eAAe,KAAK,IACvB;AAAA,UACE;AAAA,UACA;AAAA,UACA,oBAAC,SAAM,MAAM,aAAa,MAAM,YAC5B,gBAAc,MAAM,UACxB;AAAA,QACF,IACA;AAAA,MACN,CAAC;AAAA,IACH;AAoBA,UAAM,UACJ,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,cAClC,gBACH;AAGF,QAAI,mBAAmB,OAAO;AAC5B,aAAO;AAAA,IACT;AAEA,QAAI,SAAS,CAAC,QAAQ,qBAAqB;AAEzC,YAAM,aAAa,SAAS,aAAa,iBAAiB,MAAM,KAAK,IAAI;AACzE,YAAM,aAAa;AAAA,QACjB,OAAO;AAAA,MACT;AAEA,aACE,oBAAC,UAAK,WAAW,GAAG,aAAa,oBAAoB,OAAO,YACzD,mBACH;AAAA,IAEJ;AAAA,EACF;AAEA,SAAO;AACT;",
4
+ "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { Children, cloneElement, isValidElement } from 'react'\n\nimport { variableToString } from '../createVariable.js'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext.js'\nimport { useServerRef } from '../hooks/useServerHooks.js'\nimport { ChangedThemeResponse, useChangeThemeEffect } from '../hooks/useTheme.js'\nimport type { ThemeProps } from '../types.js'\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, isRoot)\n}\n\nexport function useThemedChildren(\n themeState: ChangedThemeResponse,\n children: any,\n options: {\n forceClassName?: boolean\n shallow?: boolean\n passPropsToChildren?: boolean\n },\n isRoot = false\n) {\n const { themeManager, isNewTheme, className, theme } = themeState\n const { shallow, forceClassName } = options\n const hasEverThemed = useServerRef(false)\n if (isNewTheme) {\n hasEverThemed.current = true\n }\n\n if (isNewTheme || hasEverThemed.current || forceClassName || isRoot) {\n // be sure to memoize shouldReset to avoid reparenting\n let next = Children.toArray(children)\n\n // each children of these children wont get the theme\n if (shallow && themeManager) {\n next = next.map((child) => {\n return isValidElement(child)\n ? cloneElement(\n child,\n undefined,\n <Theme name={themeManager.state.parentName}>\n {(child as any).props.children}\n </Theme>\n )\n : child\n })\n }\n\n // tried this but themes css doesn't fully like it\n // if (shouldAttachClassName && options.passPropsToChildren) {\n // next = next.map((child: any) => {\n // const childStyle = child.props?.style\n // console.log('pass it down', className, child.props.className || '')\n // const newProps = {\n // className: (child.props.className || '') + ' ' + className,\n // style: Array.isArray(childStyle)\n // ? [colorStyle, ...childStyle]\n // : {\n // ...colorStyle,\n // ...childStyle,\n // },\n // }\n // return isValidElement(child) ? cloneElement(child as any, newProps) : child\n // })\n // }\n\n const wrapped = (\n <ThemeManagerContext.Provider value={themeManager}>\n {next}\n </ThemeManagerContext.Provider>\n )\n\n if (forceClassName === false) {\n return wrapped\n }\n\n if (isWeb && !options.passPropsToChildren) {\n // in order to provide currentColor, set color by default\n const themeColor = theme && isNewTheme ? variableToString(theme.color) : ''\n const colorStyle = {\n color: themeColor,\n }\n\n return (\n <span className={`${className || ''} _dsp_contents`} style={colorStyle}>\n {wrapped}\n </span>\n )\n }\n\n return wrapped\n }\n\n return children\n}\n"],
5
+ "mappings": "AAmDc;AAnDd,SAAS,aAAa;AACtB,SAAS,UAAU,cAAc,sBAAsB;AAEvD,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,SAAS;AAChC,QAAM,aAAa,qBAAqB,OAAO,MAAM;AACrD,QAAM,WAAW,MAAM,gBAAgB,IACnC,SAAS;AAAA,IAAI,MAAM;AAAA,IAAU,CAAC,UAC5B,aAAa,OAAO,EAAE,CAAC,gBAAgB,GAAG,KAAK,CAAC;AAAA,EAClD,IACA,MAAM;AAEV,SAAO,kBAAkB,YAAY,UAAU,OAAO,MAAM;AAC9D;AAEO,SAAS,kBACd,YACA,UACA,SAKA,SAAS,OACT;AACA,QAAM,EAAE,cAAc,YAAY,WAAW,MAAM,IAAI;AACvD,QAAM,EAAE,SAAS,eAAe,IAAI;AACpC,QAAM,gBAAgB,aAAa,KAAK;AACxC,MAAI,YAAY;AACd,kBAAc,UAAU;AAAA,EAC1B;AAEA,MAAI,cAAc,cAAc,WAAW,kBAAkB,QAAQ;AAEnE,QAAI,OAAO,SAAS,QAAQ,QAAQ;AAGpC,QAAI,WAAW,cAAc;AAC3B,aAAO,KAAK,IAAI,CAAC,UAAU;AACzB,eAAO,eAAe,KAAK,IACvB;AAAA,UACE;AAAA,UACA;AAAA,UACA,oBAAC,SAAM,MAAM,aAAa,MAAM,YAC5B,gBAAc,MAAM,UACxB;AAAA,QACF,IACA;AAAA,MACN,CAAC;AAAA,IACH;AAoBA,UAAM,UACJ,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,cAClC,gBACH;AAGF,QAAI,mBAAmB,OAAO;AAC5B,aAAO;AAAA,IACT;AAEA,QAAI,SAAS,CAAC,QAAQ,qBAAqB;AAEzC,YAAM,aAAa,SAAS,aAAa,iBAAiB,MAAM,KAAK,IAAI;AACzE,YAAM,aAAa;AAAA,QACjB,OAAO;AAAA,MACT;AAEA,aACE,oBAAC,UAAK,WAAW,GAAG,aAAa,oBAAoB,OAAO,YACzD,mBACH;AAAA,IAEJ;AAEA,WAAO;AAAA,EACT;AAEA,SAAO;AACT;",
6
6
  "names": []
7
7
  }
package/dist/esm/views/Theme.mjs CHANGED
@@ -14,16 +14,16 @@ function Theme(props) {
14
14
  props.children,
15
15
  (child) => cloneElement(child, { ["data-themeable"]: true })
16
16
  ) : props.children;
17
- return useThemedChildren(themeState, children, props);
17
+ return useThemedChildren(themeState, children, props, isRoot);
18
18
  }
19
- function useThemedChildren(themeState, children, options) {
19
+ function useThemedChildren(themeState, children, options, isRoot = false) {
20
20
  const { themeManager, isNewTheme, className, theme } = themeState;
21
21
  const { shallow, forceClassName } = options;
22
22
  const hasEverThemed = useServerRef(false);
23
23
  if (isNewTheme) {
24
24
  hasEverThemed.current = true;
25
25
  }
26
- if (isNewTheme || hasEverThemed.current || forceClassName) {
26
+ if (isNewTheme || hasEverThemed.current || forceClassName || isRoot) {
27
27
  let next = Children.toArray(children);
28
28
  if (shallow && themeManager) {
29
29
  next = next.map((child) => {
@@ -45,6 +45,7 @@ function useThemedChildren(themeState, children, options) {
45
45
  };
46
46
  return /* @__PURE__ */ jsx("span", { className: `${className || ""} _dsp_contents`, style: colorStyle, children: wrapped });
47
47
  }
48
+ return wrapped;
48
49
  }
49
50
  return children;
50
51
  }
package/dist/esm/views/Theme.mjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/views/Theme.tsx"],
4
- "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { Children, cloneElement, isValidElement } from 'react'\n\nimport { variableToString } from '../createVariable.js'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext.js'\nimport { useServerRef } from '../hooks/useServerHooks.js'\nimport { ChangedThemeResponse, useChangeThemeEffect } from '../hooks/useTheme.js'\nimport type { ThemeProps } from '../types.js'\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: {\n forceClassName?: boolean\n shallow?: boolean\n passPropsToChildren?: boolean\n }\n) {\n const { themeManager, isNewTheme, className, theme } = themeState\n const { shallow, forceClassName } = options\n const hasEverThemed = useServerRef(false)\n if (isNewTheme) {\n hasEverThemed.current = true\n }\n\n if (isNewTheme || hasEverThemed.current || forceClassName) {\n // be sure to memoize shouldReset to avoid reparenting\n let next = Children.toArray(children)\n\n // each children of these children wont get the theme\n if (shallow && themeManager) {\n next = next.map((child) => {\n return isValidElement(child)\n ? cloneElement(\n child,\n undefined,\n <Theme name={themeManager.state.parentName}>\n {(child as any).props.children}\n </Theme>\n )\n : child\n })\n }\n\n // tried this but themes css doesn't fully like it\n // if (shouldAttachClassName && options.passPropsToChildren) {\n // next = next.map((child: any) => {\n // const childStyle = child.props?.style\n // console.log('pass it down', className, child.props.className || '')\n // const newProps = {\n // className: (child.props.className || '') + ' ' + className,\n // style: Array.isArray(childStyle)\n // ? [colorStyle, ...childStyle]\n // : {\n // ...colorStyle,\n // ...childStyle,\n // },\n // }\n // return isValidElement(child) ? cloneElement(child as any, newProps) : child\n // })\n // }\n\n const wrapped = (\n <ThemeManagerContext.Provider value={themeManager}>\n {next}\n </ThemeManagerContext.Provider>\n )\n\n if (forceClassName === false) {\n return wrapped\n }\n\n if (isWeb && !options.passPropsToChildren) {\n // in order to provide currentColor, set color by default\n const themeColor = theme && isNewTheme ? variableToString(theme.color) : ''\n const colorStyle = {\n color: themeColor,\n }\n\n return (\n <span className={`${className || ''} _dsp_contents`} style={colorStyle}>\n {wrapped}\n </span>\n )\n }\n }\n\n return children\n}\n"],
5
- "mappings": "AAkDc;AAlDd,SAAS,aAAa;AACtB,SAAS,UAAU,cAAc,sBAAsB;AAEvD,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,SAAS;AAChC,QAAM,aAAa,qBAAqB,OAAO,MAAM;AACrD,QAAM,WAAW,MAAM,gBAAgB,IACnC,SAAS;AAAA,IAAI,MAAM;AAAA,IAAU,CAAC,UAC5B,aAAa,OAAO,EAAE,CAAC,gBAAgB,GAAG,KAAK,CAAC;AAAA,EAClD,IACA,MAAM;AAEV,SAAO,kBAAkB,YAAY,UAAU,KAAK;AACtD;AAEO,SAAS,kBACd,YACA,UACA,SAKA;AACA,QAAM,EAAE,cAAc,YAAY,WAAW,MAAM,IAAI;AACvD,QAAM,EAAE,SAAS,eAAe,IAAI;AACpC,QAAM,gBAAgB,aAAa,KAAK;AACxC,MAAI,YAAY;AACd,kBAAc,UAAU;AAAA,EAC1B;AAEA,MAAI,cAAc,cAAc,WAAW,gBAAgB;AAEzD,QAAI,OAAO,SAAS,QAAQ,QAAQ;AAGpC,QAAI,WAAW,cAAc;AAC3B,aAAO,KAAK,IAAI,CAAC,UAAU;AACzB,eAAO,eAAe,KAAK,IACvB;AAAA,UACE;AAAA,UACA;AAAA,UACA,oBAAC,SAAM,MAAM,aAAa,MAAM,YAC5B,gBAAc,MAAM,UACxB;AAAA,QACF,IACA;AAAA,MACN,CAAC;AAAA,IACH;AAoBA,UAAM,UACJ,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,cAClC,gBACH;AAGF,QAAI,mBAAmB,OAAO;AAC5B,aAAO;AAAA,IACT;AAEA,QAAI,SAAS,CAAC,QAAQ,qBAAqB;AAEzC,YAAM,aAAa,SAAS,aAAa,iBAAiB,MAAM,KAAK,IAAI;AACzE,YAAM,aAAa;AAAA,QACjB,OAAO;AAAA,MACT;AAEA,aACE,oBAAC,UAAK,WAAW,GAAG,aAAa,oBAAoB,OAAO,YACzD,mBACH;AAAA,IAEJ;AAAA,EACF;AAEA,SAAO;AACT;",
4
+ "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport { Children, cloneElement, isValidElement } from 'react'\n\nimport { variableToString } from '../createVariable.js'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext.js'\nimport { useServerRef } from '../hooks/useServerHooks.js'\nimport { ChangedThemeResponse, useChangeThemeEffect } from '../hooks/useTheme.js'\nimport type { ThemeProps } from '../types.js'\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, isRoot)\n}\n\nexport function useThemedChildren(\n themeState: ChangedThemeResponse,\n children: any,\n options: {\n forceClassName?: boolean\n shallow?: boolean\n passPropsToChildren?: boolean\n },\n isRoot = false\n) {\n const { themeManager, isNewTheme, className, theme } = themeState\n const { shallow, forceClassName } = options\n const hasEverThemed = useServerRef(false)\n if (isNewTheme) {\n hasEverThemed.current = true\n }\n\n if (isNewTheme || hasEverThemed.current || forceClassName || isRoot) {\n // be sure to memoize shouldReset to avoid reparenting\n let next = Children.toArray(children)\n\n // each children of these children wont get the theme\n if (shallow && themeManager) {\n next = next.map((child) => {\n return isValidElement(child)\n ? cloneElement(\n child,\n undefined,\n <Theme name={themeManager.state.parentName}>\n {(child as any).props.children}\n </Theme>\n )\n : child\n })\n }\n\n // tried this but themes css doesn't fully like it\n // if (shouldAttachClassName && options.passPropsToChildren) {\n // next = next.map((child: any) => {\n // const childStyle = child.props?.style\n // console.log('pass it down', className, child.props.className || '')\n // const newProps = {\n // className: (child.props.className || '') + ' ' + className,\n // style: Array.isArray(childStyle)\n // ? [colorStyle, ...childStyle]\n // : {\n // ...colorStyle,\n // ...childStyle,\n // },\n // }\n // return isValidElement(child) ? cloneElement(child as any, newProps) : child\n // })\n // }\n\n const wrapped = (\n <ThemeManagerContext.Provider value={themeManager}>\n {next}\n </ThemeManagerContext.Provider>\n )\n\n if (forceClassName === false) {\n return wrapped\n }\n\n if (isWeb && !options.passPropsToChildren) {\n // in order to provide currentColor, set color by default\n const themeColor = theme && isNewTheme ? variableToString(theme.color) : ''\n const colorStyle = {\n color: themeColor,\n }\n\n return (\n <span className={`${className || ''} _dsp_contents`} style={colorStyle}>\n {wrapped}\n </span>\n )\n }\n\n return wrapped\n }\n\n return children\n}\n"],
5
+ "mappings": "AAmDc;AAnDd,SAAS,aAAa;AACtB,SAAS,UAAU,cAAc,sBAAsB;AAEvD,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,SAAS;AAChC,QAAM,aAAa,qBAAqB,OAAO,MAAM;AACrD,QAAM,WAAW,MAAM,gBAAgB,IACnC,SAAS;AAAA,IAAI,MAAM;AAAA,IAAU,CAAC,UAC5B,aAAa,OAAO,EAAE,CAAC,gBAAgB,GAAG,KAAK,CAAC;AAAA,EAClD,IACA,MAAM;AAEV,SAAO,kBAAkB,YAAY,UAAU,OAAO,MAAM;AAC9D;AAEO,SAAS,kBACd,YACA,UACA,SAKA,SAAS,OACT;AACA,QAAM,EAAE,cAAc,YAAY,WAAW,MAAM,IAAI;AACvD,QAAM,EAAE,SAAS,eAAe,IAAI;AACpC,QAAM,gBAAgB,aAAa,KAAK;AACxC,MAAI,YAAY;AACd,kBAAc,UAAU;AAAA,EAC1B;AAEA,MAAI,cAAc,cAAc,WAAW,kBAAkB,QAAQ;AAEnE,QAAI,OAAO,SAAS,QAAQ,QAAQ;AAGpC,QAAI,WAAW,cAAc;AAC3B,aAAO,KAAK,IAAI,CAAC,UAAU;AACzB,eAAO,eAAe,KAAK,IACvB;AAAA,UACE;AAAA,UACA;AAAA,UACA,oBAAC,SAAM,MAAM,aAAa,MAAM,YAC5B,gBAAc,MAAM,UACxB;AAAA,QACF,IACA;AAAA,MACN,CAAC;AAAA,IACH;AAoBA,UAAM,UACJ,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,cAClC,gBACH;AAGF,QAAI,mBAAmB,OAAO;AAC5B,aAAO;AAAA,IACT;AAEA,QAAI,SAAS,CAAC,QAAQ,qBAAqB;AAEzC,YAAM,aAAa,SAAS,aAAa,iBAAiB,MAAM,KAAK,IAAI;AACzE,YAAM,aAAa;AAAA,QACjB,OAAO;AAAA,MACT;AAEA,aACE,oBAAC,UAAK,WAAW,GAAG,aAAa,oBAAoB,OAAO,YACzD,mBACH;AAAA,IAEJ;AAEA,WAAO;AAAA,EACT;AAEA,SAAO;AACT;",
6
6
  "names": []
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tamagui/web",
3
- "version": "1.5.22",
3
+ "version": "1.5.23",
4
4
  "source": "src/index.ts",
5
5
  "main": "dist/cjs",
6
6
  "module": "dist/esm",
@@ -27,19 +27,19 @@
27
27
  "reset.css"
28
28
  ],
29
29
  "dependencies": {
30
- "@tamagui/compose-refs": "^1.5.22",
31
- "@tamagui/constants": "^1.5.22",
32
- "@tamagui/helpers": "^1.5.22",
33
- "@tamagui/normalize-css-color": "^1.5.22",
34
- "@tamagui/use-did-finish-ssr": "^1.5.22",
35
- "@tamagui/use-event": "^1.5.22",
36
- "@tamagui/use-force-update": "^1.5.22"
30
+ "@tamagui/compose-refs": "^1.5.23",
31
+ "@tamagui/constants": "^1.5.23",
32
+ "@tamagui/helpers": "^1.5.23",
33
+ "@tamagui/normalize-css-color": "^1.5.23",
34
+ "@tamagui/use-did-finish-ssr": "^1.5.23",
35
+ "@tamagui/use-event": "^1.5.23",
36
+ "@tamagui/use-force-update": "^1.5.23"
37
37
  },
38
38
  "peerDependencies": {
39
39
  "react": "*"
40
40
  },
41
41
  "devDependencies": {
42
- "@tamagui/build": "^1.5.22",
42
+ "@tamagui/build": "^1.5.23",
43
43
  "@testing-library/react": "^13.4.0",
44
44
  "csstype": "^3.0.10",
45
45
  "react": "^18.2.0",
package/src/views/Theme.tsx CHANGED
@@ -18,7 +18,7 @@ export function Theme(props: ThemeProps) {
18
18
  )
19
19
  : props.children
20
20
 
21
- return useThemedChildren(themeState, children, props)
21
+ return useThemedChildren(themeState, children, props, isRoot)
22
22
  }
23
23
 
24
24
  export function useThemedChildren(
@@ -28,7 +28,8 @@ export function useThemedChildren(
28
28
  forceClassName?: boolean
29
29
  shallow?: boolean
30
30
  passPropsToChildren?: boolean
31
- }
31
+ },
32
+ isRoot = false
32
33
  ) {
33
34
  const { themeManager, isNewTheme, className, theme } = themeState
34
35
  const { shallow, forceClassName } = options
@@ -37,7 +38,7 @@ export function useThemedChildren(
37
38
  hasEverThemed.current = true
38
39
  }
39
40
 
40
- if (isNewTheme || hasEverThemed.current || forceClassName) {
41
+ if (isNewTheme || hasEverThemed.current || forceClassName || isRoot) {
41
42
  // be sure to memoize shouldReset to avoid reparenting
42
43
  let next = Children.toArray(children)
43
44
 
@@ -97,6 +98,8 @@ export function useThemedChildren(
97
98
  </span>
98
99
  )
99
100
  }
101
+
102
+ return wrapped
100
103
  }
101
104
 
102
105
  return children
package/types/views/Theme.d.ts CHANGED
@@ -5,5 +5,5 @@ export declare function useThemedChildren(themeState: ChangedThemeResponse, chil
5
5
  forceClassName?: boolean;
6
6
  shallow?: boolean;
7
7
  passPropsToChildren?: boolean;
8
- }): any;
8
+ }, isRoot?: boolean): any;
9
9
  //# sourceMappingURL=Theme.d.ts.map
package/types/views/Theme.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../src/views/Theme.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,oBAAoB,EAAwB,MAAM,sBAAsB,CAAA;AACjF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAE7C,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,OAYtC;AAED,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,oBAAoB,EAChC,QAAQ,EAAE,GAAG,EACb,OAAO,EAAE;IACP,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B,OAwEF"}
1
+ {"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../src/views/Theme.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,oBAAoB,EAAwB,MAAM,sBAAsB,CAAA;AACjF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAE7C,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,OAYtC;AAED,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,oBAAoB,EAChC,QAAQ,EAAE,GAAG,EACb,OAAO,EAAE;IACP,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B,EACD,MAAM,UAAQ,OA0Ef"}