@plasmicapp/react-web 0.2.93 → 0.2.96

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

@@ -9,8 +9,22 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var ReactDOM = require('react-dom');
 var ReactDOM__default = _interopDefault(ReactDOM);
-var reactAria = require('react-aria');
-var reactStately = require('react-stately');
+var ssr = require('@react-aria/ssr');
+var focus = require('@react-aria/focus');
+var checkbox = require('@react-aria/checkbox');
+var visuallyHidden = require('@react-aria/visually-hidden');
+var toggle = require('@react-stately/toggle');
+var menu = require('@react-aria/menu');
+var tree = require('@react-stately/tree');
+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 select = require('@react-aria/select');
+var listbox = require('@react-aria/listbox');
+var select$1 = require('@react-stately/select');
+var _switch = require('@react-aria/switch');
+var overlays = require('@react-aria/overlays');
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -1345,6 +1359,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 + 1;
+    componentsCount++;
+    components[componentId] = React__default.isValidElement(node) ? React__default.cloneElement(node, {
+      key: componentId,
+      children: undefined
+    }) : node;
+    return "<" + componentId + ">" + contents + "</" + 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,
@@ -1356,9 +1460,11 @@ function PlasmicRootProvider(props) {
   }, [platform]);
   return React.createElement(PlasmicRootContext.Provider, {
     value: context
-  }, React.createElement(reactAria.SSRProvider, null, children));
+  }, React.createElement(ssr.SSRProvider, null, React.createElement(PlasmicTranslatorContext.Provider, {
+    value: props.translator
+  }, children)));
 }
-var useIsSSR = reactAria.useIsSSR;
+var useIsSSR = ssr.useIsSSR;
 function useHasPlasmicRoot() {
   return !!React.useContext(PlasmicRootContext);
 }
