@jsenv/navi 0.16.48 → 0.16.49

package/dist/jsenv_navi.js

@@ -6090,6 +6090,7 @@ const Box = props => {
     // so this prop is useful only when transition is enabled from "outside" (via CSS)
     preventInitialTransition,
     children,
+    separator,
     ...rest
   } = props;
   const defaultRef = useRef();
@@ -6131,6 +6132,10 @@ const Box = props => {
   } else {
     boxFlow = defaultDisplay;
   }
+  const remainingPropKeySet = new Set(Object.keys(rest));
+  // some props not destructured but that are neither
+  // style props, nor should be forwarded to the child
+  remainingPropKeySet.delete("ref");
   const innerClassName = withPropsClassName(baseClassName, className);
   const selfForwardedProps = {};
   const childForwardedProps = {};
@@ -6320,13 +6325,7 @@ const Box = props => {
         assignStyle(value, key, styleContext, boxStyles, "baseStyle");
       }
     }
-    const remainingPropKeyArray = Object.keys(rest);
-    for (const propName of remainingPropKeyArray) {
-      if (propName === "ref") {
-        // some props not destructured but that are neither
-        // style props, nor should be forwarded to the child
-        continue;
-      }
+    for (const propName of remainingPropKeySet) {
       const propValue = rest[propName];
       assignStyle(propValue, propName, styleContext, boxStyles, "prop");
     }
@@ -6395,6 +6394,28 @@ const Box = props => {
   } else {
     innerChildren = children;
   }
+  if (separator) {
+    if (Array.isArray(innerChildren)) {
+      const childCount = innerChildren.length;
+      if (childCount > 1) {
+        const childrenWithSeparators = [];
+        let i = 0;
+        while (true) {
+          const child = innerChildren[i];
+          childrenWithSeparators.push(child);
+          i++;
+          if (i === childCount) {
+            break;
+          }
+          // Support function separators that receive separator index
+          const separatorElement = typeof separator === "function" ? separator(i - 1) // i-1 because i was incremented after pushing child
+          : separator;
+          childrenWithSeparators.push(separatorElement);
+        }
+        innerChildren = childrenWithSeparators;
+      }
+    }
+  }
   return jsx(TagName, {
     ref: ref,
     className: innerClassName,