@plasmicapp/react-web 0.2.90 → 0.2.94

package/skinny/dist/collection-utils-b0b8f30e.js

@@ -1,238 +1,291 @@
-import { a as __assign, d as isString } from './tslib.es6-00014098.js';
-import React__default from 'react';
-import { Item, Section } from 'react-stately';
-import { t as toChildArray, g as getElementTypeName } from './react-utils-118d8539.js';
-import { a as getPlumeType, P as PLUME_STRICT_MODE } from './props-utils-c632595f.js';
+import { a as __assign, d as isString } from "./tslib.es6-00014098.js";
+import React__default from "react";
+import { Item, Section } from "react-stately";
+import {
+  t as toChildArray,
+  g as getElementTypeName,
+} from "./react-utils-118d8539.js";
+import {
+  a as getPlumeType,
+  P as PLUME_STRICT_MODE,
+} from "./props-utils-c632595f.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.
- */
-/**
- * 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 " + getElementTypeName(element));
-            }
-            else {
-                return cloneChild(element, { value: "" + 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-" + sectionCount++,
-                            children: flattenedChildren(getChildProp(child, "children")),
-                        }),
-                    ];
-                }
-            }
-            {
-                throw new Error(invalidChildError !== null && invalidChildError !== void 0 ? invalidChildError : "Unexpected child");
-            }
-        });
-    };
-    return { items: flattenedChildren(children), disabledKeys: disabledKeys };
-}
-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.
+ */
+/**
+ * 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 ' + getElementTypeName(element)
+        );
+      } else {
+        return cloneChild(element, { value: "" + 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-" + sectionCount++,
+              children: flattenedChildren(getChildProp(child, "children")),
+            }),
+          ];
+        }
+      }
+      {
+        throw new Error(
+          invalidChildError !== null && invalidChildError !== void 0
+            ? invalidChildError
+            : "Unexpected child"
+        );
+      }
+    });
+  };
+  return { items: flattenedChildren(children), disabledKeys: disabledKeys };
+}
+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, getChildProp as g, renderCollectionNode as r, useDerivedItemsFromChildren as u };
+export {
+  renderAsCollectionChild as a,
+  getChildProp as g,
+  renderCollectionNode as r,
+  useDerivedItemsFromChildren as u,
+};
 //# sourceMappingURL=collection-utils-b0b8f30e.js.map

package/skinny/dist/index-common.d.ts

@@ -11,3 +11,4 @@ export { createUseScreenVariants } from "./render/screen-variants";
 export { PlasmicRootProvider, useIsSSR } from "./render/ssr";
 export { Stack } from "./render/Stack";
 export { useTrigger } from "./render/triggers";
+export { Trans, genTranslatableString } from "./render/translation";

package/skinny/dist/index.js

@@ -6,7 +6,7 @@ import { _ as __rest, a as __assign, b as __spreadArray, o as omit, p as pick, i
 export { o as omit, p as pick } from './tslib.es6-d26ffe68.js';
 export { PlasmicImg } from './render/PlasmicImg/index.js';
 import ReactDOM__default from 'react-dom';
-export { P as PlasmicRootProvider, u as useIsSSR } from './ssr-d2fd94f2.js';
+export { P as PlasmicRootProvider, T as Trans, g as genTranslatableString, u as useIsSSR } from './ssr-a8081074.js';
 import { useFocusRing } from 'react-aria';
 
 function renderStack(as, props, hasGap, ref) {
@@ -383,7 +383,7 @@ function PlasmicIcon(props) {
     return React.createElement(PlasmicIconType, __assign({}, rest));
 }
 
-function PlasmicLink(props) {
+var PlasmicLink = React__default.forwardRef(function PlasmicLink(props, ref) {
     // props.href is required for nextjs; if no props.href,
     // then we just render the default anchor element
     if (props.platform === "nextjs" && props.href) {
@@ -396,13 +396,13 @@ function PlasmicLink(props) {
             "prefetch",
             "locale",
         ];
-        return React__default.createElement(props.component, pick.apply(void 0, __spreadArray([props], nextjsProps)), React__default.createElement("a", __assign({}, omit.apply(void 0, __spreadArray([props, "component", "platform"], nextjsProps)))));
+        return React__default.createElement(props.component, pick.apply(void 0, __spreadArray([props], nextjsProps)), React__default.createElement("a", __assign({}, omit.apply(void 0, __spreadArray([props, "component", "platform"], nextjsProps)), { ref: ref })));
     }
     if (props.platform === "gatsby" && isInternalHref(props.href)) {
-        return React__default.createElement(props.component, __assign(__assign({}, omit(props, "component", "platform", "href")), { to: props.href }));
+        return React__default.createElement(props.component, __assign(__assign({}, omit(props, "component", "platform", "href")), { to: props.href, ref: ref }));
     }
-    return React__default.createElement("a", __assign({}, omit(props, "component", "platform")));
-}
+    return React__default.createElement("a", __assign({}, omit(props, "component", "platform"), { ref: ref }));
+});
 function isInternalHref(href) {
     return /^\/(?!\/)/.test(href);
 }