@djangocfg/layouts 2.1.542 → 2.1.544

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.542",
+  "version": "2.1.544",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -90,11 +90,11 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/analytics": "^2.1.542",
-    "@djangocfg/api": "^2.1.542",
-    "@djangocfg/devtools": "^2.1.542",
-    "@djangocfg/i18n": "^2.1.542",
-    "@djangocfg/ui-core": "^2.1.542",
+    "@djangocfg/analytics": "^2.1.544",
+    "@djangocfg/api": "^2.1.544",
+    "@djangocfg/devtools": "^2.1.544",
+    "@djangocfg/i18n": "^2.1.544",
+    "@djangocfg/ui-core": "^2.1.544",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -124,12 +124,12 @@
     "uuid": "^11.1.1"
   },
   "devDependencies": {
-    "@djangocfg/analytics": "^2.1.542",
-    "@djangocfg/api": "^2.1.542",
-    "@djangocfg/devtools": "^2.1.542",
-    "@djangocfg/i18n": "^2.1.542",
-    "@djangocfg/typescript-config": "^2.1.542",
-    "@djangocfg/ui-core": "^2.1.542",
+    "@djangocfg/analytics": "^2.1.544",
+    "@djangocfg/api": "^2.1.544",
+    "@djangocfg/devtools": "^2.1.544",
+    "@djangocfg/i18n": "^2.1.544",
+    "@djangocfg/typescript-config": "^2.1.544",
+    "@djangocfg/ui-core": "^2.1.544",
     "@storybook/react-vite": "^10.5.0",
     "@types/node": "^25.9.5",
     "@types/react": "19.2.15",

package/src/layouts/PrivateLayout/components/SidebarNavGroup.tsx

@@ -25,6 +25,7 @@ import { usePrivateLayoutContext } from '../context';
 import { useShellVisualState } from '../hooks';
 import type { SidebarGroupConfig } from '../types';
 import { SidebarNavItem } from './SidebarNavItem';
+import { shallowEqualBy } from '../../../utils/shallowEqualBy';
 
 interface SidebarNavGroupProps {
   group: SidebarGroupConfig;
@@ -164,18 +165,17 @@ function groupShallowEqual(a: SidebarGroupConfig, b: SidebarGroupConfig): boolea
     a.icon === b.icon &&
     a.hideItemIcons === b.hideItemIcons &&
     a.dynamic === b.dynamic &&
-    a.items.length === b.items.length &&
-    a.items.every((ai, i) => {
-      const bi = b.items[i];
-      return (
+    shallowEqualBy(
+      a.items,
+      b.items,
+      (ai, bi) =>
         ai.href === bi.href &&
         ai.label === bi.label &&
         ai.icon === bi.icon &&
         ai.badge === bi.badge &&
         ai.badgeVariant === bi.badgeVariant &&
-        ai.tooltip === bi.tooltip
-      );
-    })
+        ai.tooltip === bi.tooltip,
+    )
   );
 }
 

package/src/layouts/PublicLayout/hooks/useResponsiveOverflow.ts

