@plasmicapp/host 1.0.111 → 1.0.113

package/registerGlobalContext/dist/registerComponent.d.ts

@@ -67,6 +67,45 @@ export declare type StringType<P> = "string" | (({
      * unless you are using a React portal.
      */
     keepCssVar?: boolean;
+} | {
+    type: "class";
+    /**
+     * Additional css selectors that can change how this style should look.
+     * Some examples:
+     *
+     * * `:hover` -- on hover
+     * * `[data-something="blah"] -- when the element with this class has
+     *   an html attribute "data-something=blah"
+     * * :component[data-something="blah"] :self -- when the root of the
+     *   component has an html attribute "data-something=blah". Note that
+     *   the non-standard `:component` selector is used to select the
+     *   component root, and the non-standard `:self` selector is used
+     *   to select the element that this class is attached to.
+     */
+    selectors?: {
+        /**
+         * A css selector, like `:hover` or `[data-something="blah"]`.
+         */
+        selector: string;
+        /**
+         * An optional human-friendly label for the selector, so the studio user
+         * knows what this selector means.
+         */
+        label?: string;
+    }[];
+    /**
+     * If specified, then only shows these style sections for styling this class
+     */
+    styleSections?: StyleSection[];
+} | {
+    type: "themeResetClass";
+    /**
+     * Normally, theme reset class will only target Plasmic-generated tags
+     * with the default tag styles. If you also want to target non-Plasmic-generated
+     * tags (say, rendered by your code components, or fetched as an HTML blob
+     * from somewhere), then specify `true` here.
+     */
+    targetAllTags?: boolean;
 } | {
     type: "cardPicker";
     modalTitle?: React.ReactNode | ContextDependentConfig<P, React.ReactNode>;
@@ -144,6 +183,13 @@ export declare type DataPickerType<P> = ({
     type: "exprEditor";
     data: Record<string, any> | ContextDependentConfig<P, Record<string, any>>;
 } & DefaultValueOrExpr<P, DataPickerValueType> & PropTypeBase<P>);
+export declare type EventHandlerType<P> = {
+    type: "eventHandler";
+    argTypes: {
+        name: string;
+        type: PropType<any>;
+    }[];
+} & DefaultValueOrExpr<P, (...args: any) => any> & PropTypeBase<P>;
 interface ChoiceTypeBase<P> extends PropTypeBase<P> {
     type: "choice";
     options: string[] | {
@@ -242,7 +288,7 @@ declare type ControlTypeBase = {
     uncontrolledProp?: string;
 };
 export declare type SupportControlled<T> = Extract<T, String | CustomControl<any>> | (Exclude<T, String | CustomControl<any>> & ControlTypeBase);
-export declare type PropType<P> = SupportControlled<StringType<P> | BooleanType<P> | NumberType<P> | JSONLikeType<P> | ChoiceType<P> | ImageUrlType<P> | CustomType<P> | GraphQLType<P> | DataPickerType<P>> | SlotType<P>;
+export declare type PropType<P> = SupportControlled<StringType<P> | BooleanType<P> | NumberType<P> | JSONLikeType<P> | ChoiceType<P> | ImageUrlType<P> | CustomType<P> | GraphQLType<P> | DataPickerType<P> | EventHandlerType<P>> | SlotType<P>;
 declare type RestrictPropType<T, P> = T extends string ? SupportControlled<StringType<P> | ChoiceType<P> | JSONLikeType<P> | ImageUrlType<P> | CustomType<P> | DataPickerType<P>> : T extends boolean ? SupportControlled<BooleanType<P> | JSONLikeType<P> | CustomType<P> | DataPickerType<P>> : T extends number ? SupportControlled<NumberType<P> | JSONLikeType<P> | CustomType<P> | DataPickerType<P>> : PropType<P>;
 export interface ActionProps<P> {
     componentProps: P;
@@ -286,16 +332,48 @@ interface ComponentTemplate<P> extends Omit<CodeComponentElement<P>, "type" | "n
 export interface ComponentTemplates<P> {
     [name: string]: ComponentTemplate<P>;
 }
-interface $State {
-    [key: string]: any;
-}
-interface $StateSpec<T> {
-    type: "private" | "readonly" | "writable";
-    initFunc?: ($props: Record<string, any>, $state: $State) => T;
-    initVal?: T;
-    valueProp?: string;
-    onChangeProp?: string;
+export declare type StateSpec = {
+    onChangeProp: string;
+} & ({
+    type: "readonly";
+    variableType: "text";
+    initVal?: string;
+} | {
+    type: "readonly";
+    variableType: "number";
+    initVal?: number;
+} | {
+    type: "readonly";
+    variableType: "boolean";
+    initVal?: boolean;
+} | {
+    type: "readonly";
+    variableType: "array";
+    initVal?: any[];
+} | {
+    type: "readonly";
+    variableType: "object";
+    initVal?: object;
+} | {
+    type: "writable";
+    variableType: "text" | "number" | "boolean" | "array" | "object";
+    valueProp: string;
+});
+export interface StateHelpers<P, T> {
+    initFunc?: ($props: P) => T;
+    onChangeArgsToValue?: (...args: any) => T;
 }
+export declare type ComponentHelpers<P> = {
+    helpers: {
+        states: Record<string, StateHelpers<P, any>>;
+    };
+    importPath: string;
+} & ({
+    importName: string;
+} | {
+    isDefaultExport: true;
+});
+export declare type StyleSection = "visibility" | "typography" | "sizing" | "spacing" | "background" | "transform" | "transitions" | "layout" | "overflow" | "border" | "shadows" | "effects";
 export interface ComponentMeta<P> {
     /**
      * Any unique string name used to identify that component. Each component
@@ -328,18 +406,27 @@ export interface ComponentMeta<P> {
         [prop: string]: PropType<P>;
     };
     /**
-     * WIP: An object describing the component states to be used in Studio.
+     * An object describing the component states to be used in Studio.
+     */
+    states?: Record<string, StateSpec>;
+    /**
+     * An object describing the components helpers to be used in Studio.
+     *   1. states helpers: Each state can receive an "initFunc" prop to initialize
+     *      the implicit state in Studio, and an "onChangeArgsToValue" prop to
+     *      transform the event handler arguments into a value
      */
-    unstable__states?: Record<string, $StateSpec<any>>;
+    componentHelpers?: ComponentHelpers<P>;
     /**
      * An array describing the component actions to be used in Studio.
      */
     actions?: Action<P>[];
     /**
      * Whether style sections should be shown in Studio. For styles to work, the
-     * component must accept a `className` prop. If unset, defaults to true.
+     * component must accept a `className` prop. If unset, defaults to all styles.
+     * Set to `false` if this component cannot be styled (for example, if it doesn't
+     * render any DOM elements).
      */
-    styleSections?: boolean;
+    styleSections?: StyleSection[] | boolean;
     /**
      * Whether the element can be repeated in Studio. If unset, defaults to true.
      */