@tamagui/core 1.12.1 → 1.13.0

package/dist/esm/helpers/ThemeManager.mjs

@@ -0,0 +1,209 @@
+import { getThemes, getTokens } from "../config";
+import { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from "../constants/constants";
+import { getThemeUnwrapped } from "../hooks/getThemeUnwrapped";
+const emptyState = { name: "" };
+function hasNoThemeUpdatingProps(props) {
+  return !(props.name || props.componentName || props.inverse || props.reset);
+}
+class ThemeManager {
+  constructor(props = {}, parentManager) {
+    this.props = props;
+    this.themeListeners = /* @__PURE__ */ new Set();
+    this.parentManager = null;
+    this.state = emptyState;
+    this._allKeys = null;
+    if (parentManager === "root") {
+      this.updateState(props, false);
+      return;
+    }
+    if (!parentManager) {
+      if (process.env.NODE_ENV !== "production") {
+        console.trace();
+        throw new Error(`No parent manager given`);
+      }
+      throw `\u274C`;
+    }
+    this.themeListeners = parentManager.themeListeners;
+    if (hasNoThemeUpdatingProps(props)) {
+      return parentManager;
+    }
+    if (parentManager) {
+      this.parentManager = parentManager;
+    }
+    const updatedState = this.getStateIfChanged(props);
+    if (updatedState) {
+      this.state = updatedState;
+      return;
+    }
+    return parentManager || this;
+  }
+  updateState(props = this.props || {}, notify = true) {
+    const shouldFlush = (() => {
+      if (props.forceTheme) {
+        this.state.theme = props.forceTheme;
+        this.state.name = props.name || "";
+        return true;
+      }
+      const nextState = this.getStateIfChanged(props);
+      if (nextState) {
+        this.state = nextState;
+        return true;
+      }
+    })();
+    if (shouldFlush) {
+      this._allKeys = null;
+      notify && this.notify();
+      return this.state;
+    }
+  }
+  getStateIfChanged(props = this.props, state = this.state, parentManager = this.parentManager) {
+    const _ = this.getState(props, parentManager);
+    if (state && state !== emptyState && !_) {
+      return parentManager == null ? void 0 : parentManager.state;
+    }
+    if (this.getStateShouldChange(_, state)) {
+      return _;
+    }
+  }
+  getStateShouldChange(nextState, state = this.state) {
+    if (!(nextState == null ? void 0 : nextState.theme) || nextState.theme === (state == null ? void 0 : state.theme)) {
+      return false;
+    }
+    return true;
+  }
+  getState(props = this.props, parentManager = this.parentManager) {
+    return getState(props, parentManager) || (process.env.TAMAGUI_TARGET === "native" ? (parentManager == null ? void 0 : parentManager.state) || null : null);
+  }
+  get allKeys() {
+    var _a;
+    this._allKeys ||= /* @__PURE__ */ new Set([
+      ...((_a = this.parentManager) == null ? void 0 : _a.allKeys) || [],
+      ...Object.keys(this.state.theme || {})
+    ]);
+    return this._allKeys;
+  }
+  // gets value going up to parents
+  getValue(key, state) {
+    if (!key)
+      return;
+    let theme = (state || this.state).theme;
+    let manager = this;
+    while (theme && manager) {
+      if (key in theme) {
+        return theme[key];
+      }
+      manager = manager.parentManager;
+      theme = manager == null ? void 0 : manager.state.theme;
+    }
+    const tokens = getTokens();
+    if (key in tokens.color) {
+      return tokens.color[key];
+    }
+  }
+  notify() {
+    this.themeListeners.forEach((cb) => cb(this.state.name, this));
+  }
+  onChangeTheme(cb) {
+    this.themeListeners.add(cb);
+    return () => {
+      this.themeListeners.delete(cb);
+    };
+  }
+}
+function getNextThemeClassName(name, isInverting = false) {
+  const next = `${THEME_CLASSNAME_PREFIX}${name}`;
+  if (isInverting) {
+    return next;
+  }
+  return next.replace("light_", "").replace("dark_", "");
+}
+const cache = /* @__PURE__ */ new WeakMap();
+function getState(props, parentManager) {
+  var _a, _b, _c;
+  const cached = cache.get(props);
+  if (cached && cached[0] === parentManager) {
+    return cached[1];
+  }
+  const themes = getThemes();
+  if (props.name && props.reset) {
+    throw new Error("Cannot reset + set new name");
+  }
+  if (props.reset && !(parentManager == null ? void 0 : parentManager.parentManager)) {
+    throw new Error("Cannot reset no grandparent exists");
+  }
+  let result = null;
+  const nextName = props.reset ? ((_b = (_a = parentManager == null ? void 0 : parentManager.parentManager) == null ? void 0 : _a.state) == null ? void 0 : _b.name) || "" : props.name || "";
+  const { componentName } = props;
+  const parentName = ((_c = parentManager == null ? void 0 : parentManager.state) == null ? void 0 : _c.name) || "";
+  const base = parentName.split(THEME_NAME_SEPARATOR);
+  const lastSegment = base[base.length - 1];
+  const isParentAComponentTheme = parentName && lastSegment[0].toUpperCase() === lastSegment[0];
+  if (isParentAComponentTheme) {
+    base.pop();
+  }
+  const parentBaseTheme = isParentAComponentTheme ? base.slice(0, base.length).join(THEME_NAME_SEPARATOR) : parentName;
+  const max = base.length;
+  const min = componentName && !nextName ? max : 0;
+  if (process.env.NODE_ENV === "development" && props.debug === "verbose")
+    [console.groupCollapsed("ThemeManager.getState()", props, { parentName, parentBaseTheme, base, min, max, isParentAComponentTheme }), console.trace(), console.groupEnd()];
+  for (let i = max; i >= min; i--) {
+    let prefix = base.slice(0, i).join(THEME_NAME_SEPARATOR);
+    if (props.inverse) {
+      prefix = inverseThemeName(prefix);
+    }
+    const potentials = [];
+    if (prefix && prefix !== parentBaseTheme) {
+      potentials.push(prefix);
+    }
+    if (nextName) {
+      potentials.unshift(prefix ? `${prefix}_${nextName}` : nextName);
+    }
+    if (i === 1) {
+      const lastSegment2 = potentials.findIndex((x) => !x.includes("_"));
+      if (lastSegment2 > 0) {
+        potentials.splice(lastSegment2, 0, nextName);
+      }
+    }
+    if (componentName) {
+      if (nextName) {
+        potentials.push(
+          `${prefix.slice(
+            0,
+            prefix.indexOf(THEME_NAME_SEPARATOR)
+          )}_${nextName}_${componentName}`
+        );
+      }
+      potentials.push(`${prefix}_${componentName}`);
+      if (nextName) {
+        potentials.unshift(`${prefix}_${nextName}_${componentName}`);
+      }
+    }
+    const found = potentials.find((t) => t in themes);
+    if (process.env.NODE_ENV === "development" && props.debug === "verbose")
+      console.log("getState found", found, "from", potentials, "parentName", parentName);
+    if (found) {
+      if (found === parentName) {
+        break;
+      }
+      result = {
+        name: found,
+        theme: getThemeUnwrapped(themes[found]),
+        className: getNextThemeClassName(found, props.inverse),
+        parentName
+      };
+      break;
+    }
+  }
+  if (parentManager) {
+    cache.set(props, [parentManager, result]);
+  }
+  return result;
+}
+const inverseThemeName = (themeName) => {
+  return themeName.startsWith("light") ? themeName.replace(/^light/, "dark") : themeName.replace(/^dark/, "light");
+};
+export {
+  ThemeManager,
+  hasNoThemeUpdatingProps
+};
+//# sourceMappingURL=ThemeManager.mjs.map

package/dist/esm/helpers/ThemeManager.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/ThemeManager.tsx"],
+  "sourcesContent": ["import { getThemes, getTokens } from '../config'\nimport { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from '../constants/constants'\nimport { getThemeUnwrapped } from '../hooks/getThemeUnwrapped'\nimport { ThemeParsed, ThemeProps } from '../types'\n\ntype ThemeListener = (name: string | null, themeManager: ThemeManager) => void\n\nexport type SetActiveThemeProps = {\n  className?: string\n  parentManager?: ThemeManager | null\n  name?: string | null\n  theme?: any\n  reset?: boolean\n}\n\nexport type ThemeManagerState = {\n  name: string\n  theme?: ThemeParsed | null\n  className?: string\n  parentName?: string\n}\n\nconst emptyState: ThemeManagerState = { name: '' }\n\nexport function hasNoThemeUpdatingProps(props: ThemeProps) {\n  return !(props.name || props.componentName || props.inverse || props.reset)\n}\n\nexport class ThemeManager {\n  themeListeners = new Set<ThemeListener>()\n  parentManager: ThemeManager | null = null\n  state: ThemeManagerState = emptyState\n\n  constructor(\n    public props: ThemeProps = {},\n    parentManager?: ThemeManager | 'root' | null | undefined\n  ) {\n    if (parentManager === 'root') {\n      this.updateState(props, false)\n      return\n    }\n    if (!parentManager) {\n      if (process.env.NODE_ENV !== 'production') {\n        console.trace()\n        throw new Error(`No parent manager given`)\n      }\n      throw `\u274C`\n    }\n    // copy over listeners\n    this.themeListeners = parentManager.themeListeners\n\n    // no change no props\n    if (hasNoThemeUpdatingProps(props)) {\n      return parentManager\n    }\n    if (parentManager) {\n      this.parentManager = parentManager\n    }\n    const updatedState = this.getStateIfChanged(props)\n    if (updatedState) {\n      this.state = updatedState\n      return\n    }\n    return parentManager || this\n  }\n\n  updateState(\n    props: ThemeProps & { forceTheme?: ThemeParsed } = this.props || {},\n    notify = true\n  ) {\n    const shouldFlush = (() => {\n      if (props.forceTheme) {\n        this.state.theme = props.forceTheme\n        this.state.name = props.name || ''\n        return true\n      }\n      const nextState = this.getStateIfChanged(props)\n      if (nextState) {\n        this.state = nextState\n        return true\n      }\n    })()\n    if (shouldFlush) {\n      // reset any derived state\n      this._allKeys = null\n      notify && this.notify()\n      return this.state\n    }\n  }\n\n  getStateIfChanged(\n    props = this.props,\n    state: ThemeManagerState | null = this.state,\n    parentManager = this.parentManager\n  ) {\n    const _ = this.getState(props, parentManager)\n    // is removing\n    if (state && state !== emptyState && !_) {\n      return parentManager?.state\n    }\n    if (this.getStateShouldChange(_, state)) {\n      return _\n    }\n  }\n\n  getStateShouldChange(\n    nextState: ThemeManagerState | null,\n    state: ThemeManagerState | null = this.state\n  ) {\n    if (!nextState?.theme || nextState.theme === state?.theme) {\n      return false\n    }\n    return true\n  }\n\n  getState(props = this.props, parentManager = this.parentManager) {\n    return (\n      getState(props, parentManager) ||\n      (process.env.TAMAGUI_TARGET === 'native' ? parentManager?.state || null : null)\n    )\n  }\n\n  _allKeys: Set<string> | null = null\n  get allKeys() {\n    this._allKeys ||= new Set([\n      ...(this.parentManager?.allKeys || []),\n      ...Object.keys(this.state.theme || {}),\n    ])\n    return this._allKeys\n  }\n\n  // gets value going up to parents\n  getValue(key: string, state?: ThemeManagerState) {\n    if (!key) return\n    let theme = (state || this.state).theme\n    let manager = this as ThemeManager | null\n    while (theme && manager) {\n      if (key in theme) {\n        return theme[key]\n      }\n      manager = manager.parentManager\n      theme = manager?.state.theme\n    }\n    const tokens = getTokens()\n    if (key in tokens.color) {\n      return tokens.color[key]\n    }\n  }\n\n  notify() {\n    this.themeListeners.forEach((cb) => cb(this.state.name, this))\n  }\n\n  onChangeTheme(cb: ThemeListener) {\n    this.themeListeners.add(cb)\n    return () => {\n      this.themeListeners.delete(cb)\n    }\n  }\n}\n\nfunction getNextThemeClassName(name: string, isInverting = false) {\n  const next = `${THEME_CLASSNAME_PREFIX}${name}`\n  if (isInverting) {\n    return next\n  }\n  return next.replace('light_', '').replace('dark_', '')\n}\n\nconst cache = new WeakMap<ThemeProps, [ThemeManager, ThemeManagerState | null]>()\n\nfunction getState(\n  props: ThemeProps,\n  parentManager?: ThemeManager | null\n): ThemeManagerState | null {\n  const cached = cache.get(props)\n  if (cached && cached[0] === parentManager) {\n    return cached[1]\n  }\n\n  const themes = getThemes()\n\n  if (props.name && props.reset) {\n    throw new Error('Cannot reset + set new name')\n  }\n  if (props.reset && !parentManager?.parentManager) {\n    throw new Error('Cannot reset no grandparent exists')\n  }\n\n  let result: ThemeManagerState | null = null\n\n  const nextName = props.reset\n    ? parentManager?.parentManager?.state?.name || ''\n    : props.name || ''\n  const { componentName } = props\n  const parentName = parentManager?.state?.name || ''\n\n  // components look for most specific, fallback upwards\n  const base = parentName.split(THEME_NAME_SEPARATOR)\n  const lastSegment = base[base.length - 1]\n  const isParentAComponentTheme =\n    parentName && lastSegment[0].toUpperCase() === lastSegment[0]\n  if (isParentAComponentTheme) {\n    base.pop() // always remove componentName they can't nest\n  }\n  const parentBaseTheme = isParentAComponentTheme\n    ? base.slice(0, base.length).join(THEME_NAME_SEPARATOR)\n    : parentName\n  const max = base.length\n  const min =\n    componentName && !nextName\n      ? max // component name only don't search upwards\n      : 0\n\n  // prettier-ignore\n  // eslint-disable-next-line no-console\n  if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') [ console.groupCollapsed('ThemeManager.getState()', props, { parentName,   parentBaseTheme,   base,   min,   max,   isParentAComponentTheme }), console.trace(), console.groupEnd() ]\n\n  for (let i = max; i >= min; i--) {\n    let prefix = base.slice(0, i).join(THEME_NAME_SEPARATOR)\n    if (props.inverse) {\n      prefix = inverseThemeName(prefix)\n    }\n    const potentials: string[] = []\n    if (prefix && prefix !== parentBaseTheme) {\n      potentials.push(prefix)\n    }\n    if (nextName) {\n      potentials.unshift(prefix ? `${prefix}_${nextName}` : nextName)\n    }\n    if (i === 1) {\n      const lastSegment = potentials.findIndex((x) => !x.includes('_'))\n      if (lastSegment > 0) {\n        potentials.splice(lastSegment, 0, nextName) // last try prefer our new name to parent\n      }\n    }\n    if (componentName) {\n      // components only look for component themes\n      if (nextName) {\n        potentials.push(\n          `${prefix.slice(\n            0,\n            prefix.indexOf(THEME_NAME_SEPARATOR)\n          )}_${nextName}_${componentName}`\n        )\n      }\n      potentials.push(`${prefix}_${componentName}`)\n      if (nextName) {\n        potentials.unshift(`${prefix}_${nextName}_${componentName}`)\n      }\n    }\n\n    const found = potentials.find((t) => t in themes)\n\n    // eslint-disable-next-line no-console\n    if (process.env.NODE_ENV === 'development' && props.debug === 'verbose')\n      console.log('getState found', found, 'from', potentials, 'parentName', parentName)\n\n    if (found) {\n      // optimization return null if not changed\n      if (found === parentName) {\n        break\n      }\n      result = {\n        name: found,\n        theme: getThemeUnwrapped(themes[found]),\n        className: getNextThemeClassName(found, props.inverse),\n        parentName,\n      }\n      break\n    }\n  }\n\n  if (parentManager) {\n    cache.set(props, [parentManager, result])\n  }\n\n  return result\n}\n\nconst inverseThemeName = (themeName: string) => {\n  return themeName.startsWith('light')\n    ? themeName.replace(/^light/, 'dark')\n    : themeName.replace(/^dark/, 'light')\n}\n"],
+  "mappings": "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",
+  "names": ["lastSegment"]
+}

