@plasmicapp/react-web 0.2.212 → 0.2.216

package/dist/all.d.ts

@@ -10992,6 +10992,228 @@ interface CodeComponentElement<P> {
 }
 type PlasmicElement = ImageElement | TextElement | ContainerElement | ButtonElement | TextInputElement | CodeComponentElement<{}> | DefaultComponentElement<{}>;
 
+interface ActionProps<P> {
+    componentProps: P;
+    /**
+     * `contextData` can be `null` if the prop controls are rendering before
+     * the component instance itself (it will re-render once the component
+     * calls `setControlContextData`)
+     */
+    contextData: InferDataType<P> | null;
+    studioOps: {
+        showModal: (modalProps: Omit<ModalProps, "onClose"> & {
+            onClose?: () => void;
+        }) => void;
+        refreshQueryData: () => void;
+        appendToSlot: (element: PlasmicElement, slotName: string) => void;
+        removeFromSlotAt: (pos: number, slotName: string) => void;
+        updateProps: (newValues: any) => void;
+    };
+    /**
+     * The document that the component will be rendered into; instead of using
+     * `document` directly (for, say, `document.querySelector()` etc.), you
+     * should use this instead.
+     */
+    studioDocument: typeof document;
+}
+type Action<P> = {
+    type: "button-action";
+    label: string;
+    onClick: (props: ActionProps<P>) => void;
+    hidden?: ContextDependentConfig<P, boolean>;
+} | {
+    type: "custom-action";
+    control: React.ComponentType<ActionProps<P>>;
+    hidden?: ContextDependentConfig<P, boolean>;
+};
+type DistributedKeyOf$1<T> = T extends any ? keyof T : never;
+interface ComponentTemplate<P> extends Omit<CodeComponentElement<P>, "type" | "name"> {
+    /**
+     * A preview picture for the template.
+     */
+    previewImg?: string;
+}
+interface ComponentTemplates<P> {
+    [name: string]: ComponentTemplate<P>;
+}
+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;
+});
+interface StateHelpers<P, T> {
+    initFunc?: ($props: P) => T;
+    onChangeArgsToValue?: (...args: any) => T;
+}
+type ComponentHelpers<P> = {
+    states: Record<string, StateHelpers<P, any>>;
+};
+type ExternalComponentHelpers<P> = {
+    helpers: ComponentHelpers<P>;
+    importPath: string;
+} & ({
+    importName: string;
+} | {
+    isDefaultExport: true;
+});
+type StyleSection = "visibility" | "typography" | "sizing" | "spacing" | "background" | "transform" | "transitions" | "layout" | "overflow" | "border" | "shadows" | "effects";
+interface CodeComponentMeta<P> {
+    /**
+     * Any unique string name used to identify that component. Each component
+     * should be registered with a different `meta.name`, even if they have the
+     * same name in the code.
+     */
+    name: string;
+    /**
+     * The name to be displayed for the component in Studio. Optional: if not
+     * specified, `meta.name` is used.
+     */
+    displayName?: string;
+    /**
+     * The description of the component to be shown in Studio.
+     */
+    description?: string;
+    /**
+     * The javascript name to be used when generating code. Optional: if not
+     * provided, `meta.name` is used.
+     */
+    importName?: string;
+    /**
+     * An object describing the component properties to be used in Studio.
+     * For each `prop`, there should be an entry `meta.props[prop]` describing
+     * its type.
+     */
+    props: {
+        [prop in DistributedKeyOf$1<P>]?: RestrictPropType$1<P[prop], P>;
+    } & {
+        [prop: string]: PropType$1<P>;
+    };
+    /**
+     * 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
+     */
+    componentHelpers?: ExternalComponentHelpers<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 all styles.
+     * Set to `false` if this component cannot be styled (for example, if it doesn't
+     * render any DOM elements).
+     */
+    styleSections?: StyleSection[] | boolean;
+    /**
+     * Whether the element can be repeated in Studio. If unset, defaults to true.
+     */
+    isRepeatable?: boolean;
+    /**
+     * The path to be used when importing the component in the generated code.
+     * It can be the name of the package that contains the component, or the path
+     * to the file in the project (relative to the root directory).
+     */
+    importPath: string;
+    /**
+     *  Whether the component is the default export from that path. Optional: if
+     * not specified, it's considered `false`.
+     */
+    isDefaultExport?: boolean;
+    /**
+     * The prop that expects the CSS classes with styles to be applied to the
+     * component. Optional: if not specified, Plasmic will expect it to be
+     * `className`. Notice that if the component does not accept CSS classes, the
+     * component will not be able to receive styles from the Studio.
+     */
+    classNameProp?: string;
+    /**
+     * The prop that receives and forwards a React `ref`. Plasmic only uses `ref`
+     * to interact with components, so it's not used in the generated code.
+     * Optional: If not provided, the usual `ref` is used.
+     */
+    refProp?: string;
+    /**
+     * Default styles to start with when instantiating the component in Plasmic.
+     */
+    defaultStyles?: CSSProperties;
+    /**
+     * Component templates to start with on Plasmic.
+     */
+    templates?: ComponentTemplates<P>;
+    /**
+     * Registered name of parent component, used for grouping related components.
+     */
+    parentComponentName?: string;
+    /**
+     * Whether the component can be used as an attachment to an element.
+     */
+    isAttachment?: boolean;
+    /**
+     * Whether the component provides data to its slots using DataProvider.
+     */
+    providesData?: boolean;
+    /**
+     * If specified, then Figma components with the specified names will be mapped
+     * to this component when you paste Figma content into Plasmic
+     */
+    figmaMappings?: {
+        figmaComponentName: string;
+    }[];
+    /**
+     * If true, when an instance of this component is added, the element
+     * will always be named by the name of this component.
+     */
+    alwaysAutoName?: boolean;
+    refActions?: Record<string, RefActionRegistration<P>>;
+}
+interface FunctionParam<P> {
+    name: string;
+    displayName?: string;
+    type: PropType$1<P>;
+}
+interface RefActionRegistration<P> {
+    displayName?: string;
+    description?: string;
+    argTypes: FunctionParam<P>[];
+}
+interface ComponentRegistration {
+    component: React.ComponentType<any>;
+    meta: CodeComponentMeta<any>;
+}
+declare global {
+    interface Window {
+        __PlasmicComponentRegistry: ComponentRegistration[];
+    }
+}
+
 interface CanvasComponentProps<Data = any> {
     /**
      * This prop is only provided within the canvas of Plasmic Studio.
@@ -10999,10 +11221,11 @@ interface CanvasComponentProps<Data = any> {
      */
     setControlContextData?: (data: Data) => void;
 }
