@plasmicapp/react-web 0.2.160 → 0.2.162

package/dist/react-web.esm.js

@@ -20,6 +20,7 @@ import { Item, Section } from '@react-stately/collections';
 import { useSeparator } from '@react-aria/separator';
 import { useMenuTriggerState } from '@react-stately/menu';
 import { usePress } from '@react-aria/interactions';
+import { usePlasmicCanvasContext } from '@plasmicapp/host';
 import { useListBox, useOption, useListBoxSection } from '@react-aria/listbox';
 import { useSelect as useSelect$1, HiddenSelect } from '@react-aria/select';
 import { useSelectState } from '@react-stately/select';
@@ -2636,13 +2637,14 @@ function initializeStateValue($$state, initialSpecNode, initialStatePath, proxyR
     var node = _ref.node,
       path = _ref.path;
     node.addListener(path, function () {
-      var newValue = initialSpecNode.getSpec().initFunc(_extends({
+      var newValue = invokeInitFuncBackwardsCompatible(initialSpecNode.getSpec().initFunc, _extends({
         $state: $state
       }, $$state.env));
       set(proxyRoot, initialStatePath, newValue);
     });
   });
-  var initialValue = initialSpecNode.getInitFunc(initialSpecNode.getState(initialStatePath))(_extends({
+  var initFunc = initialSpecNode.getInitFunc(initialSpecNode.getState(initialStatePath));
+  var initialValue = invokeInitFuncBackwardsCompatible(initFunc, _extends({
     $state: $state
   }, $$state.env));
   initialSpecNode.setInitialValue(initialStatePath, clone(initialValue));
@@ -2818,6 +2820,13 @@ function extractDollarStateParametersBackwardCompatible() {
     };
   }
 }
+function invokeInitFuncBackwardsCompatible(initFunc, env) {
+  if (initFunc.length > 1) {
+    return initFunc(env.$props, env.$state, env.$ctx);
+  } else {
+    return initFunc(env);
+  }
+}
 function useDollarState(specs) {
   for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     rest[_key - 1] = arguments[_key];
@@ -2924,7 +2933,7 @@ function useDollarState(specs) {
       stateCell = _ref3.stateCell;
     var initFunc = node.getInitFunc(stateCell);
     if (initFunc) {
-      var newInit = initFunc(_extends({
+      var newInit = invokeInitFuncBackwardsCompatible(initFunc, _extends({
         $state: $state
       }, envFieldsAreNonNill(env)));
       if (!deepEqual(newInit, stateCell.initialValue)) {
@@ -3164,6 +3173,58 @@ function useCheckbox(plasmicClass, props, config, ref) {
   };
 }
 
+function deriveItemsFromProps(props, opts) {
+  if (opts.itemsProp && opts.itemsProp in props) {
+    if (!opts.ItemComponent || !opts.SectionComponent) {
+      throw new Error("You may need to re-generate your Plasmic* files");
+    }
+    var items = props[opts.itemsProp];
+    return deriveItemsFromItemsProp(items, {
+      ItemComponent: opts.ItemComponent,
+      SectionComponent: opts.SectionComponent
+    });
+  } else {
+    return deriveItemsFromChildren(props.children, opts);
+  }
+}
+function deriveItemsFromItemsProp(items, opts) {
+  var _items$map;
+  var ItemComponent = opts.ItemComponent,
+    SectionComponent = opts.SectionComponent;
+  var disabledKeys = [];
+  var transform = function transform(item) {
+    if (typeof item === "string") {
+      return React__default.createElement(ItemComponent, {
+        key: item,
+        value: item
+      }, item);
+    } else if ("children" in item) {
+      return React__default.createElement(SectionComponent, {
+        key: item.title,
+        title: item.title
+      }, item.children.map(function (x) {
+        return transform(x);
+      }));
+    } else {
+      var _item$label;
+      if (item.isDisabled) {
+        disabledKeys.push(item.value);
+      }
+      return React__default.createElement(ItemComponent, {
+        key: item.value,
+        value: item.value,
+        textValue: item.textValue,
+        isDisabled: item.isDisabled
+      }, (_item$label = item.label) != null ? _item$label : item.value);
+    }
+  };
+  return {
+    items: (_items$map = items == null ? void 0 : items.map(function (x) {
+      return transform(x);
+    })) != null ? _items$map : [],
+    disabledKeys: disabledKeys
+  };
+}
 /**
  * Given children of a component like Select or Menu, derive the items
  * that we will pass into the Collections API.  These will be
@@ -3240,6 +3301,28 @@ function deriveItemsFromChildren(children, opts) {
     disabledKeys: disabledKeys
   };
 }
+function useDerivedItems(props, opts) {
+  var children = props.children;
+  var itemPlumeType = opts.itemPlumeType,
+    sectionPlumeType = opts.sectionPlumeType,
+    invalidChildError = opts.invalidChildError,
+    requireItemValue = opts.requireItemValue,
+    ItemComponent = opts.ItemComponent,
+    SectionComponent = opts.SectionComponent,
+    itemsProp = opts.itemsProp;
+  var items = itemsProp ? props[itemsProp] : undefined;
+  return React__default.useMemo(function () {
+    return deriveItemsFromProps(props, {
+      itemPlumeType: itemPlumeType,
+      sectionPlumeType: sectionPlumeType,
+      invalidChildError: invalidChildError,
+      requireItemValue: requireItemValue,
+      itemsProp: itemsProp,
+      ItemComponent: ItemComponent,
+      SectionComponent: SectionComponent
+    });
+  }, [children, items, itemPlumeType, sectionPlumeType, invalidChildError, requireItemValue, ItemComponent, SectionComponent]);
+}
 function useDerivedItemsFromChildren(children, opts) {
   var itemPlumeType = opts.itemPlumeType,
     sectionPlumeType = opts.sectionPlumeType,
@@ -3790,18 +3873,20 @@ var COLLECTION_OPTS$1 = {
  * with the secret derived `_node` prop.  That means Option and OptionGroup
  * render functions can assume that _node is passed in.
  */
-function useAriaSelectProps(props) {
+function useAriaSelectProps(props, config) {
   var value = props.value,
     defaultValue = props.defaultValue,
-    children = props.children,
     onChange = props.onChange,
     rest = _objectWithoutPropertiesLoose(props, _excluded$6);
-  var _useDerivedItemsFromC = useDerivedItemsFromChildren(children, _extends({}, COLLECTION_OPTS$1, {
+  var _useDerivedItems = useDerivedItems(props, _extends({}, COLLECTION_OPTS$1, {
       invalidChildError: "Can only use Select.Option and Select.OptionGroup as children to Select",
-      requireItemValue: true
+      requireItemValue: true,
+      ItemComponent: config.OptionComponent,
+      SectionComponent: config.OptionGroupComponent,
+      itemsProp: "options"
     })),
-    items = _useDerivedItemsFromC.items,
-    disabledKeys = _useDerivedItemsFromC.disabledKeys;
+    items = _useDerivedItems.items,
+    disabledKeys = _useDerivedItems.disabledKeys;
   var collectionChildRenderer = useCallback(function (child) {
     return renderAsCollectionChild(child, COLLECTION_OPTS$1);
   }, []);
@@ -3832,7 +3917,7 @@ function useSelect(plasmicClass, props, config, ref) {
     ref = null;
   }
   useEnsureSSRProvider();
-  var _useAriaSelectProps = useAriaSelectProps(props),
+  var _useAriaSelectProps = useAriaSelectProps(props, config),
     ariaProps = _useAriaSelectProps.ariaProps;
   var placement = props.placement;
   var state = useSelectState(ariaProps);
@@ -3845,6 +3930,7 @@ function useSelect(plasmicClass, props, config, ref) {
     autoFocus = props.autoFocus,
     placeholder = props.placeholder,
     selectedContent = props.selectedContent;
+  var canvasCtx = usePlasmicCanvasContext();
   var _useAriaSelect = useSelect$1(ariaProps, state, triggerRef),
     triggerPressProps = _useAriaSelect.triggerProps,
     menuProps = _useAriaSelect.menuProps;
@@ -3878,7 +3964,7 @@ function useSelect(plasmicClass, props, config, ref) {
       ref: rootRef
     }),
     wrapChildren: function wrapChildren(children) {
-      return createElement(Fragment, null, createElement(HiddenSelect, {
+      return createElement(Fragment, null, !canvasCtx && createElement(HiddenSelect, {
         state: state,
         triggerRef: triggerRef,
         name: name,
@@ -3886,7 +3972,7 @@ function useSelect(plasmicClass, props, config, ref) {
       }), children);
     }
   }, _overrides[config.trigger] = {
-    props: mergeProps(triggerProps, {
+    props: mergeProps(canvasCtx ? {} : triggerProps, {
       ref: triggerRef,
       autoFocus: autoFocus,
       disabled: !!isDisabled,
@@ -3978,13 +4064,14 @@ function ListBoxWrapper(props) {
     menuProps = props.menuProps,
     children = props.children;
   var ref = useRef(null);
+  var canvasCtx = usePlasmicCanvasContext();
   var _useListBox = useListBox(_extends({}, menuProps, {
       isVirtualized: false,
       autoFocus: state.focusStrategy || true,
       disallowEmptySelection: true
     }), state, ref),
     listBoxProps = _useListBox.listBoxProps;
-  return cloneElement(children, mergeProps(children.props, listBoxProps, {
+  return cloneElement(children, mergeProps(children.props, canvasCtx ? {} : listBoxProps, {
     style: noOutline(),
     ref: ref
   }));
@@ -4006,6 +4093,7 @@ function useSelectOption(plasmicClass, props, config, outerRef) {
     return getDefaultPlasmicProps(plasmicClass, props);
   }
   var children = props.children;
+  var canvasCtx = usePlasmicCanvasContext();
   var rootRef = useRef(null);
   var onRef = mergeRefs(rootRef, outerRef);
   // We pass in the Node secretly as an undocumented prop from <Select />
@@ -4020,7 +4108,8 @@ function useSelectOption(plasmicClass, props, config, outerRef) {
       key: node.key,
       shouldSelectOnPressUp: true,
       shouldFocusOnHover: true,
-      isVirtualized: false
+      isVirtualized: false,
+      shouldUseVirtualFocus: !!canvasCtx
     }, state, rootRef),
     optionProps = _useAriaOption.optionProps,
     labelProps = _useAriaOption.labelProps;
@@ -4036,7 +4125,7 @@ function useSelectOption(plasmicClass, props, config, outerRef) {
   }));
   var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), (_extends2 = {}, _extends2[config.labelSlot] = children, _extends2));
   var overrides = (_overrides = {}, _overrides[config.root] = {
-    props: mergeProps(optionProps, getStyleProps(props), {
+    props: mergeProps(canvasCtx ? {} : optionProps, getStyleProps(props), {
       ref: onRef,
       style: noOutline()
     })
@@ -4347,7 +4436,8 @@ function useTriggeredOverlay(plasmicClass, props, config, outerRef, isDismissabl
     def: config.isPlacedRightVariant,
     active: placementAxis === "right"
   }));
-  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), (_extends2 = {}, _extends2[config.contentSlot] = createElement(FocusScope, {
+  var canvasCtx = usePlasmicCanvasContext();
+  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), (_extends2 = {}, _extends2[config.contentSlot] = canvasCtx ? children : createElement(FocusScope, {
     restoreFocus: true
   }, createElement(DismissButton, {
     onDismiss: state.close