@jsenv/navi 0.16.47 → 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,
@@ -23118,20 +23139,22 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
   .navi_group {
     --border-width: 1px;
 
-    > * {
-      position: relative;
-    }
     > *:hover,
     > *[data-hover] {
+      position: relative;
       z-index: 1;
     }
     > *:focus-visible,
     > *[data-focus-visible] {
+      position: relative;
       z-index: 1;
     }
 
-    /* Horizontal (default): Cumulative positioning for border overlap */
+    /* Horizontal (default): Cumulative margin for border overlap */
     &:not([data-vertical]) {
+      > *:not(:first-child) {
+        margin-left: calc(var(--border-width) * -1);
+      }
       > *:first-child:not(:only-child) {
         border-top-right-radius: 0 !important;
         border-bottom-right-radius: 0 !important;
@@ -23164,8 +23187,11 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
       }
     }
 
-    /* Vertical: Cumulative positioning for border overlap */
+    /* Vertical: Cumulative margin for border overlap */
     &[data-vertical] {
+      > *:not(:first-child) {
+        margin-top: calc(var(--border-width) * -1);
+      }
       > *:first-child:not(:only-child) {
         border-bottom-right-radius: 0 !important;
         border-bottom-left-radius: 0 !important;
@@ -23206,55 +23232,19 @@ const Group = ({
   vertical = row,
   ...props
 }) => {
-  const groupRef = useRef(null);
   if (typeof borderWidth === "string") {
     borderWidth = parseFloat(borderWidth);
   }
   const borderWidthCssValue = typeof borderWidth === "number" ? `${borderWidth}px` : borderWidth;
-  useLayoutEffect(() => {
-    const group = groupRef.current;
-    if (!group) {
-      return;
-    }
-    const {
-      children
-    } = group;
-    if (children.length === 0) {
-      return;
-    }
-    let i = 0;
-    while (i < children.length) {
-      const child = children[i];
-      if (i === 0) {
-        // First child stays in place
-        if (vertical) {
-          child.style.top = "";
-        } else {
-          child.style.left = "";
-        }
-      } else {
-        // Subsequent children get cumulative positioning
-        const offset = i * borderWidth * -1;
-        if (vertical) {
-          child.style.top = borderWidth ? `${offset}px` : "";
-          child.style.left = "";
-        } else {
-          child.style.left = borderWidth ? `${offset}px` : "";
-          child.style.top = "";
-        }
-      }
-      i++;
-    }
-  }, [children, borderWidth, vertical]);
   return jsx(Box, {
-    ref: groupRef,
     baseClassName: "navi_group",
     "data-vertical": vertical ? "" : undefined,
     row: row,
+    ...props,
     style: {
-      "--border-width": borderWidthCssValue
+      "--border-width": borderWidthCssValue,
+      ...props.style
     },
-    ...props,
     children: children
   });
 };