@plasmicapp/react-web 0.2.402 → 0.2.404

package/dist/all.d.ts

@@ -11491,6 +11491,16 @@ interface GraphQLCore<Ctx extends any[]> {
     method?: string | ContextDependentConfig<Ctx, string>;
     headers?: object | ContextDependentConfig<Ctx, object>;
 }
+/**
+ * Dynamic prop/param type that returns different control types based on context
+ */
+interface DynamicCore<Ctx extends any[], ControlType> {
+    type: "dynamic";
+    /**
+     * Function that takes the context and returns a control type
+     */
+    control: ContextDependentConfig<Ctx, ControlType>;
+}
 
 type Nullish<T> = T | null | undefined;
 
@@ -12147,8 +12157,10 @@ interface RichCustomType<P> extends PropTypeBaseDefault<P, any> {
     control: CustomControl<P>;
 }
 type CustomType<P> = RichCustomType<P> | CustomControl<P>;
+interface DynamicType$1<P> extends PropTypeBase<ComponentControlContext<P>>, DynamicCore<ComponentControlContext<P>, PropType$1<P>> {
+}
 type PrimitiveType<P = any> = Extract<StringType$1<P> | BooleanType$1<P> | NumberType$1<P> | JSONLikeType<P>, string>;
-type PropType$1<P> = StringType$1<P> | BooleanType$1<P> | GraphQLType$1<P> | NumberType$1<P> | JSONLikeType<P> | DataSourceType<P> | DataPickerType<P> | ExprEditorType<P> | FormValidationRulesType<P> | EventHandlerType<P> | ChoiceType$1<P> | CustomType<P> | ImageUrlType<P> | SlotType<P> | DateStringType$1<P> | DateRangeStringsType$1<P>;
+type PropType$1<P> = StringType$1<P> | BooleanType$1<P> | GraphQLType$1<P> | NumberType$1<P> | JSONLikeType<P> | DataSourceType<P> | DataPickerType<P> | ExprEditorType<P> | FormValidationRulesType<P> | EventHandlerType<P> | ChoiceType$1<P> | CustomType<P> | DynamicType$1<P> | ImageUrlType<P> | SlotType<P> | DateStringType$1<P> | DateRangeStringsType$1<P>;
 type ArgType<P> = Exclude<PropType$1<P>, SlotType<P> | EventHandlerType<P>>;
 type StringCompatType<P> = DateStringType$1<P> | StringType$1<P> | ChoiceType$1<P> | JSONLikeType<P> | ImageUrlType<P> | CustomType<P> | DataPickerType<P>;
 type BoolCompatType<P> = BooleanType$1<P> | CustomType<P> | DataPickerType<P>;
@@ -12255,10 +12267,12 @@ interface CustomChoiceType<P, Opt extends ChoiceValue = ChoiceValue> extends Fun
 type ChoiceType<P, T extends ChoiceValue = ChoiceValue> = SingleChoiceType<P, T> | MultiChoiceType<P, T> | CustomChoiceType<P, T>;
 type DateStringType = BaseParam & DateStringCore;
 type DateRangeStringsType = BaseParam & DateRangeStringsCore;
+interface DynamicType<P> extends BaseParam, DynamicCore<FunctionControlContext<ToTuple<P>>, ParamType<P, any>> {
+}
 type RestrictedType<P, T> = IsAny<T> extends true ? AnyTyping<P, T> : [
     T
 ] extends [string] ? StringType<P, T> : [T] extends [number] ? NumberType<P, T> : [T] extends [boolean] ? BooleanType<P, T> : T extends string | null | undefined ? Exclude<T, null | undefined> extends string ? StringType<P, T extends string ? T : string> : CommonType<P, T> : T extends number | null | undefined ? Exclude<T, null | undefined> extends number ? NumberType<P, T extends number ? T : number> : CommonType<P, T> : T extends boolean | null | undefined ? Exclude<T, null | undefined> extends boolean ? BooleanType<P, T extends boolean ? T : boolean> : CommonType<P, T> : CommonType<P, T>;
-type ParamType<P, T> = RestrictedType<P, T>;
+type ParamType<P, T> = RestrictedType<P, T> | DynamicType<P>;
 type RequiredParam<P, T> = ParamType<P, T> & {
     isOptional?: false;
     isRestParameter?: false;
@@ -12956,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:
  *
@@ -12965,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,
@@ -12994,7 +13012,7 @@ type ClassName = string;
  * ```
  */
 interface ProjectStyleTokenData {
-    base: ClassName;
+    base?: ClassName;
     varianted: {
         className: ClassName;
         groupName: string;
@@ -13003,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,
  * );
  *
@@ -13037,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) {