@plasmicapp/react-web 0.2.90 → 0.2.94

package/dist/all.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as React from 'react';
 import React__default, { FocusEvent, KeyboardEvent as KeyboardEvent$1, SyntheticEvent, ReactNode } from 'react';
 
@@ -163,7 +162,7 @@ interface PlasmicImgProps extends ImgTagProps {
 }
 declare const PlasmicImg: React__default.ForwardRefExoticComponent<PlasmicImgProps & React__default.RefAttributes<HTMLElement>>;
 
-declare function PlasmicLink(props: any): JSX.Element;
+declare const PlasmicLink: React__default.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React__default.RefAttributes<any>>;
 
 declare function PlasmicSlot<T extends keyof JSX.IntrinsicElements = "div">(props: React.ComponentProps<T> & {
     as?: T;
@@ -448,9 +447,27 @@ interface AriaSwitchBase extends SwitchBase, FocusableDOMProps, AriaLabelingProp
 }
 interface AriaSwitchProps extends SwitchProps$1, AriaSwitchBase {}
 
+declare type PlasmicTranslator = (str: string, opts?: {
+    components?: {
+        [key: string]: React__default.ReactElement;
+    };
+}) => React__default.ReactNode;
+interface TransProps {
+    children?: React__default.ReactNode;
+}
+declare function genTranslatableString(elt: React__default.ReactNode): {
+    str: string;
+    components: {
+        [key: string]: React__default.ReactElement<any, string | ((props: any) => React__default.ReactElement<any, any> | null) | (new (props: any) => React__default.Component<any, any, any>)>;
+    };
+    componentsCount: number;
+};
+declare function Trans({ children }: TransProps): React__default.ReactNode;
+
 interface PlasmicRootProviderProps {
     platform?: "nextjs" | "gatsby";
     children?: React.ReactNode;
+    translator?: PlasmicTranslator;
 }
 declare function PlasmicRootProvider(props: PlasmicRootProviderProps): JSX.Element;
 declare const useIsSSR: typeof useIsSSR$1;
@@ -1110,7 +1127,7 @@ interface BaseTextInputProps extends Omit<React.ComponentProps<"input">, "type"
     startIcon?: React.ReactNode;
     endIcon?: React.ReactNode;
     isDisabled?: boolean;
-    type?: "text" | "password" | "email" | "url";
+    type?: "text" | "password" | "email" | "url" | string;
     inputClassName?: string;
     inputStyle?: React.CSSProperties;
 }
@@ -1159,4 +1176,4 @@ declare function useTriggeredOverlay<P extends BaseTriggeredOverlayProps, C exte
     };
 };
 
-export { BaseButtonProps, BaseMenuButtonProps, BaseMenuGroupProps, BaseMenuItemProps, BaseMenuProps, BaseSelectOptionGroupProps, BaseSelectOptionProps, BaseSelectProps, BaseTextInputProps, BaseTriggeredOverlayProps, ButtonRef, CheckboxProps, CheckboxRef, CheckboxRefValue, DropdownMenu, Flex, HTMLElementRefOf, HtmlAnchorOnlyProps, HtmlButtonOnlyProps, MenuButtonRef, MenuButtonRefValue, MenuRef, MenuRefValue, MultiChoiceArg, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicRootProvider, PlasmicSlot, SelectOptionRef, SelectRef, SelectRefValue, SingleBooleanChoiceArg, SingleChoiceArg, Stack, StrictProps, SwitchProps, SwitchRef, SwitchRefValue, TextInputRef, TextInputRefValue, TriggeredOverlayConfig, TriggeredOverlayRef, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, getDataProps, hasVariant, makeFragment, omit, pick, renderPlasmicSlot, setPlumeStrictMode, useButton, useCheckbox, useIsSSR, useMenu, useMenuButton, useMenuGroup, useMenuItem, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, wrapWithClassName };
+export { BaseButtonProps, BaseMenuButtonProps, BaseMenuGroupProps, BaseMenuItemProps, BaseMenuProps, BaseSelectOptionGroupProps, BaseSelectOptionProps, BaseSelectProps, BaseTextInputProps, BaseTriggeredOverlayProps, ButtonRef, CheckboxProps, CheckboxRef, CheckboxRefValue, DropdownMenu, Flex, HTMLElementRefOf, HtmlAnchorOnlyProps, HtmlButtonOnlyProps, MenuButtonRef, MenuButtonRefValue, MenuRef, MenuRefValue, MultiChoiceArg, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicRootProvider, PlasmicSlot, SelectOptionRef, SelectRef, SelectRefValue, SingleBooleanChoiceArg, SingleChoiceArg, Stack, StrictProps, SwitchProps, SwitchRef, SwitchRefValue, TextInputRef, TextInputRefValue, Trans, TriggeredOverlayConfig, TriggeredOverlayRef, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, genTranslatableString, getDataProps, hasVariant, makeFragment, omit, pick, renderPlasmicSlot, setPlumeStrictMode, useButton, useCheckbox, useIsSSR, useMenu, useMenuButton, useMenuGroup, useMenuItem, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, wrapWithClassName };