@@ -58,17 +58,18 @@ export function useResponsiveOverflow({
     const available = container.clientWidth;
     if (available <= 0) return;
 
-    const widths: number[] = [];
-    for (let i = 0; i < total; i++) {
+    // Built with `from` rather than an index loop so `widths` and `total` cannot
+    // disagree on length — the two reads below then need no bounds check.
+    const widths = Array.from({ length: total }, (_, i) => {
       const el = itemElsRef.current[i];
-      widths.push(el ? Math.ceil(el.getBoundingClientRect().width) : 0);
-    }
+      return el ? Math.ceil(el.getBoundingClientRect().width) : 0;
+    });
 
     // Try to fit all first.
-    let usedAll = 0;
-    for (let i = 0; i < total; i++) {
-      usedAll += widths[i] + (i > 0 ? gap : 0);
-    }
+    const usedAll = widths.reduce(
+      (sum, width, i) => sum + width + (i > 0 ? gap : 0),
+      0,
+    );
     if (usedAll <= available) {
       setVisibleCount(total);
       setMeasured(true);
@@ -79,8 +80,10 @@ export function useResponsiveOverflow({
     const budget = available - moreWidth - gap;
     let used = 0;
     let fit = 0;
-    for (let i = 0; i < total; i++) {
-      const next = used + widths[i] + (i > 0 ? gap : 0);
+    // Iterating values, not indices: this loop breaks early, so `reduce` does
+    // not fit, and `entries()` still keeps each width tied to its position.
+    for (const [i, width] of widths.entries()) {
+      const next = used + width + (i > 0 ? gap : 0);
       if (next > budget) break;
       used = next;
       fit = i + 1;

package/src/layouts/PublicLayout/primitives/NavActions.tsx

@@ -10,6 +10,7 @@ import { UserMenu } from '../components/UserMenu';
 import type { UserMenuConfig } from '../../types';
 
 import { NavActionItem, type NavAction } from './NavActionItem';
+import { shallowEqualBy } from '../../../utils/shallowEqualBy';
 
 interface NavActionsProps {
   userMenu?: UserMenuConfig;
@@ -133,18 +134,15 @@ function NavActionsRaw({
  * skip on reference churn from parent re-renders.
  */
 function actionsEqual(a?: NavAction[], b?: NavAction[]): boolean {
-  if (a === b) return true;
-  if (!a || !b) return false;
-  if (a.length !== b.length) return false;
-  return a.every((ai, i) => {
-    const bi = b[i];
-    return (
+  return shallowEqualBy(
+    a,
+    b,
+    (ai, bi) =>
       ai.label === bi.label &&
       ai.href === bi.href &&
       ai.variant === bi.variant &&
-      ai.external === bi.external
-    );
-  });
+      ai.external === bi.external,
+  );
 }
 
 /**

package/src/layouts/PublicLayout/primitives/NavDesktopItems.tsx

@@ -8,6 +8,7 @@ import { Button, Link } from '@djangocfg/ui-core/components';
 import { cn } from '@djangocfg/ui-core/lib';
 
 import type { NavigationItem } from '../../types';
+import { navItemsShallowEqual } from '../../../utils/navItemsShallowEqual';
 import type { UseDropdownMenuReturn } from '../hooks/useDropdownMenu';
 import { useResponsiveOverflow } from '../hooks/useResponsiveOverflow';
 import type { PublicDesktopDropdownRenderer } from '../navbarTypes';
@@ -317,28 +318,6 @@ function NavDesktopItemsRaw({
   );
 }
 
-/**
- * Shallow equality for NavigationItem arrays. Compares href, label, external
- * and one-level-deep sub-items so that nav label/badge changes re-render,
- * but object-reference churn from parent is ignored.
- */
-function navItemsShallowEqual(a: NavigationItem[], b: NavigationItem[]): boolean {
-  if (a === b) return true;
-  if (a.length !== b.length) return false;
-  return a.every((ai, i) => {
-    const bi = b[i];
-    if (ai.href !== bi.href || ai.label !== bi.label || ai.external !== bi.external) return false;
-    if ((ai.items?.length ?? 0) !== (bi.items?.length ?? 0)) return false;
-    if (ai.items) {
-      return ai.items.every((sub, j) => {
-        const bsub = bi.items![j];
-        return sub.href === bsub.href && sub.label === bsub.label && sub.external === bsub.external;
-      });
-    }
-    return true;
-  });
-}
-
 /**
  * Memoised desktop navigation row. Re-renders only when:
  * - the items array content changes (via navItemsShallowEqual),

package/src/layouts/PublicLayout/shared/NavbarShell.tsx

@@ -29,6 +29,7 @@ import { useIsTabletOrBelow } from '@djangocfg/ui-core/hooks';
 import { cn } from '@djangocfg/ui-core/lib';
 
 import { usePathnameWithoutLocale } from '../../../hooks';
+import { navItemsShallowEqual } from '../../../utils/navItemsShallowEqual';
 import { LocaleSwitcher } from '../../_components/LocaleSwitcher';
 import { useLayoutI18nOptional } from '../../AppLayout/LayoutI18nProvider';
 import { usePublicLayoutOptional } from '../context';
@@ -420,28 +421,6 @@ function NavbarShellRaw(props: NavbarShellProps) {
   );
 }
 
-/**
- * Shallow equality for NavigationItem arrays. Compares href, label, external
- * and one-level-deep sub-items so that nav label/badge changes re-render,
- * but object-reference churn from parent is ignored.
- */
-function navItemsShallowEqual(a: NavigationItem[], b: NavigationItem[]): boolean {
-  if (a === b) return true;
-  if (a.length !== b.length) return false;
-  return a.every((ai, i) => {
-    const bi = b[i];
-    if (ai.href !== bi.href || ai.label !== bi.label || ai.external !== bi.external) return false;
-    if ((ai.items?.length ?? 0) !== (bi.items?.length ?? 0)) return false;
-    if (ai.items) {
-      return ai.items.every((sub, j) => {
-        const bsub = bi.items![j];
-        return sub.href === bsub.href && sub.label === bsub.label && sub.external === bsub.external;
-      });
-    }
-    return true;
-  });
-}
-
 /**
  * Memoised navbar orchestrator. Re-renders only when any config prop changes
  * (variant, position, nav items, actions, slots, etc.). The heavy inner JSX

package/src/utils/navItemsShallowEqual.ts

@@ -0,0 +1,34 @@
+import type { NavigationItem } from '../layouts/types/ui.types';
+import { shallowEqualBy } from './shallowEqualBy';
+
+/**
+ * Shallow equality for NavigationItem arrays. Compares href, label, external
+ * and one-level-deep sub-items so that nav label/badge changes re-render,
+ * but object-reference churn from parent is ignored.
+ *
+ * Lived as two byte-identical copies in NavbarShell and NavDesktopItems.
+ * The sub-item pass used `bi.items![j]`, an assertion resting on the length
+ * comparison two lines above it; `shallowEqualBy` makes that structural
+ * instead, so the non-null assertion is gone rather than relocated.
+ */
+export function navItemsShallowEqual(
+  a: NavigationItem[],
+  b: NavigationItem[],
+): boolean {
+  return shallowEqualBy(
+    a,
+    b,
+    (ai, bi) =>
+      ai.href === bi.href &&
+      ai.label === bi.label &&
+      ai.external === bi.external &&
+      shallowEqualBy(
+        ai.items,
+        bi.items,
+        (sub, bsub) =>
+          sub.href === bsub.href &&
+          sub.label === bsub.label &&
+          sub.external === bsub.external,
+      ),
+  );
+}

package/src/utils/shallowEqualBy.ts

@@ -0,0 +1,29 @@
+/**
+ * Pairwise array comparison for `React.memo` props.
+ *
+ * Four hand-rolled copies of this existed across the nav layouts — two of them
+ * (`navItemsShallowEqual` in NavbarShell and NavDesktopItems) byte-identical.
+ * Each wrote `const bi = b[i]` inside `a.every`, which is safe only because the
+ * length was compared on the line above; under `strict` that produced 26 of the
+ * package's 28 errors, all asking the same question about the same missing
+ * connection between the guard and the index.
+ *
+ * `entries()` carries the pair, so an element and its counterpart are produced
+ * together and neither can be `undefined`. The guard is not restated — it is
+ * expressed once, in the shape of the loop.
+ */
+export function shallowEqualBy<T>(
+  a: readonly T[] | undefined,
+  b: readonly T[] | undefined,
+  equal: (x: T, y: T) => boolean,
+): boolean {
+  if (a === b) return true;
+  if (!a || !b || a.length !== b.length) return false;
+  for (const [index, left] of a.entries()) {
+    const right = b[index];
+    // `index` comes from `a.entries()` and the lengths matched, so `right`
+    // exists. The check is what proves it to the compiler; it is not reachable.
+    if (right === undefined || !equal(left, right)) return false;
+  }
+  return true;
+}