@djangocfg/ui-nextjs 2.1.268 → 2.1.271

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-nextjs",
-  "version": "2.1.268",
+  "version": "2.1.271",
   "description": "Next.js UI component library with Radix UI primitives, Tailwind CSS styling, charts, and form components",
   "keywords": [
     "ui-components",
@@ -85,11 +85,11 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.268",
-    "@djangocfg/i18n": "^2.1.268",
-    "@djangocfg/nextjs": "^2.1.268",
-    "@djangocfg/ui-core": "^2.1.268",
-    "@djangocfg/ui-tools": "^2.1.268",
+    "@djangocfg/api": "^2.1.271",
+    "@djangocfg/i18n": "^2.1.271",
+    "@djangocfg/nextjs": "^2.1.271",
+    "@djangocfg/ui-core": "^2.1.271",
+    "@djangocfg/ui-tools": "^2.1.271",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "consola": "^3.4.2",
@@ -112,7 +112,7 @@
     "react-chartjs-2": "^5.3.0"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.268",
+    "@djangocfg/typescript-config": "^2.1.271",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-slot": "^1.2.4",
     "@types/node": "^24.7.2",

package/src/components/breadcrumb-navigation.tsx

@@ -1,65 +1,74 @@
 import { Link } from '../lib/navigation';
 import React from 'react';
 
-// cn is available for future use
-// import { cn } from '@djangocfg/ui-core/lib';
-
 import {
     Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage,
     BreadcrumbSeparator
 } from './breadcrumb';
 
 export interface BreadcrumbItem {
-  /** Display text for the breadcrumb */
   label: string;
-  /** URL to navigate to. If not provided, item will be rendered as current page */
   href?: string;
-  /** Whether this item is the current page (will be rendered as BreadcrumbPage) */
+  /**
+   * Force render as current page (non-interactive, aria-current="page").
+   * By default only the last item without href is treated as current page.
+   */
   isCurrentPage?: boolean;
-  /** Optional icon to display before the label */
   icon?: React.ReactNode;
 }
 
 export interface BreadcrumbNavigationProps {
-  /** Array of breadcrumb items */
   items: BreadcrumbItem[];
-  /** Custom separator between items */
   separator?: React.ReactNode;
-  /** Maximum number of items to show before collapsing with ellipsis */
+  /**
+   * Max visible items (excluding the ellipsis slot) before collapsing.
+   * Must be >= 2. Defaults to 5.
+   */
   maxItems?: number;
-  /** Custom className for the breadcrumb container */
   className?: string;
-  /** Whether to use Next.js Link component for navigation */
-  useNextLink?: boolean;
 }
 
+type DisplayEntry =
+  | { type: 'item'; item: BreadcrumbItem; originalIndex: number }
+  | { type: 'ellipsis' };
+
 export const BreadcrumbNavigation: React.FC<BreadcrumbNavigationProps> = ({
   items,
   separator,
   maxItems = 5,
   className,
-  useNextLink = true,
 }) => {
-  // Handle empty or single item cases
-  if (!items || items.length === 0) {
-    return null;
-  }
-
-  // Determine which items to show based on maxItems
-  const shouldCollapse = items.length > maxItems;
-  let displayItems: BreadcrumbItem[] = items;
-
-  if (shouldCollapse && items.length > 0) {
-    // Show first item, ellipsis, and last few items
-    if(items.length > 0) {
-        const firstItem = items[0]!;
-        const lastItems = items.slice(-(maxItems - 2)).filter(Boolean);
-        displayItems = [firstItem, ...lastItems];
+  if (!items || items.length === 0) return null;
+
+  const clampedMax = Math.max(2, maxItems);
+
+  // Build the list of entries to render
+  const entries: DisplayEntry[] = (() => {
+    if (items.length <= clampedMax) {
+      return items.map((item, i) => ({ type: 'item' as const, item, originalIndex: i }));
     }
-  }
+    // Always show first item, ellipsis, then last (clampedMax - 2) items
+    // e.g. maxItems=4 → show 1 + ellipsis + 2 last = 4 visible items + ellipsis
+    const tailCount = Math.max(1, clampedMax - 2);
+    const tail = items.slice(-tailCount).map((item, i) => ({
+      type: 'item' as const,
+      item,
+      originalIndex: items.length - tailCount + i,
+    }));
+    return [
+      { type: 'item' as const, item: items[0]!, originalIndex: 0 },
+      { type: 'ellipsis' as const },
+      ...tail,
+    ];
+  })();
 
-  const renderBreadcrumbItem = (item: BreadcrumbItem, index: number, isLast: boolean) => {
-    const isCurrentPage = item.isCurrentPage || isLast || !item.href;
+  const resolveIsCurrentPage = (item: BreadcrumbItem, originalIndex: number): boolean => {
+    if (item.isCurrentPage !== undefined) return item.isCurrentPage;
+    return originalIndex === items.length - 1;
+  };
+
+  const renderItem = (item: BreadcrumbItem, originalIndex: number) => {
+    const current = resolveIsCurrentPage(item, originalIndex);
 
     const content = (
       <>
@@ -68,23 +77,23 @@ export const BreadcrumbNavigation: React.FC<BreadcrumbNavigationProps> = ({
       </>
     );
 
-    if (isCurrentPage) {
+    if (current) {
       return (
-        <BreadcrumbItem key={`${item.label}-${index}`}>
+        <BreadcrumbItem key={`item-${originalIndex}`}>
           <BreadcrumbPage>{content}</BreadcrumbPage>
         </BreadcrumbItem>
       );
     }
 
     return (
-      <BreadcrumbItem key={`${item.label}-${index}`}>
-        <BreadcrumbLink asChild={useNextLink}>
-          {useNextLink ? (
-            <Link href={item.href!}>{content}</Link>
-          ) : (
-            <a href={item.href!}>{content}</a>
-          )}
-        </BreadcrumbLink>
+      <BreadcrumbItem key={`item-${originalIndex}`}>
+        {item.href ? (
+          <BreadcrumbLink href={item.href}>
+            <Link href={item.href}>{content}</Link>
+          </BreadcrumbLink>
+        ) : (
+          <BreadcrumbLink>{content}</BreadcrumbLink>
+        )}
       </BreadcrumbItem>
     );
   };
@@ -92,28 +101,24 @@ export const BreadcrumbNavigation: React.FC<BreadcrumbNavigationProps> = ({
   return (
     <Breadcrumb className={className}>
       <BreadcrumbList>
-        {displayItems.map((item, index) => {
-          const isLast = index === displayItems.length - 1;
-          const isFirst = index === 0;
-          
-          // Show ellipsis after first item if we collapsed items
-          if (shouldCollapse && isFirst && displayItems.length > 2) {
+        {entries.map((entry, displayIndex) => {
+          const isFirst = displayIndex === 0;
+
+          if (entry.type === 'ellipsis') {
             return (
-              <React.Fragment key={`fragment-${index}`}>
-                {renderBreadcrumbItem(item, index, isLast)}
+              <React.Fragment key="ellipsis">
                 <BreadcrumbSeparator>{separator}</BreadcrumbSeparator>
                 <BreadcrumbItem>
                   <BreadcrumbEllipsis />
                 </BreadcrumbItem>
-                {!isLast && <BreadcrumbSeparator>{separator}</BreadcrumbSeparator>}
               </React.Fragment>
             );
           }
 
           return (
-            <React.Fragment key={`fragment-${index}`}>
-              {renderBreadcrumbItem(item, index, isLast)}
-              {!isLast && <BreadcrumbSeparator>{separator}</BreadcrumbSeparator>}
+            <React.Fragment key={`fragment-${entry.originalIndex}`}>
+              {!isFirst && <BreadcrumbSeparator>{separator}</BreadcrumbSeparator>}
+              {renderItem(entry.item, entry.originalIndex)}
             </React.Fragment>
           );
         })}