package/dist/index-common.d.ts

@@ -11,3 +11,4 @@ export { createUseScreenVariants } from "./render/screen-variants";
 export { PlasmicRootProvider, useIsSSR } from "./render/ssr";
 export { Stack } from "./render/Stack";
 export { useTrigger } from "./render/triggers";
+export { Trans, genTranslatableString } from "./render/translation";

package/dist/plume/collection-utils.d.ts

@@ -137,7 +137,7 @@ export declare function useDerivedItemsFromChildren<T extends React.ReactElement
  * Given a Collection node, create the React element that we should use
  * to render it.
  */
-export declare function renderCollectionNode(node: Node<any>): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+export declare function renderCollectionNode(node: Node<any>): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;
 /**
  * Renders a item-like or section-like Plume component element into an
  * Item or a Section element.

package/dist/plume/menu-button/menu-trigger.d.ts

@@ -16,6 +16,6 @@ export declare function useMenuTrigger(opts: {
     menu: React.ReactElement<BaseMenuProps> | (() => React.ReactElement<BaseMenuProps>);
 }, state: MenuTriggerState): {
     triggerProps: React.HTMLAttributes<HTMLElement>;
-    makeMenu: () => React.ReactElement<BaseMenuProps, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | null;
+    makeMenu: () => React.ReactElement<BaseMenuProps, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | null;
     triggerContext: TriggeredOverlayContextValue;
 };

package/dist/plume/text-input/index.d.ts

@@ -6,7 +6,7 @@ export interface BaseTextInputProps extends Omit<React.ComponentProps<"input">,
     startIcon?: React.ReactNode;
     endIcon?: React.ReactNode;
     isDisabled?: boolean;
-    type?: "text" | "password" | "email" | "url";
+    type?: "text" | "password" | "email" | "url" | string;
     inputClassName?: string;
     inputStyle?: React.CSSProperties;
 }

package/dist/react-utils.d.ts

@@ -2,8 +2,8 @@ import React from "react";
 export declare const isBrowser: boolean;
 export declare const NONE: unique symbol;
 export declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
-export declare function createElementWithChildren(elementType: any, props: any, children: React.ReactNode): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.CElement<any, React.Component<any, any, any>>;
-export declare function ensureNotArray(children: React.ReactNode): {} | null | undefined;
+export declare function createElementWithChildren(elementType: any, props: any, children: React.ReactNode): React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | React.CElement<any, React.Component<any, any, any>>;
+export declare function ensureNotArray(children: React.ReactNode): any;
 /**
  * Flattens ReactNode into an array of ReactChild, but does NOT replace
  * missing keys with array index, as React.Children.toArray() does.

package/dist/react-web.cjs.development.js

@@ -1165,22 +1165,27 @@ var PLASMIC_IMAGE_LOADER = {
   }
 };
 
-function PlasmicLink(props) {
+var PlasmicLink = /*#__PURE__*/React__default.forwardRef(function PlasmicLink(props, ref) {
   // props.href is required for nextjs; if no props.href,
   // then we just render the default anchor element
   if (props.platform === "nextjs" && props.href) {
     var nextjsProps = ["href", "replace", "scroll", "shallow", "passHref", "prefetch", "locale"];
-    return React__default.createElement(props.component, pick.apply(void 0, [props].concat(nextjsProps)), React__default.createElement("a", Object.assign({}, omit.apply(void 0, [props, "component", "platform"].concat(nextjsProps)))));
+    return React__default.createElement(props.component, pick.apply(void 0, [props].concat(nextjsProps)), React__default.createElement("a", Object.assign({}, omit.apply(void 0, [props, "component", "platform"].concat(nextjsProps)), {
+      ref: ref
+    })));
   }
 
   if (props.platform === "gatsby" && isInternalHref(props.href)) {
     return React__default.createElement(props.component, _extends({}, omit(props, "component", "platform", "href"), {
-      to: props.href
+      to: props.href,
+      ref: ref
     }));
   }
 
-  return React__default.createElement("a", Object.assign({}, omit(props, "component", "platform")));
-}
+  return React__default.createElement("a", Object.assign({}, omit(props, "component", "platform"), {
+    ref: ref
+  }));
+});
 
 function isInternalHref(href) {
   return /^\/(?!\/)/.test(href);
@@ -1340,6 +1345,96 @@ function createUseScreenVariants(isMulti, screenQueries) {
   };
 }
 