@@ -1379,7 +1485,7 @@ function useEnsureSSRProvider() {
 }
 
 function useFocused(opts) {
-  var _useAriaFocusRing = reactAria.useFocusRing({
+  var _useAriaFocusRing = focus.useFocusRing({
     within: false,
     isTextInput: opts.isTextInput
   }),
@@ -1390,7 +1496,7 @@ function useFocused(opts) {
 }
 
 function useFocusVisible(opts) {
-  var _useAriaFocusRing2 = reactAria.useFocusRing({
+  var _useAriaFocusRing2 = focus.useFocusRing({
     within: false,
     isTextInput: opts.isTextInput
   }),
@@ -1401,7 +1507,7 @@ function useFocusVisible(opts) {
 }
 
 function useFocusedWithin(opts) {
-  var _useAriaFocusRing3 = reactAria.useFocusRing({
+  var _useAriaFocusRing3 = focus.useFocusRing({
     within: true,
     isTextInput: opts.isTextInput
   }),
@@ -1412,7 +1518,7 @@ function useFocusedWithin(opts) {
 }
 
 function useFocusVisibleWithin(opts) {
-  var _useAriaFocusRing4 = reactAria.useFocusRing({
+  var _useAriaFocusRing4 = focus.useFocusRing({
     within: true,
     isTextInput: opts.isTextInput
   }),
@@ -1601,9 +1707,9 @@ function useCheckbox(plasmicClass, props, config, ref) {
   var inputRef = React.useRef(null);
   var rootRef = React.useRef(null);
   var ariaProps = asAriaCheckboxProps(props);
-  var state = reactStately.useToggleState(ariaProps);
+  var state = toggle.useToggleState(ariaProps);
 
-  var _useAriaCheckbox = reactAria.useCheckbox(ariaProps, state, inputRef),
+  var _useAriaCheckbox = checkbox.useCheckbox(ariaProps, state, inputRef),
       inputProps = _useAriaCheckbox.inputProps;
 
   var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
@@ -1626,7 +1732,7 @@ function useCheckbox(plasmicClass, props, config, ref) {
       ref: rootRef
     }),
     wrapChildren: function wrapChildren(children) {
-      return React.createElement(React.Fragment, null, React.createElement(reactAria.VisuallyHidden, {
+      return React.createElement(React.Fragment, null, React.createElement(visuallyHidden.VisuallyHidden, {
         isFocusable: true
       }, React.createElement("input", Object.assign({}, inputProps, {
         ref: inputRef
@@ -1806,7 +1912,7 @@ function renderAsCollectionChild(child, opts) {
 
     var content = getChildProp(option, "children"); // The children render prop needs to return an <Item/>
 
-    return React__default.createElement(reactStately.Item // We use ItemLike.value if the user explicitly specified a value,
+    return React__default.createElement(collections.Item // We use ItemLike.value if the user explicitly specified a value,
     // and we fallback to key.  If the user specified neither, then
     // the Collections API will generate a unique key for this item.
     , {
@@ -1821,7 +1927,7 @@ function renderAsCollectionChild(child, opts) {
     }, option);
   } else {
     var group = child;
-    return React__default.createElement(reactStately.Section // Note that we are using the whole section-like element as the title
+    return React__default.createElement(collections.Section // Note that we are using the whole section-like element as the title
     // here, and not group.props.title; we want the entire section-like
     // Plume element to end up as Node.rendered.
     , {
@@ -1919,10 +2025,10 @@ function useMenu(plasmicClass, props, config, ref) {
 
   var triggerContext = React.useContext(TriggeredOverlayContext);
   var rootRef = React.useRef(null);
-  var state = reactStately.useTreeState(ariaProps);
+  var state = tree.useTreeState(ariaProps);
   var menuListRef = React.useRef(null);
 
-  var _useAriaMenu = reactAria.useMenu(_extends({}, ariaProps, {
+  var _useAriaMenu = menu.useMenu(_extends({}, ariaProps, {
     autoFocus: triggerContext == null ? void 0 : triggerContext.autoFocus
   }), state, menuListRef),
       menuProps = _useAriaMenu.menuProps;
@@ -2001,14 +2107,14 @@ function useMenuGroup(plasmicClass, props, config) {
     return getDefaultPlasmicProps(plasmicClass, props);
   }
 
-  var _useMenuSection = reactAria.useMenuSection({
+  var _useMenuSection = menu.useMenuSection({
     heading: props.title,
     "aria-label": props["aria-label"]
   }),
       headingProps = _useMenuSection.headingProps,
       groupProps = _useMenuSection.groupProps;
 
-  var _useSeparator = reactAria.useSeparator({
+  var _useSeparator = separator.useSeparator({
     elementType: "li"
   }),
       separatorProps = _useSeparator.separatorProps;
@@ -2075,7 +2181,7 @@ function useMenuItem(plasmicClass, props, config) {
   var isHighlighted = state.selectionManager.isFocused && state.selectionManager.focusedKey === node.key;
   var ref = React.useRef(null);
 
-  var _useAriaMenuItem = reactAria.useMenuItem(mergeProps({
+  var _useAriaMenuItem = menu.useMenuItem(mergeProps({
     // We need to merge both the onAction on MenuItem and the onAction
     // on Menu
     onAction: onAction
@@ -2131,22 +2237,22 @@ function useMenuTrigger(opts, state) {
       placement = opts.placement,
       menuMatchTriggerWidth = opts.menuMatchTriggerWidth,
       menuWidth = opts.menuWidth,
-      menu = opts.menu;
+      menu$1 = opts.menu;
 
-  var _useAriaMenuTrigger = reactAria.useMenuTrigger({
+  var _useAriaMenuTrigger = menu.useMenuTrigger({
     type: "menu",
     isDisabled: isDisabled
   }, state, triggerRef),
       triggerPressProps = _useAriaMenuTrigger.menuTriggerProps,
       menuProps = _useAriaMenuTrigger.menuProps;
 
-  var _usePress = reactAria.usePress(_extends({}, triggerPressProps, {
+  var _usePress = interactions.usePress(_extends({}, triggerPressProps, {
     isDisabled: isDisabled
   })),
       triggerProps = _usePress.pressProps;
 
   var makeMenu = function makeMenu() {
-    var realMenu = typeof menu === "function" ? menu() : menu;
+    var realMenu = typeof menu$1 === "function" ? menu$1() : menu$1;
 
     if (!realMenu) {
       return null;
@@ -2191,7 +2297,7 @@ function DropdownMenu(props) {
       placement = props.placement,
       menu = props.menu;
   var triggerRef = React.useRef(null);
-  var state = reactStately.useMenuTriggerState({
+  var state = menu$1.useMenuTriggerState({
     isOpen: isOpen,
     defaultOpen: defaultOpen,
     onOpenChange: onOpenChange,
@@ -2233,7 +2339,7 @@ function useMenuButton(plasmicClass, props, config, outerRef) {
   useEnsureSSRProvider();
   var rootRef = React.useRef(null);
   var triggerRef = React.useRef(null);
-  var state = reactStately.useMenuTriggerState({
+  var state = menu$1.useMenuTriggerState({
     isOpen: isOpen,
     defaultOpen: defaultOpen,
     onOpenChange: onOpenChange,
@@ -2252,7 +2358,7 @@ function useMenuButton(plasmicClass, props, config, outerRef) {
       makeMenu = _useMenuTrigger.makeMenu,
       triggerContext = _useMenuTrigger.triggerContext;
 
-  var _useFocusable = reactAria.useFocusable(props, triggerRef),
+  var _useFocusable = focus.useFocusable(props, triggerRef),
       triggerFocusProps = _useFocusable.focusableProps;
 
   var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
@@ -2419,7 +2525,7 @@ function useSelect(plasmicClass, props, config, ref) {
       ariaProps = _useAriaSelectProps.ariaProps;
 
   var placement = props.placement;
-  var state = reactStately.useSelectState(ariaProps);
+  var state = select$1.useSelectState(ariaProps);
   var triggerRef = React.useRef(null);
   var rootRef = React.useRef(null);
   var isDisabled = props.isDisabled,
@@ -2430,11 +2536,11 @@ function useSelect(plasmicClass, props, config, ref) {
       placeholder = props.placeholder,
       selectedContent = props.selectedContent;
 
-  var _useAriaSelect = reactAria.useSelect(ariaProps, state, triggerRef),
+  var _useAriaSelect = select.useSelect(ariaProps, state, triggerRef),
       triggerPressProps = _useAriaSelect.triggerProps,
       menuProps = _useAriaSelect.menuProps;
 
-  var _usePress = reactAria.usePress(_extends({}, triggerPressProps, {
+  var _usePress = interactions.usePress(_extends({}, triggerPressProps, {
     isDisabled: isDisabled
   })),
       triggerProps = _usePress.pressProps;
@@ -2467,7 +2573,7 @@ function useSelect(plasmicClass, props, config, ref) {
       ref: rootRef
     }),
     wrapChildren: function wrapChildren(children) {
-      return React.createElement(React.Fragment, null, React.createElement(reactAria.HiddenSelect, {
+      return React.createElement(React.Fragment, null, React.createElement(select.HiddenSelect, {
         state: state,
         triggerRef: triggerRef,
         name: name,
@@ -2573,7 +2679,7 @@ function ListBoxWrapper(props) {
       children = props.children;
   var ref = React.useRef(null);
 
-  var _useListBox = reactAria.useListBox(_extends({}, menuProps, {
+  var _useListBox = listbox.useListBox(_extends({}, menuProps, {
     isVirtualized: false,
     autoFocus: state.focusStrategy || true,
     disallowEmptySelection: true
@@ -2615,7 +2721,7 @@ function useSelectOption(plasmicClass, props, config, outerRef) {
   var isDisabled = state.disabledKeys.has(node.key);
   var isHighlighted = state.selectionManager.isFocused && state.selectionManager.focusedKey === node.key;
 
-  var _useAriaOption = reactAria.useOption({
+  var _useAriaOption = listbox.useOption({
     isSelected: isSelected,
     isDisabled: isDisabled,
     "aria-label": node && node["aria-label"],
@@ -2673,14 +2779,14 @@ function useSelectOptionGroup(plasmicClass, props, config) {
     return getDefaultPlasmicProps(plasmicClass, props);
   }
 
-  var _useListBoxSection = reactAria.useListBoxSection({
+  var _useListBoxSection = listbox.useListBoxSection({
     heading: props.title,
     "aria-label": props["aria-label"]
   }),
       headingProps = _useListBoxSection.headingProps,
       groupProps = _useListBoxSection.groupProps;
 
-  var _useSeparator = reactAria.useSeparator({
+  var _useSeparator = separator.useSeparator({
     elementType: "li"
   }),
       separatorProps = _useSeparator.separatorProps;
@@ -2745,9 +2851,9 @@ function useSwitch(plasmicClass, props, config, ref) {
   var inputRef = React.useRef(null);
   var rootRef = React.useRef(null);
   var ariaProps = asAriaSwitchProps(props);
-  var state = reactStately.useToggleState(ariaProps);
+  var state = toggle.useToggleState(ariaProps);
 
-  var _useAriaSwitch = reactAria.useSwitch(ariaProps, state, inputRef),
+  var _useAriaSwitch = _switch.useSwitch(ariaProps, state, inputRef),
       inputProps = _useAriaSwitch.inputProps;
 
   var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
@@ -2767,7 +2873,7 @@ function useSwitch(plasmicClass, props, config, ref) {
       ref: rootRef
     }),
     wrapChildren: function wrapChildren(children) {
-      return React.createElement(React.Fragment, null, React.createElement(reactAria.VisuallyHidden, {
+      return React.createElement(React.Fragment, null, React.createElement(visuallyHidden.VisuallyHidden, {
         isFocusable: true
       }, React.createElement("input", Object.assign({}, inputProps, {
         ref: inputRef
@@ -2932,7 +3038,7 @@ function useTriggeredOverlay(plasmicClass, props, config, outerRef) {
     }
   }, [triggerRef, isRendered, overlayMatchTriggerWidth, overlayMinTriggerWidth]);
 
-  var _useOverlay = reactAria.useOverlay({
+  var _useOverlay = overlays.useOverlay({
     isOpen: state.isOpen,
     onClose: state.close,
     isDismissable: true,
@@ -2940,7 +3046,7 @@ function useTriggeredOverlay(plasmicClass, props, config, outerRef) {
   }, overlayRef),
       overlayAriaProps = _useOverlay.overlayProps;
 
-  var _useOverlayPosition = reactAria.useOverlayPosition({
+  var _useOverlayPosition = overlays.useOverlayPosition({
     targetRef: triggerRef,
     overlayRef: overlayRef,
     placement: placement != null ? placement : "bottom left",
@@ -2986,9 +3092,9 @@ function useTriggeredOverlay(plasmicClass, props, config, outerRef) {
     active: placementAxis === "right"
   }));
 
-  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), (_extends2 = {}, _extends2[config.contentSlot] = React.createElement(reactAria.FocusScope, {
+  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), (_extends2 = {}, _extends2[config.contentSlot] = React.createElement(focus.FocusScope, {
     restoreFocus: true
-  }, React.createElement(reactAria.DismissButton, {
+  }, React.createElement(overlays.DismissButton, {
     onDismiss: state.close
   }), children), _extends2));
 
@@ -3022,11 +3128,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;