@plasmicapp/react-web 0.2.220 → 0.2.222

package/dist/all.d.ts

@@ -12023,7 +12023,9 @@ interface TransProps {
     transKey?: string;
     children?: React__default.ReactNode;
 }
-declare function genTranslatableString(elt: React__default.ReactNode): {
+declare function genTranslatableString(elt: React__default.ReactNode, opts?: {
+    tagPrefix?: string;
+}): {
     str: string;
     components: {
         [key: string]: React__default.ReactElement<any, string | React__default.JSXElementConstructor<any>>;
@@ -12037,6 +12039,8 @@ interface PlasmicRootProviderProps extends PlasmicDataSourceContextValue {
     children?: React$1.ReactNode;
     translator?: PlasmicTranslator;
     Head?: React$1.ComponentType<any>;
+    disableLoadingBoundary?: boolean;
+    suspenseFallback?: React$1.ReactNode;
 }
 declare function PlasmicRootProvider(props: PlasmicRootProviderProps): JSX.Element;
 declare const useIsSSR: typeof useIsSSR$1;
@@ -12433,7 +12437,7 @@ type PlasmicClassVariants<C extends AnyPlasmicClass> = C extends PlasmicClass<in
 type PlasmicClassArgs<C extends AnyPlasmicClass> = C extends PlasmicClass<any, infer A, any> ? A : unknown;
 type PlasmicClassOverrides<C extends AnyPlasmicClass> = C extends PlasmicClass<any, any, infer O> ? O : unknown;
 
-interface CommonProps {
+interface PlumeCommonProps {
     showStartIcon?: boolean;
     showEndIcon?: boolean;
     startIcon?: React$1.ReactNode;
@@ -12442,15 +12446,22 @@ interface CommonProps {
     isDisabled?: boolean;
 }
 interface HtmlButtonProps extends Omit<React$1.ComponentProps<"button">, "ref" | "disabled"> {
-    submitsForm?: boolean;
 }
 interface HtmlAnchorProps extends Omit<React$1.ComponentProps<"a">, "ref" | "href" | "target"> {
+}
+interface PlumeActualButtonProps {
+    submitsForm?: boolean;
+}
+interface PlumeAnchorProps {
     link?: string;
     target?: React$1.ComponentProps<"a">["target"] | boolean;
 }
-type BaseButtonProps = CommonProps & HtmlButtonProps & HtmlAnchorProps;
-type HtmlAnchorOnlyProps = Exclude<keyof HtmlAnchorProps, keyof HtmlButtonProps>;
-type HtmlButtonOnlyProps = Exclude<keyof HtmlButtonProps, keyof HtmlAnchorProps>;
+type PlumeButtonProps = PlumeCommonProps & PlumeActualButtonProps & PlumeAnchorProps;
+type BaseButtonProps = PlumeButtonProps & HtmlButtonProps & HtmlAnchorProps;
+type AllButtonProps = PlumeCommonProps & PlumeActualButtonProps & HtmlButtonProps;
+type AllAnchorProps = PlumeCommonProps & PlumeAnchorProps & HtmlAnchorProps;
+type HtmlAnchorOnlyProps = Exclude<keyof AllAnchorProps, keyof AllButtonProps>;
+type HtmlButtonOnlyProps = Exclude<keyof AllButtonProps, keyof AllAnchorProps>;
 type ButtonRef = React$1.Ref<HTMLButtonElement | HTMLAnchorElement>;
 interface ButtonConfig<C extends AnyPlasmicClass> {
     showStartIconVariant: VariantDef<PlasmicClassVariants<C>>;
@@ -12461,7 +12472,7 @@ interface ButtonConfig<C extends AnyPlasmicClass> {
     contentSlot: keyof PlasmicClassArgs<C>;
     root: keyof PlasmicClassOverrides<C>;
 }
-declare function useButton<P extends BaseButtonProps, C extends AnyPlasmicClass>(plasmicClass: C, props: P, config: ButtonConfig<C>, ref?: ButtonRef): {
+declare function useButton<P extends PlumeButtonProps, C extends AnyPlasmicClass>(plasmicClass: C, props: P, config: ButtonConfig<C>, ref?: ButtonRef): {
     plasmicProps: {
         variants: PlasmicClassVariants<C>;
         args: PlasmicClassArgs<C>;
@@ -13305,7 +13316,9 @@ declare function useSwitch<P extends SwitchProps, C extends AnyPlasmicClass>(pla
     state: SwitchState;
 };
 
-interface BaseTextInputProps extends Omit<React$1.ComponentProps<"input">, "type" | "disabled"> {
+interface BaseTextInputProps extends Omit<React$1.ComponentProps<"input">, "type" | "disabled">, PlumeTextInputProps {
+}
+interface PlumeTextInputProps {
     showStartIcon?: boolean;
     showEndIcon?: boolean;
     startIcon?: React$1.ReactNode;
@@ -13314,6 +13327,8 @@ interface BaseTextInputProps extends Omit<React$1.ComponentProps<"input">, "type
     type?: "text" | "password" | "email" | "url" | string;
     inputClassName?: string;
     inputStyle?: React$1.CSSProperties;
+    className?: string;
+    style?: React$1.CSSProperties;
 }
 interface TextInputRefValue {
     focus: () => void;
@@ -13331,7 +13346,7 @@ interface TextInputConfig<C extends AnyPlasmicClass> {
     root: keyof PlasmicClassOverrides<C>;
     input: keyof PlasmicClassOverrides<C>;
 }
-declare function useTextInput<P extends BaseTextInputProps, C extends AnyPlasmicClass>(plasmicClass: C, props: P, config: TextInputConfig<C>, ref?: TextInputRef): {
+declare function useTextInput<P extends PlumeTextInputProps, C extends AnyPlasmicClass>(plasmicClass: C, props: P, config: TextInputConfig<C>, ref?: TextInputRef): {
     plasmicProps: {
         variants: PlasmicClassVariants<C>;
         args: PlasmicClassArgs<C>;
@@ -13384,4 +13399,4 @@ interface TriggeredOverlayContextValue {
 }
 declare const TriggeredOverlayContext: React$1.Context<TriggeredOverlayContextValue | undefined>;
 
-export { $State, $StateSpec, BaseButtonProps, BaseMenuButtonProps, BaseMenuGroupProps, BaseMenuItemProps, BaseMenuProps, BaseSelectOptionGroupProps, BaseSelectOptionProps, BaseSelectProps, BaseTextInputProps, BaseTriggeredOverlayProps, ButtonRef, CheckboxProps, CheckboxRef, CheckboxRefValue, DropdownMenu, Flex, HTMLElementRefOf, HtmlAnchorOnlyProps, HtmlButtonOnlyProps, MenuButtonRef, MenuButtonRefValue, MenuRef, MenuRefValue, MultiChoiceArg, PlasmicDataSourceContextProvider, PlasmicHead, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicPageGuard, PlasmicRootProvider, PlasmicSlot, SelectContext, SelectOptionRef, SelectRef, SelectRefValue, SingleBooleanChoiceArg, SingleChoiceArg, Stack, StrictProps, SwitchProps, SwitchRef, SwitchRefValue, TextInputRef, TextInputRefValue, Trans, TriggeredOverlayConfig, TriggeredOverlayContext, TriggeredOverlayRef, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, genTranslatableString, generateStateOnChangeProp, generateStateOnChangePropForCodeComponents, generateStateValueProp, dlv as get, getCurrentInitialValue, getDataProps, getStateCellsInPlasmicProxy, getStateSpecInPlasmicProxy, hasVariant, initializeCodeComponentStates, initializePlasmicStates, is$StateProxy, isPlasmicStateProxy, makeFragment, mergeVariantsWithStates, omit, pick, plasmicHeadMeta, renderPlasmicSlot, resetToInitialValue, set, setPlumeStrictMode, useButton, useCheckbox, useCurrentUser, useDollarState, useIsSSR, useMenu, useMenuButton, useMenuGroup, useMenuItem, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, withPlasmicPageGuard, wrapWithClassName };
+export { $State, $StateSpec, BaseButtonProps, BaseMenuButtonProps, BaseMenuGroupProps, BaseMenuItemProps, BaseMenuProps, BaseSelectOptionGroupProps, BaseSelectOptionProps, BaseSelectProps, BaseTextInputProps, BaseTriggeredOverlayProps, ButtonRef, CheckboxProps, CheckboxRef, CheckboxRefValue, DropdownMenu, Flex, HTMLElementRefOf, HtmlAnchorOnlyProps, HtmlButtonOnlyProps, MenuButtonRef, MenuButtonRefValue, MenuRef, MenuRefValue, MultiChoiceArg, PlasmicDataSourceContextProvider, PlasmicHead, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicPageGuard, PlasmicRootProvider, PlasmicSlot, PlasmicTranslator, PlumeButtonProps, PlumeTextInputProps, SelectContext, SelectOptionRef, SelectRef, SelectRefValue, SingleBooleanChoiceArg, SingleChoiceArg, Stack, StrictProps, SwitchProps, SwitchRef, SwitchRefValue, TextInputRef, TextInputRefValue, Trans, TriggeredOverlayConfig, TriggeredOverlayContext, TriggeredOverlayRef, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, genTranslatableString, generateStateOnChangeProp, generateStateOnChangePropForCodeComponents, generateStateValueProp, dlv as get, getCurrentInitialValue, getDataProps, getStateCellsInPlasmicProxy, getStateSpecInPlasmicProxy, hasVariant, initializeCodeComponentStates, initializePlasmicStates, is$StateProxy, isPlasmicStateProxy, makeFragment, mergeVariantsWithStates, omit, pick, plasmicHeadMeta, renderPlasmicSlot, resetToInitialValue, set, setPlumeStrictMode, useButton, useCheckbox, useCurrentUser, useDollarState, useIsSSR, useMenu, useMenuButton, useMenuGroup, useMenuItem, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, withPlasmicPageGuard, wrapWithClassName };

package/dist/index-common.d.ts

@@ -12,7 +12,7 @@ export { PlasmicSlot, renderPlasmicSlot } from "./render/PlasmicSlot";
 export { createUseScreenVariants } from "./render/screen-variants";
 export { PlasmicDataSourceContextProvider, PlasmicRootProvider, useCurrentUser, useIsSSR, } from "./render/ssr";
 export { Stack } from "./render/Stack";
-export { genTranslatableString, Trans } from "./render/translation";
+export { genTranslatableString, Trans, PlasmicTranslator, } from "./render/translation";
 export { useTrigger } from "./render/triggers";
 export * from "./states";
 export declare const classNames: typeof _classNames;

package/dist/index.cjs.js

@@ -9,6 +9,7 @@ var React = require('react');
 var get = require('dlv');
 var ReactDOM = require('react-dom');
 var ssr = require('@react-aria/ssr');
+var host = require('@plasmicapp/host');
 var focus = require('@react-aria/focus');
 var valtio = require('valtio');
 var clone = require('clone');
@@ -22,7 +23,6 @@ var collections = require('@react-stately/collections');
 var separator = require('@react-aria/separator');
 var menu$1 = require('@react-stately/menu');
 var interactions = require('@react-aria/interactions');
-var host = require('@plasmicapp/host');
 var listbox = require('@react-aria/listbox');
 var select$1 = require('@react-aria/select');
 var select = require('@react-stately/select');
@@ -1426,10 +1426,11 @@ var PlasmicTranslatorContext = React__default['default'].createContext(undefined
 function isIterable(val) {
     return val != null && typeof val[Symbol.iterator] === "function";
 }
-function genTranslatableString(elt) {
+function genTranslatableString(elt, opts) {
     var components = {};
     var componentsCount = 0;
     var getText = function (node) {
+        var _a;
         if (!node) {
             return "";
         }
@@ -1459,7 +1460,8 @@ function genTranslatableString(elt) {
         if (React__default['default'].isValidElement(node) && node.type === React__default['default'].Fragment) {
             return contents;
         }
-        var componentId = componentsCount + 1;
+        var prefix = (_a = opts === null || opts === void 0 ? void 0 : opts.tagPrefix) !== null && _a !== void 0 ? _a : "";
+        var componentId = "".concat(prefix).concat(componentsCount + 1);
         componentsCount++;
         components[componentId] = React__default['default'].isValidElement(node)
             ? React__default['default'].cloneElement(node, {
@@ -1634,7 +1636,7 @@ function createUseScreenVariants(isMulti, screenQueries) {
 
 var PlasmicRootContext = React__namespace.createContext(undefined);
 function PlasmicRootProvider(props) {
-    var platform = props.platform, children = props.children, userAuthToken = props.userAuthToken, isUserLoading = props.isUserLoading, authRedirectUri = props.authRedirectUri, user = props.user;
+    var platform = props.platform, children = props.children, userAuthToken = props.userAuthToken, isUserLoading = props.isUserLoading, authRedirectUri = props.authRedirectUri, user = props.user, disableLoadingBoundary = props.disableLoadingBoundary, suspenseFallback = props.suspenseFallback;
     var context = React__namespace.useMemo(function () { return ({
         platform: platform,
     }); }, [platform]);
@@ -1644,11 +1646,14 @@ function PlasmicRootProvider(props) {
         isUserLoading: isUserLoading,
         authRedirectUri: authRedirectUri,
     }); }, [userAuthToken, isUserLoading, user, authRedirectUri]);
-    return (React__namespace.createElement(PlasmicRootContext.Provider, { value: context },
-        React__namespace.createElement(ssr.SSRProvider, null,
-            React__namespace.createElement(dataSourcesContext.PlasmicDataSourceContextProvider, { value: dataSourceContextValue },
-                React__namespace.createElement(PlasmicTranslatorContext.Provider, { value: props.translator },
-                    React__namespace.createElement(PlasmicHeadContext.Provider, { value: props.Head }, children))))));
+    var reactMajorVersion = +React__namespace.version.split(".")[0];
+    return (React__namespace.createElement(MaybeWrap, { cond: !disableLoadingBoundary && reactMajorVersion >= 18, wrapper: function (children) { return (React__namespace.createElement(host.DataProvider, { name: "plasmicInternalEnableLoadingBoundary", hidden: true, data: true },
+            React__namespace.createElement(React__namespace.Suspense, { fallback: suspenseFallback !== null && suspenseFallback !== void 0 ? suspenseFallback : "Loading..." }, children))); } },
+        React__namespace.createElement(PlasmicRootContext.Provider, { value: context },
+            React__namespace.createElement(ssr.SSRProvider, null,
+                React__namespace.createElement(dataSourcesContext.PlasmicDataSourceContextProvider, { value: dataSourceContextValue },
+                    React__namespace.createElement(PlasmicTranslatorContext.Provider, { value: props.translator },
+                        React__namespace.createElement(PlasmicHeadContext.Provider, { value: props.Head }, children)))))));
 }
 var useIsSSR = ssr.useIsSSR;
 function useHasPlasmicRoot() {
@@ -1666,6 +1671,9 @@ function useEnsureSSRProvider() {
     hasWarnedSSR = true;
     console.warn("Plasmic: To ensure your components work correctly with server-side rendering, please use PlasmicRootProvider at the root of your application.  See https://docs.plasmic.app/learn/ssr");
 }
+function MaybeWrap(props) {
+    return props.cond ? props.wrapper(props.children) : props.children;
+}
 
 function useFocused(opts) {
     var _a = focus.useFocusRing({