+var PlasmicTranslatorContext = /*#__PURE__*/React__default.createContext(undefined);
+
+function isIterable(val) {
+  return val != null && typeof val[Symbol.iterator] === "function";
+}
+
+function genTranslatableString(elt) {
+  var components = {};
+  var componentsCount = 0;
+
+  var getText = function getText(node) {
+    if (!node) {
+      return "";
+    }
+
+    if (typeof node === "number" || typeof node === "boolean" || typeof node === "string") {
+      return node.toString();
+    }
+
+    if (typeof node !== "object") {
+      return "";
+    }
+
+    if (Array.isArray(node) || isIterable(node)) {
+      return Array.from(node).map(function (child) {
+        return getText(child);
+      }).filter(function (child) {
+        return !!child;
+      }).join("");
+    }
+
+    var nodeChildren = hasKey(node, "props") && hasKey(node.props, "children") && node.props.children || hasKey(node, "children") && node.children || [];
+    var contents = "" + React__default.Children.toArray(nodeChildren).map(function (child) {
+      return getText(child);
+    }).filter(function (child) {
+      return !!child;
+    }).join("");
+
+    if (React__default.isValidElement(node) && node.type === React__default.Fragment) {
+      return contents;
+    }
+
+    var componentId = componentsCount;
+    componentsCount++;
+    components["t" + componentId] = React__default.isValidElement(node) ? React__default.cloneElement(node, {
+      key: componentId,
+      children: undefined
+    }) : node;
+    return "<t" + componentId + ">" + contents + "</t" + componentId + ">";
+  };
+
+  var str = getText(elt);
+  return {
+    str: str,
+    components: components,
+    componentsCount: componentsCount
+  };
+}
+function Trans(_ref) {
+  var children = _ref.children;
+
+  var _t = React__default.useContext(PlasmicTranslatorContext);
+
+  if (!_t) {
+    warnNoTranslationFunctionAtMostOnce();
+    return children;
+  }
+
+  var _genTranslatableStrin = genTranslatableString(children),
+      str = _genTranslatableStrin.str,
+      components = _genTranslatableStrin.components,
+      componentsCount = _genTranslatableStrin.componentsCount;
+
+  return _t(str, componentsCount > 0 ? {
+    components: components
+  } : undefined);
+}
+var hasWarned = false;
+
+function warnNoTranslationFunctionAtMostOnce() {
+  if (!hasWarned) {
+    console.warn("Using Plasmic Translation but no translation function has been provided");
+    hasWarned = true;
+  }
+}
+
+function hasKey(v, key) {
+  return typeof v === "object" && v !== null && key in v;
+}
+
 var PlasmicRootContext = /*#__PURE__*/React.createContext(undefined);
 function PlasmicRootProvider(props) {
   var platform = props.platform,
@@ -1351,7 +1446,9 @@ function PlasmicRootProvider(props) {
   }, [platform]);
   return React.createElement(PlasmicRootContext.Provider, {
     value: context
-  }, React.createElement(reactAria.SSRProvider, null, children));
+  }, React.createElement(reactAria.SSRProvider, null, React.createElement(PlasmicTranslatorContext.Provider, {
+    value: props.translator
+  }, children)));
 }
 var useIsSSR = reactAria.useIsSSR;
 function useHasPlasmicRoot() {
@@ -3017,11 +3114,13 @@ exports.PlasmicLink = PlasmicLink;
 exports.PlasmicRootProvider = PlasmicRootProvider;
 exports.PlasmicSlot = PlasmicSlot;
 exports.Stack = Stack;
+exports.Trans = Trans;
 exports.classNames = classNames;
 exports.createPlasmicElementProxy = createPlasmicElementProxy;
 exports.createUseScreenVariants = createUseScreenVariants;
 exports.deriveRenderOpts = deriveRenderOpts;
 exports.ensureGlobalVariants = ensureGlobalVariants;
+exports.genTranslatableString = genTranslatableString;
 exports.getDataProps = getDataProps;
 exports.hasVariant = hasVariant;
 exports.makeFragment = makeFragment;