package/dist/esm/helpers/ThemeManager.test.js

@@ -0,0 +1,464 @@
+import { getDefaultTamaguiConfig } from "@tamagui/config-default-node";
+import { beforeAll, describe, expect, test } from "vitest";
+import { createTamagui } from "../createTamagui";
+import { ThemeManager } from "./ThemeManager";
+const conf = getDefaultTamaguiConfig();
+describe("ThemeManager", () => {
+  beforeAll(() => {
+    createTamagui(conf);
+  });
+  test("Changes theme to dark", () => {
+    const manager = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    expect(manager.state.name).toBe("dark");
+  });
+  test('Given parent theme "dark" and child theme "red" to return theme "dark_red"', () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "red"
+      },
+      parent
+    );
+    expect(parent.state.name).toBe("dark");
+    expect(child.state.name).toBe("dark_red");
+  });
+  test('Given parent theme "dark", child theme "red_alt2" and component "Button" returns "dark_red_alt2_Button"', () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const child1 = new ThemeManager(
+      {
+        name: "red"
+      },
+      parent
+    );
+    expect(child1.state.name).toBe("dark_red");
+    const child2 = new ThemeManager(
+      {
+        name: "alt2",
+        componentName: "Button"
+      },
+      child1
+    );
+    expect(child2.state.name).toBe("dark_red_alt2_Button");
+  });
+  test('Given parent theme "dark", child theme "red" and component "Button" returns "dark_red_Button"', () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const child1 = new ThemeManager(
+      {
+        name: "red"
+      },
+      parent
+    );
+    expect(child1.state.name).toBe("dark_red");
+    const child2 = new ThemeManager(
+      {
+        componentName: "Button"
+      },
+      child1
+    );
+    expect(child2.state.name).toBe("dark_red_Button");
+  });
+  test('Given parent theme "dark", child theme "red" and missing component "Card" returns "dark_red"', () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const child1 = new ThemeManager(
+      {
+        name: "red"
+      },
+      parent
+    );
+    expect(child1.state.name).toBe("dark_red");
+    const child2 = new ThemeManager(
+      {
+        componentName: "Card"
+      },
+      child1
+    );
+    expect(child2.state.name).toBe("dark_red");
+  });
+  test('Changes "light" to "dark"', () => {
+    const parent = new ThemeManager(
+      {
+        name: "light"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "dark"
+      },
+      parent
+    );
+    expect(parent.state.name).toBe("light");
+    expect(child.state.name).toBe("dark");
+  });
+  test('Inverts "light" to "dark"', () => {
+    const parent = new ThemeManager(
+      {
+        name: "light"
+      },
+      "root"
+    );
+    const child1 = new ThemeManager(
+      {
+        inverse: true
+      },
+      parent
+    );
+    expect(child1.state.name).toBe("dark");
+  });
+  test('Inverts "light_red" to "dark_red"', () => {
+    const parent = new ThemeManager(
+      {
+        name: "light"
+      },
+      "root"
+    );
+    const child1 = new ThemeManager(
+      {
+        name: "red",
+        inverse: true
+      },
+      parent
+    );
+    expect(child1.state.name).toBe("dark_red");
+  });
+  test("Updates state", () => {
+    const parent = new ThemeManager(
+      {
+        name: "light"
+      },
+      "root"
+    );
+    const newState = parent.updateState({
+      name: "dark"
+    });
+    expect(newState).toMatchInlineSnapshot(`
+      {
+        "className": "t_dark",
+        "name": "dark",
+        "parentName": "",
+        "theme": {
+          "background": {
+            "isVar": true,
+            "key": "color-2",
+            "name": "background",
+            "val": "#000",
+            "variable": "",
+          },
+          "color": {
+            "isVar": true,
+            "key": "color-1",
+            "name": "color",
+            "val": "#fff",
+            "variable": "",
+          },
+        },
+      }
+    `);
+    expect(parent.state.name).toBe("dark");
+  });
+  test("Returns parent on empty", () => {
+    const parent = new ThemeManager(
+      {
+        name: "light"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: null
+      },
+      parent
+    );
+    expect(child).toBe(parent);
+  });
+  test("Resets theme", () => {
+    const parent = new ThemeManager(
+      {
+        name: "light"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "dark"
+      },
+      parent
+    );
+    expect(child.state.name).toBe("dark");
+    expect(child.parentManager).toBe(parent);
+    const child2 = new ThemeManager(
+      {
+        reset: true
+      },
+      child
+    );
+    expect(child2.parentManager).toBe(child);
+    expect(child2.state.name).toBe("light");
+  });
+  test("Nested invert and reset", () => {
+    const parent = new ThemeManager(
+      {
+        name: "light"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "dark"
+      },
+      parent
+    );
+    const child2 = new ThemeManager(
+      {
+        reset: true
+      },
+      child
+    );
+    const child3 = new ThemeManager(
+      {
+        inverse: true
+      },
+      child2
+    );
+    expect(child3.state.name).toBe("dark");
+  });
+  test("Updates from null the new theme nested 3 themes", () => {
+    const a = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const b = new ThemeManager(
+      {
+        name: "red"
+      },
+      a
+    );
+    expect(b.state.name).toBe("dark_red");
+    const c = new ThemeManager(
+      {
+        name: "alt2"
+      },
+      b
+    );
+    expect(c.state.name).toBe("dark_red_alt2");
+  });
+  test("Ignored dup themes", () => {
+    const a = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const b = new ThemeManager(
+      {
+        name: "dark"
+      },
+      a
+    );
+    expect(b === a).toBe(true);
+  });
+  test("Nested component themes fallback to grandparents", () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "red",
+        componentName: "Button"
+      },
+      parent
+    );
+    const child2 = new ThemeManager(
+      {
+        name: "blue"
+      },
+      child
+    );
+    expect(child2.state.name).toBe("dark_blue");
+    const child3 = new ThemeManager(
+      {
+        componentName: "Button"
+      },
+      child2
+    );
+    expect(child3.state.name).toBe("dark_blue_Button");
+  });
+  test(`Component theme with sub component that doesn't exist keeps same theme`, () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "red",
+        componentName: "Button"
+      },
+      parent
+    );
+    const child2 = new ThemeManager(
+      {
+        componentName: "Spacer"
+      },
+      child
+    );
+    expect(child2).toBe(child);
+  });
+  test(`Doesn't find invalid parent when only passing component`, () => {
+    expect(!!conf.themes["dark_Card"]).toBeTruthy();
+    const parent = new ThemeManager(
+      {
+        name: "dark_red"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        componentName: "Card"
+      },
+      parent
+    );
+    expect(child.state.name).toBe(parent.state.name);
+  });
+  test(`Finds sub-theme when componentName and name are passed but componentName doesn't exist`, () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "red",
+        componentName: "Missing"
+      },
+      parent
+    );
+    expect(child.state.name).toBe("dark_red");
+  });
+  test("Uses the full className without the light/dark prefix", () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "red_alt2"
+      },
+      parent
+    );
+    expect(child.state.className).toBe("t_red_alt2");
+    const child2 = new ThemeManager(
+      {
+        name: "red"
+      },
+      parent
+    );
+    const child3 = new ThemeManager(
+      {
+        name: "alt2"
+      },
+      child2
+    );
+    expect(child3.state.className).toBe("t_red_alt2");
+  });
+  test("Finds component dark_red + Button", () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark_red"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "dark_red",
+        componentName: "Button"
+      },
+      parent
+    );
+    expect(child.state.className).toBe("t_red_Button");
+    expect(child.state.name).toBe("dark_red_Button");
+  });
+  test("Drops componentName if only regular name found at stronger level", () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark_red"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "alt1",
+        componentName: "Button"
+      },
+      parent
+    );
+    expect(child.state.name).toBe("dark_red_alt1");
+  });
+  test("Component name + theme change when nested already", () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark_red"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "yellow",
+        componentName: "Button"
+      },
+      parent
+    );
+    expect(child.state.name).toBe("dark_yellow_Button");
+  });
+  test("Component name + name finds one up when component name missing", () => {
+    const parent = new ThemeManager(
+      {
+        name: "dark_red_alt1"
+      },
+      "root"
+    );
+    const child = new ThemeManager(
+      {
+        name: "alt2",
+        componentName: "Missing"
+      },
+      parent
+    );
+    expect(child.state.name).toBe("dark_red_alt2");
+  });
+});
+//# sourceMappingURL=ThemeManager.test.js.map