@plasmicapp/react-web 0.2.160 → 0.2.162

package/dist/all.d.ts

@@ -1015,6 +1015,17 @@ interface SectionLikeProps {
      * A list of items that belong in this group
      */
     children?: React__default.ReactNode;
+}
+declare type ItemJson = LeafItemJson | SectionJson;
+declare type LeafItemJson = string | {
+    value: string;
+    label?: string;
+    textValue?: string;
+    isDisabled?: boolean;
+};
+interface SectionJson {
+    title: string;
+    children: ItemJson[];
 }
 
 interface BaseMenuGroupProps extends SectionLikeProps, StyleProps {
@@ -1191,6 +1202,15 @@ interface BaseSelectProps extends DOMProps, AriaLabelingProps, FocusableDOMProps
      * List of Select.Options
      */
     children?: React.ReactNode;
+    /**
+     * List of options as an array, instead of using `children` prop. If this
+     * is passed in, then `children` is ignored.
+     *
+     * The options can be a list of strings, or a list of objects with
+     * fields `value` (for the value of the option), `label` (for what's rendered
+     * in the option), and `isDisabled` (if the option should be disabled).
+     */
+    options?: ItemJson[];
     /**
      * Whether the Select is currently open
      */
@@ -1251,6 +1271,8 @@ interface SelectConfig<C extends AnyPlasmicClass> {
     trigger: keyof PlasmicClassOverrides<C>;
     overlay: keyof PlasmicClassOverrides<C>;
     optionsContainer: keyof PlasmicClassOverrides<C>;
+    OptionComponent?: React.ComponentType<ItemLikeProps>;
+    OptionGroupComponent?: React.ComponentType<SectionLikeProps>;
 }
 interface SelectState {
     open: () => void;

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

@@ -107,6 +107,32 @@ export interface SectionLikeProps {
     children?: React.ReactNode;
 }
 declare type LoaderAwareSectionLikeProps = SectionLikeProps | PlasmicLoaderProps<SectionLikeProps>;
+export declare type ItemJson = LeafItemJson | SectionJson;
+export declare type LeafItemJson = string | {
+    value: string;
+    label?: string;
+    textValue?: string;
+    isDisabled?: boolean;
+};
+export interface SectionJson {
+    title: string;
+    children: ItemJson[];
+}
+export declare function deriveItemsFromProps(props: any, opts: {
+    itemPlumeType: string;
+    sectionPlumeType?: string;
+    invalidChildError?: string;
+    requireItemValue: boolean;
+    ItemComponent?: React.ComponentType<ItemLikeProps>;
+    SectionComponent?: React.ComponentType<SectionLikeProps>;
+    itemsProp?: string;
+}): {
+    items: JSX.Element[];
+    disabledKeys: string[];
+} | {
+    items: React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>[];
+    disabledKeys: React.Key[];
+};
 /**
  * Given children of a component like Select or Menu, derive the items
  * that we will pass into the Collections API.  These will be
@@ -124,6 +150,21 @@ export declare function deriveItemsFromChildren<T extends React.ReactElement>(ch
     items: T[];
     disabledKeys: React.Key[];
 };
+export declare function useDerivedItems(props: any, opts: {
+    itemPlumeType: string;
+    sectionPlumeType?: string;
+    invalidChildError?: string;
+    requireItemValue: boolean;
+    ItemComponent?: React.ComponentType<ItemLikeProps>;
+    SectionComponent?: React.ComponentType<SectionLikeProps>;
+    itemsProp?: string;
+}): {
+    items: JSX.Element[];
+    disabledKeys: string[];
+} | {
+    items: React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>[];
+    disabledKeys: React.Key[];
+};
 export declare function useDerivedItemsFromChildren<T extends React.ReactElement>(children: React.ReactNode, opts: {
     itemPlumeType: string;
     sectionPlumeType?: string;

package/dist/plume/select/select.d.ts

@@ -1,6 +1,7 @@
 import { Placement } from "@react-types/overlays";
 import { AriaLabelingProps, DOMProps, FocusableDOMProps, FocusableProps, InputBase } from "@react-types/shared";
 import * as React from "react";
+import { ItemJson, ItemLikeProps, SectionLikeProps } from "../collection-utils";
 import { AnyPlasmicClass, PlasmicClassArgs, PlasmicClassOverrides, PlasmicClassVariants, VariantDef } from "../plume-utils";
 import { StyleProps } from "../props-utils";
 export interface BaseSelectProps extends DOMProps, AriaLabelingProps, FocusableDOMProps, InputBase, FocusableProps, StyleProps {
@@ -20,6 +21,15 @@ export interface BaseSelectProps extends DOMProps, AriaLabelingProps, FocusableD
      * List of Select.Options
      */
     children?: React.ReactNode;
+    /**
+     * List of options as an array, instead of using `children` prop. If this
+     * is passed in, then `children` is ignored.
+     *
+     * The options can be a list of strings, or a list of objects with
+     * fields `value` (for the value of the option), `label` (for what's rendered
+     * in the option), and `isDisabled` (if the option should be disabled).
+     */
+    options?: ItemJson[];
     /**
      * Whether the Select is currently open
      */
@@ -80,6 +90,8 @@ interface SelectConfig<C extends AnyPlasmicClass> {
     trigger: keyof PlasmicClassOverrides<C>;
     overlay: keyof PlasmicClassOverrides<C>;
     optionsContainer: keyof PlasmicClassOverrides<C>;
+    OptionComponent?: React.ComponentType<ItemLikeProps>;
+    OptionGroupComponent?: React.ComponentType<SectionLikeProps>;
 }
 interface SelectState {
     open: () => void;

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

@@ -25,6 +25,7 @@ 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 = require('@react-aria/select');
 var select$1 = require('@react-stately/select');
@@ -2641,13 +2642,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));
@@ -2823,6 +2825,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];
@@ -2929,7 +2938,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)) {
@@ -3169,6 +3178,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
@@ -3245,6 +3306,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,
@@ -3795,18 +3878,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 = React.useCallback(function (child) {
     return renderAsCollectionChild(child, COLLECTION_OPTS$1);
   }, []);
@@ -3837,7 +3922,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 = select$1.useSelectState(ariaProps);
@@ -3850,6 +3935,7 @@ function useSelect(plasmicClass, props, config, ref) {
     autoFocus = props.autoFocus,
     placeholder = props.placeholder,
     selectedContent = props.selectedContent;
+  var canvasCtx = host.usePlasmicCanvasContext();
   var _useAriaSelect = select.useSelect(ariaProps, state, triggerRef),
     triggerPressProps = _useAriaSelect.triggerProps,
     menuProps = _useAriaSelect.menuProps;
@@ -3883,7 +3969,7 @@ function useSelect(plasmicClass, props, config, ref) {
       ref: rootRef
     }),
     wrapChildren: function wrapChildren(children) {
-      return React.createElement(React.Fragment, null, React.createElement(select.HiddenSelect, {
+      return React.createElement(React.Fragment, null, !canvasCtx && React.createElement(select.HiddenSelect, {
         state: state,
         triggerRef: triggerRef,
         name: name,
@@ -3891,7 +3977,7 @@ function useSelect(plasmicClass, props, config, ref) {
       }), children);
     }
   }, _overrides[config.trigger] = {
-    props: mergeProps(triggerProps, {
+    props: mergeProps(canvasCtx ? {} : triggerProps, {
       ref: triggerRef,
       autoFocus: autoFocus,
       disabled: !!isDisabled,
@@ -3983,13 +4069,14 @@ function ListBoxWrapper(props) {
     menuProps = props.menuProps,
     children = props.children;
   var ref = React.useRef(null);
+  var canvasCtx = host.usePlasmicCanvasContext();
   var _useListBox = listbox.useListBox(_extends({}, menuProps, {
       isVirtualized: false,
       autoFocus: state.focusStrategy || true,
       disallowEmptySelection: true
     }), state, ref),
     listBoxProps = _useListBox.listBoxProps;
-  return React.cloneElement(children, mergeProps(children.props, listBoxProps, {
+  return React.cloneElement(children, mergeProps(children.props, canvasCtx ? {} : listBoxProps, {
     style: noOutline(),
     ref: ref
   }));
@@ -4011,6 +4098,7 @@ function useSelectOption(plasmicClass, props, config, outerRef) {
     return getDefaultPlasmicProps(plasmicClass, props);
   }
   var children = props.children;
+  var canvasCtx = host.usePlasmicCanvasContext();
   var rootRef = React.useRef(null);
   var onRef = mergeRefs(rootRef, outerRef);
   // We pass in the Node secretly as an undocumented prop from <Select />
@@ -4025,7 +4113,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;
@@ -4041,7 +4130,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()
     })
@@ -4352,7 +4441,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] = React.createElement(focus.FocusScope, {
+  var canvasCtx = host.usePlasmicCanvasContext();
+  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), (_extends2 = {}, _extends2[config.contentSlot] = canvasCtx ? children : React.createElement(focus.FocusScope, {
     restoreFocus: true
   }, React.createElement(overlays.DismissButton, {
     onDismiss: state.close