-type InferDataType<P> = P extends CanvasComponentProps<infer Data> ? Data : any;
 type ControlExtras = {
     path: (string | number)[];
+    item?: any;
 };
+type InferDataType<P> = P extends CanvasComponentProps<infer Data> ? Data : any;
 /**
  * Context that we pass back to control functions.
  */
@@ -11055,31 +11278,56 @@ interface PropTypeBase<P> {
     disableDynamicValue?: boolean;
     /**
      * If set to true, the component will be remounted when the prop value is updated.
-     * (This behavior only appliees to canvas)
+     * (This behavior only applies to canvas)
      */
     forceRemount?: boolean;
 }
-type DefaultValueOrExpr<P, T> = {
-    defaultExpr?: undefined;
-    defaultExprHint?: undefined;
+interface Defaultable<P, T> {
+    /**
+     * Default value to set for this prop when the component is instantiated
+     */
     defaultValue?: T;
+    /**
+     * If no prop is given, the component uses a default; specify whaat
+     * that default is so the Plasmic user can see it in the studio UI
+     */
     defaultValueHint?: T | ContextDependentConfig<P, T | undefined>;
-} | {
-    defaultValue?: undefined;
-    defaultValueHint?: undefined;
+    /**
+     * Use a dynamic value expression as the default instead
+     */
     defaultExpr?: string;
     defaultExprHint?: string;
-};
-type StringTypeBase<P> = PropTypeBase<P> & DefaultValueOrExpr<P, string>;
-type StringType<P> = "string" | (({
+}
+interface Controllable {
+    /**
+     * If true, this is a prop that should only be used inside Plasmic
+     * Studio for rendering artboards; will not be actually used in
+     * generated code.
+     */
+    editOnly?: boolean;
+    /**
+     * If specified, the value used for this prop will instead be
+     * mapped to the uncontrolledProp when generating code. This is
+     * useful if, for example, in the artboard, you want to use `value`
+     * prop to control the component, but in generated code, you want to
+     * map it to `defaultValue`.
+     */
+    uncontrolledProp?: string;
+}
+interface PropTypeBaseDefault<P, T> extends PropTypeBase<P>, Defaultable<P, T>, Controllable {
+}
+interface PlainStringType<P> extends PropTypeBaseDefault<P, string> {
     type: "string";
     control?: "default" | "large";
-} | {
+}
+interface CodeStringType<P> extends PropTypeBaseDefault<P, string> {
     type: "code";
     lang: "css" | "html" | "javascript" | "json";
-} | {
+}
+interface RichTextType<P> extends PropTypeBaseDefault<P, string> {
     type: "richText";
-} | {
+}
+interface ColorType<P> extends PropTypeBaseDefault<P, string> {
     type: "color";
     /**
      * If specified, and the user picks a color token in the Studio, then
@@ -11091,7 +11339,8 @@ type StringType<P> = "string" | (({
      * unless you are using a React portal.
      */
     keepCssVar?: boolean;
-} | {
+}
+interface ClassType<P> extends PropTypeBase<P> {
     type: "class";
     /**
      * Additional css selectors that can change how this style should look.
@@ -11121,7 +11370,8 @@ type StringType<P> = "string" | (({
      * If specified, then only shows these style sections for styling this class
      */
     styleSections?: StyleSection[];
-} | {
+}
+interface ThemeResetClassType<P> extends PropTypeBase<P> {
     type: "themeResetClass";
     /**
      * Normally, theme reset class will only target Plasmic-generated tags
@@ -11130,7 +11380,8 @@ type StringType<P> = "string" | (({
      * from somewhere), then specify `true` here.
      */
     targetAllTags?: boolean;
-} | {
+}
+interface CardPickerType<P> extends PropTypeBaseDefault<P, string> {
     type: "cardPicker";
     modalTitle?: React.ReactNode | ContextDependentConfig<P, React.ReactNode>;
     options: {
@@ -11146,58 +11397,46 @@ type StringType<P> = "string" | (({
     }[]>;
     showInput?: boolean | ContextDependentConfig<P, boolean>;
     onSearch?: ContextDependentConfig<P, ((value: string) => void) | undefined>;
-}) & StringTypeBase<P>);
-type BooleanType<P> = "boolean" | ({
+}
+type RichStringType<P> = PlainStringType<P> | CodeStringType<P> | RichTextType<P> | ColorType<P> | ClassType<P> | ThemeResetClassType<P> | CardPickerType<P>;
+type StringType<P> = "string" | RichStringType<P>;
+interface RichBooleanType<P> extends PropTypeBaseDefault<P, boolean> {
     type: "boolean";
-} & DefaultValueOrExpr<P, boolean> & PropTypeBase<P>);
+}
+type BooleanType<P> = "boolean" | RichBooleanType<P>;
 type GraphQLValue = {
     query: string;
     variables?: Record<string, any>;
 };
-type GraphQLType<P> = {
+interface GraphQLType<P> extends PropTypeBaseDefault<P, GraphQLValue> {
     type: "code";
     lang: "graphql";
     endpoint: string | ContextDependentConfig<P, string>;
     method?: string | ContextDependentConfig<P, string>;
     headers?: object | ContextDependentConfig<P, object>;
-} & DefaultValueOrExpr<P, GraphQLValue> & PropTypeBase<P>;
-type NumberTypeBase<P> = PropTypeBase<P> & DefaultValueOrExpr<P, number> & {
+}
+interface NumberTypeBase<P> extends PropTypeBaseDefault<P, number> {
     type: "number";
-};
-type NumberType<P> = "number" | (({
-    control?: "default";
     min?: number | ContextDependentConfig<P, number>;
     max?: number | ContextDependentConfig<P, number>;
-} | {
+}
+interface PlainNumberType<P> extends NumberTypeBase<P> {
+    control?: "default";
+}
+interface SliderNumberType<P> extends NumberTypeBase<P> {
     control: "slider";
-    min: number | ContextDependentConfig<P, number>;
-    max: number | ContextDependentConfig<P, number>;
     step?: number | ContextDependentConfig<P, number>;
-}) & NumberTypeBase<P>);
-/**
- * Expects defaultValue to be a JSON-compatible value
- */
-type JSONLikeType<P> = "object" | ({
+}
+type RichNumberType<P> = PlainNumberType<P> | SliderNumberType<P>;
+type NumberType<P> = "number" | RichNumberType<P>;
+interface ObjectType<P> extends PropTypeBaseDefault<P, Record<string, any>> {
     type: "object";
-    fields?: {
-        [p: string]: PropType$1<P>;
-    };
-    /**
-     * Optional function that generates a name for this item in the array
-     */
+    fields?: Record<string, PropType$1<P>>;
     nameFunc?: (item: any, ...args: ControlContext<P>) => string | undefined;
-} & DefaultValueOrExpr<P, any> & PropTypeBase<P>) | ({
+}
+interface ArrayType<P> extends PropTypeBaseDefault<P, any[]> {
     type: "array";
-    itemType?: {
-        type: "object";
-        fields: {
-            [p: string]: PropType$1<P>;
-        };
-        /**
-         * Optional function that generates a name for this item in the array
-         */
-        nameFunc?: (item: any, ...args: ControlContext<P>) => string | undefined;
-    };
+    itemType?: ObjectType<P>;
     /**
      * Optional function that determines whether the user can delete a given item.
      */
@@ -11223,30 +11462,33 @@ type JSONLikeType<P> = "object" | ({
      *   ones. Now we would want a different minimal value, containing 6 items.
      */
     unstable__minimalValue?: ContextDependentConfig<P, any>;
-} & DefaultValueOrExpr<P, any[]> & PropTypeBase<P>) | ({
+}
+type JSONLikeType<P> = "object" | ObjectType<P> | ArrayType<P>;
+interface DataSourceType<P> extends PropTypeBase<P> {
     type: "dataSource";
     dataSource: "airtable" | "cms";
-} & PropTypeBase<P>);
+}
 type DataPickerValueType = string | number | (string | number)[];
-type DataPickerType<P> = ({
+interface DataPickerType<P> extends PropTypeBaseDefault<P, DataPickerValueType> {
     type: "dataSelector";
     data: Record<string, any> | ContextDependentConfig<P, Record<string, any>>;
     alwaysShowValuePathAsLabel?: boolean;
-} & DefaultValueOrExpr<P, DataPickerValueType> & PropTypeBase<P>) | ({
+}
+interface ExprEditorType<P> extends PropTypeBaseDefault<P, DataPickerValueType> {
     type: "exprEditor";
     data: Record<string, any> | ContextDependentConfig<P, Record<string, any>>;
-} & DefaultValueOrExpr<P, DataPickerValueType> & PropTypeBase<P>);
-type FormValidationRulesType<P> = {
+}
+interface FormValidationRulesType<P> extends PropTypeBaseDefault<P, any> {
     type: "formValidationRules";
-} & DefaultValueOrExpr<P, any> & PropTypeBase<P>;
-type EventHandlerType<P> = {
+}
+interface EventHandlerType<P> extends PropTypeBase<P> {
     type: "eventHandler";
     argTypes: {
         name: string;
         type: PropType$1<any>;
     }[];
-} & DefaultValueOrExpr<P, (...args: any) => any> & PropTypeBase<P>;
-interface ChoiceTypeBase<P> extends PropTypeBase<P> {
+}
+interface ChoiceTypeBase<P, T> extends PropTypeBaseDefault<P, T> {
     type: "choice";
     options: string[] | {
         label: string;
@@ -11259,56 +11501,17 @@ interface ChoiceTypeBase<P> extends PropTypeBase<P> {
     filterOption?: boolean;
     onSearch?: ContextDependentConfig<P, ((value: string) => void) | undefined>;
 }
-type ChoiceType<P> = (({
+interface SingleChoiceType<P> extends ChoiceTypeBase<P, string | number | boolean> {
     multiSelect?: false;
-} & DefaultValueOrExpr<P, string | number | boolean>) | ({
+}
+interface MultiChoiceType<P> extends ChoiceTypeBase<P, (string | number | boolean)[]> {
     multiSelect: true;
-} & DefaultValueOrExpr<P, (string | number | boolean)[]>) | ({
-    multiSelect: ContextDependentConfig<P, boolean>;
-} & DefaultValueOrExpr<P, string | number | boolean | (string | number | boolean)[]>)) & ChoiceTypeBase<P>;
-interface ModalProps {
-    show?: boolean;
-    children?: React.ReactNode;
-    onClose: () => void;
-    style?: CSSProperties;
 }
-interface CustomControlProps<P> {
-    componentProps: P;
-    /**
-     * `contextData` can be `null` if the prop controls are rendering before
-     * the component instance itself (it will re-render once the component
-     * calls `setControlContextData`)
-     */
-    contextData: InferDataType<P> | null;
-    value: any;
-    /**
-     * Sets the value to be passed to the prop. Expects a JSON-compatible value.
-     */
-    updateValue: (newVal: any) => void;
-    /**
-     * Full screen modal component
-     */
-    FullscreenModal: React.ComponentType<ModalProps>;
-    /**
-     * Modal component for the side pane
-     */
-    SideModal: React.ComponentType<ModalProps>;
-    /**
-     * The document that the component will be rendered into; instead of using
-     * `document` directly (for, say, `document.querySelector()` etc.), you
-     * should use this instead.
-     */
-    studioDocument: typeof document;
+interface CustomChoiceType<P> extends ChoiceTypeBase<P, string | number | boolean | (string | number | boolean)[]> {
+    multiSelect: ContextDependentConfig<P, boolean>;
 }
-type CustomControl<P> = React.ComponentType<CustomControlProps<P>>;
-/**
- * Expects defaultValue to be a JSON-compatible value
- */
-type CustomType<P> = CustomControl<P> | ({
-    type: "custom";
-    control: CustomControl<P>;
-} & PropTypeBase<P> & DefaultValueOrExpr<P, any>);
-type SlotType<P> = "slot" | ({
+type ChoiceType<P> = SingleChoiceType<P> | MultiChoiceType<P> | CustomChoiceType<P>;
+interface RichSlotType<P> {
     type: "slot";
     /**
      * The unique names of all code components that can be placed in the slot
@@ -11342,24 +11545,20 @@ type SlotType<P> = "slot" | ({
      * When inserting top-level "page sections", should this slot be the default target?
      */
     unstable__isMainContentSlot?: boolean;
-} & Omit<DefaultValueOrExpr<P, PlasmicElement | PlasmicElement[]>, "defaultValueHint" | "defaultExpr" | "defaultExprHint">);
-type ImageUrlType<P> = "imageUrl" | ({
+    defaultValue?: PlasmicElement | PlasmicElement[];
+}
+type SlotType<P> = "slot" | RichSlotType<P>;
+interface RichImageUrlType<P> extends PropTypeBaseDefault<P, string> {
     type: "imageUrl";
-} & DefaultValueOrExpr<P, string> & PropTypeBase<P>);
-type PrimitiveType<P = any> = Extract<StringType<P> | BooleanType<P> | NumberType<P> | JSONLikeType<P>, string>;
-type ControlTypeBase = {
-    editOnly?: false;
-} | {
-    editOnly: true;
-    /**
-     * The prop where the values should be mapped to
-     */
-    uncontrolledProp?: string;
-};
-type SupportControlled<T> = Extract<T, string | CustomControl<any>> | (Exclude<T, string | CustomControl<any>> & ControlTypeBase);
-type PropType$1<P> = SupportControlled<StringType<P> | BooleanType<P> | NumberType<P> | JSONLikeType<P> | ChoiceType<P> | ImageUrlType<P> | CustomType<P> | GraphQLType<P> | DataPickerType<P> | FormValidationRulesType<P> | EventHandlerType<P>> | SlotType<P>;
-type RestrictPropType$1<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$1<P>;
-interface ActionProps<P> {
+}
+type ImageUrlType<P> = "imageUrl" | RichImageUrlType<P>;
+interface ModalProps {
+    show?: boolean;
+    children?: React.ReactNode;
+    onClose: () => void;
+    style?: CSSProperties;
+}
+interface CustomControlProps<P> {
     componentProps: P;
     /**
      * `contextData` can be `null` if the prop controls are rendering before
@@ -11367,219 +11566,38 @@ interface ActionProps<P> {
      * calls `setControlContextData`)
      */
     contextData: InferDataType<P> | null;
-    studioOps: {
-        showModal: (modalProps: Omit<ModalProps, "onClose"> & {
-            onClose?: () => void;
-        }) => void;
-        refreshQueryData: () => void;
-        appendToSlot: (element: PlasmicElement, slotName: string) => void;
-        removeFromSlotAt: (pos: number, slotName: string) => void;
-        updateProps: (newValues: any) => void;
-    };
-    /**
-     * The document that the component will be rendered into; instead of using
-     * `document` directly (for, say, `document.querySelector()` etc.), you
-     * should use this instead.
-     */
-    studioDocument: typeof document;
-}
-type Action<P> = {
-    type: "button-action";
-    label: string;
-    onClick: (props: ActionProps<P>) => void;
-    hidden?: ContextDependentConfig<P, boolean>;
-} | {
-    type: "custom-action";
-    control: React.ComponentType<ActionProps<P>>;
-    hidden?: ContextDependentConfig<P, boolean>;
-};
-type DistributedKeyOf$1<T> = T extends any ? keyof T : never;
-interface ComponentTemplate<P> extends Omit<CodeComponentElement<P>, "type" | "name"> {
-    /**
-     * A preview picture for the template.
-     */
-    previewImg?: string;
-}
-interface ComponentTemplates<P> {
-    [name: string]: ComponentTemplate<P>;
-}
-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;
-});
-interface StateHelpers<P, T> {
-    initFunc?: ($props: P) => T;
-    onChangeArgsToValue?: (...args: any) => T;
-}
-type ComponentHelpers<P> = {
-    states: Record<string, StateHelpers<P, any>>;
-};
-type ExternalComponentHelpers<P> = {
-    helpers: ComponentHelpers<P>;
-    importPath: string;
-} & ({
-    importName: string;
-} | {
-    isDefaultExport: true;
-});
-type StyleSection = "visibility" | "typography" | "sizing" | "spacing" | "background" | "transform" | "transitions" | "layout" | "overflow" | "border" | "shadows" | "effects";
-interface CodeComponentMeta<P> {
-    /**
-     * Any unique string name used to identify that component. Each component
-     * should be registered with a different `meta.name`, even if they have the
-     * same name in the code.
-     */
-    name: string;
-    /**
-     * The name to be displayed for the component in Studio. Optional: if not
-     * specified, `meta.name` is used.
-     */
-    displayName?: string;
-    /**
-     * The description of the component to be shown in Studio.
-     */
-    description?: string;
-    /**
-     * The javascript name to be used when generating code. Optional: if not
-     * provided, `meta.name` is used.
-     */
-    importName?: string;
-    /**
-     * An object describing the component properties to be used in Studio.
-     * For each `prop`, there should be an entry `meta.props[prop]` describing
-     * its type.
-     */
-    props: {
-        [prop in DistributedKeyOf$1<P>]?: RestrictPropType$1<P[prop], P>;
-    } & {
-        [prop: string]: PropType$1<P>;
-    };
-    /**
-     * 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
-     */
-    componentHelpers?: ExternalComponentHelpers<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 all styles.
-     * Set to `false` if this component cannot be styled (for example, if it doesn't
-     * render any DOM elements).
-     */
-    styleSections?: StyleSection[] | boolean;
-    /**
-     * Whether the element can be repeated in Studio. If unset, defaults to true.
-     */
-    isRepeatable?: boolean;
-    /**
-     * The path to be used when importing the component in the generated code.
-     * It can be the name of the package that contains the component, or the path
-     * to the file in the project (relative to the root directory).
-     */
-    importPath: string;
-    /**
-     *  Whether the component is the default export from that path. Optional: if
-     * not specified, it's considered `false`.
-     */
-    isDefaultExport?: boolean;
-    /**
-     * The prop that expects the CSS classes with styles to be applied to the
-     * component. Optional: if not specified, Plasmic will expect it to be
-     * `className`. Notice that if the component does not accept CSS classes, the
-     * component will not be able to receive styles from the Studio.
-     */
-    classNameProp?: string;
-    /**
-     * The prop that receives and forwards a React `ref`. Plasmic only uses `ref`
-     * to interact with components, so it's not used in the generated code.
-     * Optional: If not provided, the usual `ref` is used.
-     */
-    refProp?: string;
-    /**
-     * Default styles to start with when instantiating the component in Plasmic.
-     */
-    defaultStyles?: CSSProperties;
-    /**
-     * Component templates to start with on Plasmic.
-     */
-    templates?: ComponentTemplates<P>;
-    /**
-     * Registered name of parent component, used for grouping related components.
-     */
-    parentComponentName?: string;
+    value: any;
     /**
-     * Whether the component can be used as an attachment to an element.
+     * Sets the value to be passed to the prop. Expects a JSON-compatible value.
      */
-    isAttachment?: boolean;
+    updateValue: (newVal: any) => void;
     /**
-     * Whether the component provides data to its slots using DataProvider.
+     * Full screen modal component
      */
-    providesData?: boolean;
+    FullscreenModal: React.ComponentType<ModalProps>;
     /**
-     * If specified, then Figma components with the specified names will be mapped
-     * to this component when you paste Figma content into Plasmic
+     * Modal component for the side pane
      */
-    figmaMappings?: {
-        figmaComponentName: string;
-    }[];
+    SideModal: React.ComponentType<ModalProps>;
     /**
-     * If true, when an instance of this component is added, the element
-     * will always be named by the name of this component.
+     * The document that the component will be rendered into; instead of using
+     * `document` directly (for, say, `document.querySelector()` etc.), you
+     * should use this instead.
      */
-    alwaysAutoName?: boolean;
-    refActions?: Record<string, RefActionRegistration<P>>;
-}
-interface FunctionParam<P> {
-    name: string;
-    displayName?: string;
-    type: PropType$1<P>;
-}
-interface RefActionRegistration<P> {
-    displayName?: string;
-    description?: string;
-    argTypes: FunctionParam<P>[];
-}
-interface ComponentRegistration {
-    component: React.ComponentType<any>;
-    meta: CodeComponentMeta<any>;
+    studioDocument: typeof document;
 }
-declare global {
-    interface Window {
-        __PlasmicComponentRegistry: ComponentRegistration[];
-    }
+type CustomControl<P> = React.ComponentType<CustomControlProps<P>>;
+interface RichCustomType<P> extends PropTypeBaseDefault<P, any> {
+    type: "custom";
+    control: CustomControl<P>;
 }
+type CustomType<P> = RichCustomType<P> | CustomControl<P>;
+type PrimitiveType<P = any> = Extract<StringType<P> | BooleanType<P> | NumberType<P> | JSONLikeType<P>, string>;
+type PropType$1<P> = StringType<P> | BooleanType<P> | GraphQLType<P> | NumberType<P> | JSONLikeType<P> | DataSourceType<P> | DataPickerType<P> | ExprEditorType<P> | FormValidationRulesType<P> | EventHandlerType<P> | ChoiceType<P> | CustomType<P> | ImageUrlType<P> | SlotType<P>;
+type StringCompatType<P> = StringType<P> | ChoiceType<P> | JSONLikeType<P> | ImageUrlType<P> | CustomType<P> | DataPickerType<P>;
+type BoolCompatType<P> = BooleanType<P> | CustomType<P> | DataPickerType<P>;
+type NumberCompatType<P> = NumberType<P> | CustomType<P> | DataPickerType<P>;
+type RestrictPropType$1<T, P> = T extends string ? StringCompatType<P> : T extends boolean ? BoolCompatType<P> : T extends number ? NumberCompatType<P> : PropType$1<P>;
 
 type Fetcher = (...args: any[]) => Promise<any>;
 interface FetcherMeta {
@@ -11620,8 +11638,8 @@ declare global {
     }
 }
 
-type PropType<P> = SupportControlled<StringType<P> | BooleanType<P> | NumberType<P> | JSONLikeType<P> | ChoiceType<P> | CustomType<P>>;
-type RestrictPropType<T, P> = T extends string ? SupportControlled<StringType<P> | ChoiceType<P> | JSONLikeType<P> | CustomType<P>> : T extends boolean ? SupportControlled<BooleanType<P> | JSONLikeType<P> | CustomType<P>> : T extends number ? SupportControlled<NumberType<P> | JSONLikeType<P> | CustomType<P>> : PropType<P>;
+type PropType<P> = StringType<P> | BooleanType<P> | NumberType<P> | JSONLikeType<P> | ChoiceType<P> | CustomType<P> | DataSourceType<P>;
+type RestrictPropType<T, P> = T extends string ? StringType<P> | ChoiceType<P> | JSONLikeType<P> | CustomType<P> : T extends boolean ? BooleanType<P> | JSONLikeType<P> | CustomType<P> : T extends number ? NumberType<P> | JSONLikeType<P> | CustomType<P> : PropType<P>;
 type DistributedKeyOf<T> = T extends any ? keyof T : never;
 interface GlobalContextMeta<P> {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicapp/react-web",
-  "version": "0.2.212",
+  "version": "0.2.216",
   "description": "plasmic library for rendering in the presentational style",
   "main": "dist/index.cjs.js",
   "types": "dist/index.d.ts",
@@ -75,9 +75,9 @@
   },
   "prettier": {},
   "dependencies": {
-    "@plasmicapp/data-sources": "0.1.78",
+    "@plasmicapp/data-sources": "0.1.82",
     "@plasmicapp/data-sources-context": "0.1.11",
-    "@plasmicapp/host": "1.0.136",
+    "@plasmicapp/host": "1.0.140",
     "@plasmicapp/query": "0.1.64",
     "@react-aria/checkbox": "^3.5.0",
     "@react-aria/focus": "^3.7.0",
@@ -143,5 +143,5 @@
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
-  "gitHead": "9f7e1bff70ae5f945027b4718d85d2a17f89501e"
+  "gitHead": "a9f2eda1e2d7d4aa9bb169cee7bc1fb00061a941"
 }