@plasmicapp/react-web 0.2.201 → 0.2.202

package/skinny/dist/{collection-utils-0967eaf0.js → collection-utils-2f28e4eb.js}

@@ -1,303 +1,303 @@
-import { b as __assign, l as isString } from './common-9d6d348d.js';
+import { b as __assign, l as isString } from './common-ed411407.js';
 import { Item, Section } from '@react-stately/collections';
 import React__default from 'react';
-import { t as toChildArray, g as getElementTypeName } from './react-utils-ee4e03ba.js';
-import { g as getPlumeType, P as PLUME_STRICT_MODE } from './plume-utils-7d68bcc0.js';
+import { t as toChildArray, g as getElementTypeName } from './react-utils-5ff031c2.js';
+import { g as getPlumeType, P as PLUME_STRICT_MODE } from './plume-utils-e699cd08.js';
 
-/**
- * In general, we try not to expose react-aria's Collections API to Plume users.
- * The Collections API is how react-aria users pass data about collections of
- * things using the built-in Item and Section components, which are abstract,
- * metadata-only components that don't render anything but only serve to specify
- * data.  For example, here's how you would use react-spectrum's Picker:
- *
- *   <Picker>
- *     <Section title="Asia">
- *       <Item key="taiwan">Taiwan</Item>
- *       <Item key="japan">Japan</Item>
- *       <Item key="china">China</Item>
- *     </Section>
- *     <Section title="Europe">
- *       <Item key="germany">Germany</Item>
- *       <Item key="france">France</Item>
- *     </Section>
- *   </Picker>
- *
- * You would re-use this same Item/Section components to pass similar things to
- * Menu, Tabs, etc.
- *
- * For Plasmic, this API is too abstract.  The user has explicitly designed components
- * like Select.Option and Select.OptionGroup, and it is weird that they don't actually
- * use these components. It is more natural to do:
- *
- *   <Select>
- *     <Select.OptionGroup title="Asia">
- *       <Select.Option key="taiwan">Taiwan</Select>
- *     </Select.OptionGroup>
- *   </Select>
- *
- * For Plume, we let users directly use the components they designed, both to collect
- * information and to perform actual rendering.  For example, for Plume,
- * you'd use Select.Option instead of Item, and Select.OptionGroup instead of Section.
- * This means that the Select.Option props will collect the same information Item
- * does.
- *
- * A component like Select.Option then serves two purposes:
- *
- * 1. Allow users to specify the collection of data, like in the above example
- *    Here, we're mainly interested in the props in those ReactElements so
- *    we can pass the Item/Section data onto react-aria's APIs.  We are not
- *    actually rendering these elements.
- * 2. Once react-aria's Collections API has gone through them and built
- *    Collection "nodes", we then create cloned versions of these elements
- *    with the corresponding node passed in as a secret prop.  These ReactElements
- *    are then actually used to _render_ the corresponding Option / OptionGroup.
- *
- * This file contains helper functions to help with implementing the above.
- *
- * Note also that most of the collections-based react-aria components expose
- * a parallel API that accepts a list of "items" and a render prop, instead
- * of list of Item/Section elements.  This is for efficiency, but we are opting
- * to only support the composite-component pattern for now for simplicity.
- */
-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 _a;
-    var ItemComponent = opts.ItemComponent, SectionComponent = opts.SectionComponent;
-    var disabledKeys = [];
-    var transform = function (item) {
-        var _a;
-        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 {
-            if (item.isDisabled) {
-                disabledKeys.push(item.value);
-            }
-            return (React__default.createElement(ItemComponent, { key: item.value, value: item.value, textValue: item.textValue, isDisabled: item.isDisabled }, (_a = item.label) !== null && _a !== void 0 ? _a : item.value));
-        }
-    };
-    return {
-        items: (_a = items === null || items === void 0 ? void 0 : items.map(function (x) { return transform(x); })) !== null && _a !== void 0 ? _a : [],
-        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
- * ReactElement<ItemLikeProps|SectionLikeProps>[].
- *
- * Will also assign keys to items by their index in the collection,
- * and collect the keys of disabled items.
- */
-function deriveItemsFromChildren(children, opts) {
-    if (!children) {
-        return {
-            items: [],
-            disabledKeys: []
-        };
-    }
-    var itemPlumeType = opts.itemPlumeType, sectionPlumeType = opts.sectionPlumeType, invalidChildError = opts.invalidChildError;
-    // For Plume items without an explicit key, we assign a key as the index
-    // of the collection.
-    var itemCount = 0;
-    var sectionCount = 0;
-    var ensureValue = function (element) {
-        if (!propInChild(element, "value")) {
-            if (opts.requireItemValue && PLUME_STRICT_MODE) {
-                throw new Error("Must specify a \"value\" prop for ".concat(getElementTypeName(element)));
-            }
-            else {
-                return cloneChild(element, { value: "".concat(itemCount++) });
-            }
-        }
-        else {
-            // Still increment count even if key is present, so that the
-            // auto-assigned key really reflects the index
-            itemCount++;
-            return element;
-        }
-    };
-    var disabledKeys = [];
-    var flattenedChildren = function (children) {
-        return toChildArray(children).flatMap(function (child) {
-            var _a;
-            if (React__default.isValidElement(child)) {
-                if (child.type === React__default.Fragment) {
-                    return flattenedChildren(child.props
-                        .children);
-                }
-                var type = getPlumeType(child);
-                if (type === itemPlumeType) {
-                    child = ensureValue(child);
-                    var childKey = getItemLikeKey(child);
-                    if (getChildProp(child, "isDisabled") && !!childKey) {
-                        disabledKeys.push(childKey);
-                    }
-                    return [child];
-                }
-                if (type === sectionPlumeType) {
-                    return [
-                        cloneChild(child, {
-                            // key of section doesn't actually matter, just needs
-                            // to be unique
-                            key: (_a = child.key) !== null && _a !== void 0 ? _a : "section-".concat(sectionCount++),
-                            children: flattenedChildren(getChildProp(child, "children"))
-                        }),
-                    ];
-                }
-            }
-            {
-                throw new Error(invalidChildError !== null && invalidChildError !== void 0 ? invalidChildError : "Unexpected child");
-            }
-        });
-    };
-    return { items: flattenedChildren(children), 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, invalidChildError = opts.invalidChildError, requireItemValue = opts.requireItemValue;
-    return React__default.useMemo(function () {
-        return deriveItemsFromChildren(children, {
-            itemPlumeType: itemPlumeType,
-            sectionPlumeType: sectionPlumeType,
-            invalidChildError: invalidChildError,
-            requireItemValue: requireItemValue
-        });
-    }, [
-        children,
-        itemPlumeType,
-        sectionPlumeType,
-        invalidChildError,
-        requireItemValue,
-    ]);
-}
-/**
- * Given a Collection node, create the React element that we should use
- * to render it.
- */
-function renderCollectionNode(node) {
-    // node.rendered should already have our item-like or section-like Plume
-    // component elements, so we just need to clone them with a secret
-    // _node prop that we use to render.
-    return cloneChild(node.rendered, {
-        _node: node,
-        key: node.key
-    });
-}
-/**
- * Renders a item-like or section-like Plume component element into an
- * Item or a Section element.
- */
-function renderAsCollectionChild(child, opts) {
-    var _a;
-    var plumeType = getPlumeType(child);
-    if (plumeType === opts.itemPlumeType) {
-        var option = child;
-        // We look at the children passed to the item-like element, and derive key
-        // or textValue from it if it is a string
-        var content = getChildProp(option, "children");
-        // The children render prop needs to return an <Item/>
-        return (React__default.createElement(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.
-        , { 
-            // 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.
-            key: getItemLikeKey(option), 
-            // textValue is either explicitly specified by the user, or we
-            // try to derive it if `content` is a string.
-            textValue: (_a = getChildProp(option, "textValue")) !== null && _a !== void 0 ? _a : (isString(content)
-                ? content
-                : propInChild(option, "value")
-                    ? getChildProp(option, "value")
-                    : option.key), "aria-label": getChildProp(option, "aria-label") }, option));
-    }
-    else {
-        var group = child;
-        return (React__default.createElement(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.
-        , { 
-            // 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.
-            title: group, "aria-label": getChildProp(group, "aria-label"), 
-            // We are flattening and deriving the descendant Options as items here.
-            // group.props.children should've already been cleaned up by
-            // deriveItemsFromChildren()
-            items: getChildProp(group, "children") }, function (c) { return renderAsCollectionChild(c, opts); }));
-    }
-}
-function getItemLikeKey(element) {
-    var _a;
-    return (_a = getChildProp(element, "value")) !== null && _a !== void 0 ? _a : element.key;
-}
-// PlasmicLoader-aware function to get prop from child.
-function getChildProp(child, prop) {
-    return "componentProps" in child.props
-        ? child.props.componentProps[prop]
-        : child.props[prop];
-}
-// PlasmicLoader-aware function to check `if (prop in element.props)`.
-function propInChild(child, prop) {
-    return "componentProps" in child.props
-        ? prop in child.props.componentProps
-        : prop in child.props;
-}
-// PlasmicLoader-aware function to clone React element.
-function cloneChild(child, props) {
-    if (child.type.getPlumeType) {
-        // If React element has getPlumeType(), assume that it is PlasmicLoader,
-        // so add nodeProps to componentProps instead of element props.
-        return React__default.cloneElement(child, __assign({ componentProps: __assign(__assign({}, child.props.componentProps), props) }, (props.key ? { key: props.key } : {})));
-    }
-    return React__default.cloneElement(child, props);
+/**
+ * In general, we try not to expose react-aria's Collections API to Plume users.
+ * The Collections API is how react-aria users pass data about collections of
+ * things using the built-in Item and Section components, which are abstract,
+ * metadata-only components that don't render anything but only serve to specify
+ * data.  For example, here's how you would use react-spectrum's Picker:
+ *
+ *   <Picker>
+ *     <Section title="Asia">
+ *       <Item key="taiwan">Taiwan</Item>
+ *       <Item key="japan">Japan</Item>
+ *       <Item key="china">China</Item>
+ *     </Section>
+ *     <Section title="Europe">
+ *       <Item key="germany">Germany</Item>
+ *       <Item key="france">France</Item>
+ *     </Section>
+ *   </Picker>
+ *
+ * You would re-use this same Item/Section components to pass similar things to
+ * Menu, Tabs, etc.
+ *
+ * For Plasmic, this API is too abstract.  The user has explicitly designed components
+ * like Select.Option and Select.OptionGroup, and it is weird that they don't actually
+ * use these components. It is more natural to do:
+ *
+ *   <Select>
+ *     <Select.OptionGroup title="Asia">
+ *       <Select.Option key="taiwan">Taiwan</Select>
+ *     </Select.OptionGroup>
+ *   </Select>
+ *
+ * For Plume, we let users directly use the components they designed, both to collect
+ * information and to perform actual rendering.  For example, for Plume,
+ * you'd use Select.Option instead of Item, and Select.OptionGroup instead of Section.
+ * This means that the Select.Option props will collect the same information Item
+ * does.
+ *
+ * A component like Select.Option then serves two purposes:
+ *
+ * 1. Allow users to specify the collection of data, like in the above example
+ *    Here, we're mainly interested in the props in those ReactElements so
+ *    we can pass the Item/Section data onto react-aria's APIs.  We are not
+ *    actually rendering these elements.
+ * 2. Once react-aria's Collections API has gone through them and built
+ *    Collection "nodes", we then create cloned versions of these elements
+ *    with the corresponding node passed in as a secret prop.  These ReactElements
+ *    are then actually used to _render_ the corresponding Option / OptionGroup.
+ *
+ * This file contains helper functions to help with implementing the above.
+ *
+ * Note also that most of the collections-based react-aria components expose
+ * a parallel API that accepts a list of "items" and a render prop, instead
+ * of list of Item/Section elements.  This is for efficiency, but we are opting
+ * to only support the composite-component pattern for now for simplicity.
+ */
+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 _a;
+    var ItemComponent = opts.ItemComponent, SectionComponent = opts.SectionComponent;
+    var disabledKeys = [];
+    var transform = function (item) {
+        var _a;
+        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 {
+            if (item.isDisabled) {
+                disabledKeys.push(item.value);
+            }
+            return (React__default.createElement(ItemComponent, { key: item.value, value: item.value, textValue: item.textValue, isDisabled: item.isDisabled }, (_a = item.label) !== null && _a !== void 0 ? _a : item.value));
+        }
+    };
+    return {
+        items: (_a = items === null || items === void 0 ? void 0 : items.map(function (x) { return transform(x); })) !== null && _a !== void 0 ? _a : [],
+        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
+ * ReactElement<ItemLikeProps|SectionLikeProps>[].
+ *
+ * Will also assign keys to items by their index in the collection,
+ * and collect the keys of disabled items.
+ */
+function deriveItemsFromChildren(children, opts) {
+    if (!children) {
+        return {
+            items: [],
+            disabledKeys: [],
+        };
+    }
+    var itemPlumeType = opts.itemPlumeType, sectionPlumeType = opts.sectionPlumeType, invalidChildError = opts.invalidChildError;
+    // For Plume items without an explicit key, we assign a key as the index
+    // of the collection.
+    var itemCount = 0;
+    var sectionCount = 0;
+    var ensureValue = function (element) {
+        if (!propInChild(element, "value")) {
+            if (opts.requireItemValue && PLUME_STRICT_MODE) {
+                throw new Error("Must specify a \"value\" prop for ".concat(getElementTypeName(element)));
+            }
+            else {
+                return cloneChild(element, { value: "".concat(itemCount++) });
+            }
+        }
+        else {
+            // Still increment count even if key is present, so that the
+            // auto-assigned key really reflects the index
+            itemCount++;
+            return element;
+        }
+    };
+    var disabledKeys = [];
+    var flattenedChildren = function (children) {
+        return toChildArray(children).flatMap(function (child) {
+            var _a;
+            if (React__default.isValidElement(child)) {
+                if (child.type === React__default.Fragment) {
+                    return flattenedChildren(child.props
+                        .children);
+                }
+                var type = getPlumeType(child);
+                if (type === itemPlumeType) {
+                    child = ensureValue(child);
+                    var childKey = getItemLikeKey(child);
+                    if (getChildProp(child, "isDisabled") && !!childKey) {
+                        disabledKeys.push(childKey);
+                    }
+                    return [child];
+                }
+                if (type === sectionPlumeType) {
+                    return [
+                        cloneChild(child, {
+                            // key of section doesn't actually matter, just needs
+                            // to be unique
+                            key: (_a = child.key) !== null && _a !== void 0 ? _a : "section-".concat(sectionCount++),
+                            children: flattenedChildren(getChildProp(child, "children")),
+                        }),
+                    ];
+                }
+            }
+            {
+                throw new Error(invalidChildError !== null && invalidChildError !== void 0 ? invalidChildError : "Unexpected child");
+            }
+        });
+    };
+    return { items: flattenedChildren(children), 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, invalidChildError = opts.invalidChildError, requireItemValue = opts.requireItemValue;
+    return React__default.useMemo(function () {
+        return deriveItemsFromChildren(children, {
+            itemPlumeType: itemPlumeType,
+            sectionPlumeType: sectionPlumeType,
+            invalidChildError: invalidChildError,
+            requireItemValue: requireItemValue,
+        });
+    }, [
+        children,
+        itemPlumeType,
+        sectionPlumeType,
+        invalidChildError,
+        requireItemValue,
+    ]);
+}
+/**
+ * Given a Collection node, create the React element that we should use
+ * to render it.
+ */
+function renderCollectionNode(node) {
+    // node.rendered should already have our item-like or section-like Plume
+    // component elements, so we just need to clone them with a secret
+    // _node prop that we use to render.
+    return cloneChild(node.rendered, {
+        _node: node,
+        key: node.key,
+    });
+}
+/**
+ * Renders a item-like or section-like Plume component element into an
+ * Item or a Section element.
+ */
+function renderAsCollectionChild(child, opts) {
+    var _a;
+    var plumeType = getPlumeType(child);
+    if (plumeType === opts.itemPlumeType) {
+        var option = child;
+        // We look at the children passed to the item-like element, and derive key
+        // or textValue from it if it is a string
+        var content = getChildProp(option, "children");
+        // The children render prop needs to return an <Item/>
+        return (React__default.createElement(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.
+        , { 
+            // 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.
+            key: getItemLikeKey(option), 
+            // textValue is either explicitly specified by the user, or we
+            // try to derive it if `content` is a string.
+            textValue: (_a = getChildProp(option, "textValue")) !== null && _a !== void 0 ? _a : (isString(content)
+                ? content
+                : propInChild(option, "value")
+                    ? getChildProp(option, "value")
+                    : option.key), "aria-label": getChildProp(option, "aria-label") }, option));
+    }
+    else {
+        var group = child;
+        return (React__default.createElement(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.
+        , { 
+            // 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.
+            title: group, "aria-label": getChildProp(group, "aria-label"), 
+            // We are flattening and deriving the descendant Options as items here.
+            // group.props.children should've already been cleaned up by
+            // deriveItemsFromChildren()
+            items: getChildProp(group, "children") }, function (c) { return renderAsCollectionChild(c, opts); }));
+    }
+}
+function getItemLikeKey(element) {
+    var _a;
+    return (_a = getChildProp(element, "value")) !== null && _a !== void 0 ? _a : element.key;
+}
+// PlasmicLoader-aware function to get prop from child.
+function getChildProp(child, prop) {
+    return "componentProps" in child.props
+        ? child.props.componentProps[prop]
+        : child.props[prop];
+}
+// PlasmicLoader-aware function to check `if (prop in element.props)`.
+function propInChild(child, prop) {
+    return "componentProps" in child.props
+        ? prop in child.props.componentProps
+        : prop in child.props;
+}
+// PlasmicLoader-aware function to clone React element.
+function cloneChild(child, props) {
+    if (child.type.getPlumeType) {
+        // If React element has getPlumeType(), assume that it is PlasmicLoader,
+        // so add nodeProps to componentProps instead of element props.
+        return React__default.cloneElement(child, __assign({ componentProps: __assign(__assign({}, child.props.componentProps), props) }, (props.key ? { key: props.key } : {})));
+    }
+    return React__default.cloneElement(child, props);
 }
 
 export { renderAsCollectionChild as a, useDerivedItems as b, getChildProp as g, renderCollectionNode as r, useDerivedItemsFromChildren as u };
-//# sourceMappingURL=collection-utils-0967eaf0.js.map
+//# sourceMappingURL=collection-utils-2f28e4eb.js.map