@plasmicapp/react-web 0.2.403 → 0.2.405

package/dist/all.d.ts

@@ -12970,7 +12970,10 @@ declare const useIsSSR: typeof useIsSSR$1;
 
 type ClassName = string;
 /**
- * All style token data for this project.
+ * All style token data (except overrides) for this project.
+ * This data is used as the default context value.
+ *
+ * We don't include the overrides because the Provider (that wraps the components) decides which project's overrides to apply.
  *
  * Usage:
  *
@@ -12979,9 +12982,10 @@ type ClassName = string;
  * import { usePlatform } from "./PlasmicGlobalVariant__Platform";
  * import { useTheme } from "./PlasmicGlobalVariant__Theme";
  * import projectcss from "./plasmic.module.css";
+ * import depcss from "../dep/plasmic.module.css";
  *
- * const projectStyleTokenData: ProjectStyleTokenData = {
- *   base: projectcss.plasmic_tokens,
+ * const data: ProjectStyleTokenData = {
+ *   base: `${projectcss.plasmic_tokens} ${depcss.plasmic_tokens}`,
  *   varianted: [
  *     {
  *       className: projectcss.global_platform_windows,
@@ -13008,7 +13012,7 @@ type ClassName = string;
  * ```
  */
 interface ProjectStyleTokenData {
-    base: ClassName;
+    base?: ClassName;
     varianted: {
         className: ClassName;
         groupName: string;
@@ -13017,14 +13021,13 @@ interface ProjectStyleTokenData {
 }
 type UseStyleTokens = () => ClassName[];
 /**
- * Returns style tokens. If the context is not available, falls back to the
- * current project's styles.
+ * Creates a useStyleTokens hook for a given project that returns class names for the given project's tokens plus token overrides from StyleTokensProvider if present.
  *
  * Usage:
  * ```
  * // PlasmicStyleTokensProvider.ts
  * export const useStyleTokens = createUseStyleTokens(
- *   projectStyleTokenData,
+ *   data,
  *   useGlobalVariants,
  * );
  *
@@ -13051,14 +13054,15 @@ type UseStyleTokens = () => ClassName[];
  */
 declare function createUseStyleTokens(tokenData: ProjectStyleTokenData, useGlobalVariants: UseGlobalVariants): UseStyleTokens;
 /**
- * Creates a StyleTokens context provider for a given project, which includes
- * its tokens, overrides, and all tokens from its dependencies.
+ * Creates a StyleTokensProvider for a given project to allow propagating its overrides to components of other projects.
+ *
+ * To ensure all tokens in the overrides class name resolve properly, the base and varianted class names must be included.
  *
  * Usage:
  * ```
  * // PlasmicStyleTokensProvider.ts
  * export const StyleTokensProvider = createStyleTokensProvider(
- *   projectStyleTokenData,
+ *   { base: `${projectcss.plasmic_tokens_override} ${data.base}`, varianted: data.varianted },
  *   useGlobalVariants,
  * );
  *

package/dist/index.cjs.js

@@ -1844,14 +1844,13 @@ function MaybeWrap(props) {
  */
 var StyleTokensContext = React.createContext(undefined);
 /**
- * Returns style tokens. If the context is not available, falls back to the
- * current project's styles.
+ * Creates a useStyleTokens hook for a given project that returns class names for the given project's tokens plus token overrides from StyleTokensProvider if present.
  *
  * Usage:
  * ```
  * // PlasmicStyleTokensProvider.ts
  * export const useStyleTokens = createUseStyleTokens(
- *   projectStyleTokenData,
+ *   data,
  *   useGlobalVariants,
  * );
  *
@@ -1878,27 +1877,24 @@ var StyleTokensContext = React.createContext(undefined);
  */
 function createUseStyleTokens(tokenData, useGlobalVariants) {
     return function () {
-        var overrides = React.useContext(StyleTokensContext);
+        var ctxClassNames = React.useContext(StyleTokensContext);
         var globalVariants = useGlobalVariants();
         return React.useMemo(function () {
-            if (overrides && overrides.length > 0) {
-                return overrides;
-            }
-            else {
-                return activeTokensClassNames(tokenData, globalVariants);
-            }
-        }, [overrides, globalVariants, tokenData]);
+            // Use a set to deduplicate
+            return Array.from(new Set(__spreadArray(__spreadArray([], __read((ctxClassNames !== null && ctxClassNames !== void 0 ? ctxClassNames : [])), false), __read(activeTokensClassNames(tokenData, globalVariants)), false)));
+        }, [ctxClassNames, globalVariants]);
     };
 }
 /**
- * Creates a StyleTokens context provider for a given project, which includes
- * its tokens, overrides, and all tokens from its dependencies.
+ * Creates a StyleTokensProvider for a given project to allow propagating its overrides to components of other projects.
+ *
+ * To ensure all tokens in the overrides class name resolve properly, the base and varianted class names must be included.
  *
  * Usage:
  * ```
  * // PlasmicStyleTokensProvider.ts
  * export const StyleTokensProvider = createStyleTokensProvider(
- *   projectStyleTokenData,
+ *   { base: `${projectcss.plasmic_tokens_override} ${data.base}`, varianted: data.varianted },
  *   useGlobalVariants,
  * );
  *
@@ -1932,6 +1928,7 @@ function createStyleTokensProvider(tokenData, useGlobalVariants) {
  * global variants.
  */
 function activeTokensClassNames(tokenData, globalVariants) {
+    var _a, _b;
     var varianted = tokenData.varianted
         .filter(function (_a) {
         var groupName = _a.groupName, variant = _a.variant;
@@ -1941,7 +1938,7 @@ function activeTokensClassNames(tokenData, globalVariants) {
         var className = _a.className;
         return className;
     });
-    return __spreadArray([tokenData.base], __read(varianted), false);
+    return __spreadArray(__spreadArray([], __read(((_b = (_a = tokenData.base) === null || _a === void 0 ? void 0 : _a.split(" ")) !== null && _b !== void 0 ? _b : [])), false), __read(varianted), false);
 }
 
 function useFocused(opts) {