@plasmicapp/react-web 0.2.94 → 0.2.97

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) {
@@ -1387,13 +1401,13 @@ function genTranslatableString(elt) {
       return contents;
     }
 
-    var componentId = componentsCount;
+    var componentId = componentsCount + 1;
     componentsCount++;
-    components["t" + componentId] = React__default.isValidElement(node) ? React__default.cloneElement(node, {
+    components[componentId] = React__default.isValidElement(node) ? React__default.cloneElement(node, {
       key: componentId,
       children: undefined
     }) : node;
-    return "<t" + componentId + ">" + contents + "</t" + componentId + ">";
+    return "<" + componentId + ">" + contents + "</" + componentId + ">";
   };
 
   var str = getText(elt);
@@ -1446,11 +1460,11 @@ function PlasmicRootProvider(props) {
   }, [platform]);
   return React.createElement(PlasmicRootContext.Provider, {
     value: context
-  }, React.createElement(reactAria.SSRProvider, null, React.createElement(PlasmicTranslatorContext.Provider, {
+  }, 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);
 }
@@ -1471,7 +1485,7 @@ function useEnsureSSRProvider() {
 }
 
 function useFocused(opts) {
-  var _useAriaFocusRing = reactAria.useFocusRing({
+  var _useAriaFocusRing = focus.useFocusRing({
     within: false,
     isTextInput: opts.isTextInput
   }),
@@ -1482,7 +1496,7 @@ function useFocused(opts) {
 }
 
 function useFocusVisible(opts) {
-  var _useAriaFocusRing2 = reactAria.useFocusRing({
+  var _useAriaFocusRing2 = focus.useFocusRing({
     within: false,
     isTextInput: opts.isTextInput
   }),
@@ -1493,7 +1507,7 @@ function useFocusVisible(opts) {
 }
 
 function useFocusedWithin(opts) {
-  var _useAriaFocusRing3 = reactAria.useFocusRing({
+  var _useAriaFocusRing3 = focus.useFocusRing({
     within: true,
     isTextInput: opts.isTextInput
   }),
@@ -1504,7 +1518,7 @@ function useFocusedWithin(opts) {
 }
 
 function useFocusVisibleWithin(opts) {
-  var _useAriaFocusRing4 = reactAria.useFocusRing({
+  var _useAriaFocusRing4 = focus.useFocusRing({
     within: true,
     isTextInput: opts.isTextInput
   }),
@@ -1693,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({
@@ -1718,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
@@ -1898,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.
     , {
@@ -1913,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.
     , {
@@ -2011,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;
@@ -2093,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;
@@ -2167,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
@@ -2223,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;
@@ -2283,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,
@@ -2325,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,
@@ -2344,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({
@@ -2511,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,
@@ -2522,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;
@@ -2559,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,
@@ -2665,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
@@ -2707,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"],
@@ -2765,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;
@@ -2837,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({
@@ -2859,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
@@ -2967,7 +2981,9 @@ function useTextInput(plasmicClass, props, config, ref) {
       style: style
     }
   }, _overrides[config.input] = {
-    props: _extends({}, omit.apply(void 0, [rest].concat(plasmicClass.internalArgProps, plasmicClass.internalVariantProps)), {
+    props: _extends({}, omit.apply(void 0, [rest].concat(plasmicClass.internalArgProps.filter(function (prop) {
+      return prop !== "required";
+    }), plasmicClass.internalVariantProps)), {
       disabled: isDisabled,
       ref: inputRef,
       className: inputClassName,
@@ -3024,7 +3040,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,
@@ -3032,7 +3048,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",
@@ -3078,9 +3094,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));