@papernote/ui 1.7.0 → 1.7.2

package/dist/index.js

@@ -7279,16 +7279,113 @@ function Hide({ children, above, below, only, className = '' }) {
     return (jsxRuntime.jsx("div", { className: `${visibilityClasses} ${className}`, children: children }));
 }
 
+/**
+ * Hook to detect breadcrumb navigation and trigger callbacks.
+ * Use this in host components to reset state when a breadcrumb is clicked.
+ *
+ * @param onReset - Callback fired when breadcrumb navigation is detected
+ *
+ * @example
+ * function ProductsPage() {
+ *   const [viewMode, setViewMode] = useState<'list' | 'detail'>('list');
+ *
+ *   // Automatically reset to list view when breadcrumb is clicked
+ *   useBreadcrumbReset(() => setViewMode('list'));
+ *
+ *   // ... rest of component
+ * }
+ */
+function useBreadcrumbReset(onReset) {
+    const location = reactRouterDom.useLocation();
+    const lastResetRef = React.useRef(null);
+    React.useEffect(() => {
+        const state = location.state;
+        if (state?.breadcrumbReset && state.breadcrumbReset !== lastResetRef.current) {
+            lastResetRef.current = state.breadcrumbReset;
+            onReset();
+        }
+    }, [location.state, onReset]);
+}
+/**
+ * Breadcrumbs navigation component.
+ *
+ * When a breadcrumb with href is clicked:
+ * - If navigating to a different route: standard navigation occurs
+ * - If navigating to the same route: navigation state is updated with a unique key,
+ *   which can be used by host apps to detect "reset" navigation via useLocation().state
+ *
+ * @example
+ * // Basic usage
+ * <Breadcrumbs items={[
+ *   { label: 'Home', href: '/' },
+ *   { label: 'Products', href: '/products' },
+ *   { label: 'Widget' }  // Current page (no href)
+ * ]} />
+ *
+ * @example
+ * // Host app detecting breadcrumb navigation for state reset
+ * function ProductsPage() {
+ *   const location = useLocation();
+ *   const [viewMode, setViewMode] = useState<'list' | 'detail'>('list');
+ *
+ *   // Reset to list view when breadcrumb navigation occurs
+ *   useEffect(() => {
+ *     if (location.state?.breadcrumbReset) {
+ *       setViewMode('list');
+ *     }
+ *   }, [location.state?.breadcrumbReset]);
+ *
+ *   // ... rest of component
+ * }
+ */
 function Breadcrumbs({ items, showHome = true }) {
-    return (jsxRuntime.jsxs("nav", { "aria-label": "Breadcrumb", className: "flex items-center space-x-2 text-sm", children: [showHome && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactRouterDom.Link, { to: "/", className: "text-ink-500 hover:text-ink-900 transition-colors", "aria-label": "Home", children: jsxRuntime.jsx(lucideReact.Home, { className: "h-4 w-4" }) }), items.length > 0 && jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 text-ink-400" })] })), items.map((item, index) => {
+    const navigate = reactRouterDom.useNavigate();
+    const location = reactRouterDom.useLocation();
+    /**
+     * Handle breadcrumb click with same-route detection.
+     * When clicking a breadcrumb that points to the current route,
+     * we navigate with state to trigger a reset in the host component.
+     */
+    const handleBreadcrumbClick = (e, href, onClick) => {
+        // Always call onClick if provided (for custom actions)
+        onClick?.();
+        // Check if we're navigating to the same base path
+        const targetPath = href.split('?')[0].split('#')[0];
+        const currentPath = location.pathname;
+        if (targetPath === currentPath) {
+            // Same route - prevent default Link behavior and use navigate with state
+            e.preventDefault();
+            navigate(href, {
+                state: {
+                    breadcrumbReset: Date.now(),
+                    from: 'breadcrumb'
+                },
+                replace: true
+            });
+        }
+        // Different route - let the Link handle it normally
+    };
+    return (jsxRuntime.jsxs("nav", { "aria-label": "Breadcrumb", className: "flex items-center space-x-2 text-sm", children: [showHome && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactRouterDom.Link, { to: "/", className: "text-ink-500 hover:text-ink-900 transition-colors", "aria-label": "Home", onClick: (e) => handleBreadcrumbClick(e, '/'), children: jsxRuntime.jsx(lucideReact.Home, { className: "h-4 w-4" }) }), items.length > 0 && jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 text-ink-400" })] })), items.map((item, index) => {
                 const isLast = index === items.length - 1;
                 const isActive = isLast;
-                return (jsxRuntime.jsxs(React.Fragment, { children: [item.href && !isActive ? (jsxRuntime.jsxs(reactRouterDom.Link, { to: item.href, className: "flex items-center gap-2 text-ink-500 hover:text-ink-900 hover:underline transition-colors", children: [item.icon && jsxRuntime.jsx("span", { className: "flex-shrink-0", children: item.icon }), jsxRuntime.jsx("span", { children: item.label })] })) : (jsxRuntime.jsxs("span", { className: `
-                  flex items-center gap-2 px-2 py-1 rounded-md transition-colors
-                  ${isActive
-                                ? 'bg-accent-50 text-accent-900 font-semibold'
-                                : 'text-ink-700 font-medium'}
-                `, "aria-current": isActive ? 'page' : undefined, children: [item.icon && jsxRuntime.jsx("span", { className: "flex-shrink-0", children: item.icon }), jsxRuntime.jsx("span", { children: item.label })] })), !isLast && jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 text-ink-400" })] }, index));
+                const content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item.icon && jsxRuntime.jsx("span", { className: "flex-shrink-0", children: item.icon }), jsxRuntime.jsx("span", { children: item.label })] }));
+                const renderBreadcrumb = () => {
+                    // Active item (last item) - always render as non-clickable span
+                    if (isActive) {
+                        return (jsxRuntime.jsx("span", { className: "flex items-center gap-2 px-2 py-1 rounded-md bg-accent-50 text-accent-900 font-semibold transition-colors", "aria-current": "page", children: content }));
+                    }
+                    // Has href - render as Link with same-route detection
+                    if (item.href) {
+                        return (jsxRuntime.jsx(reactRouterDom.Link, { to: item.href, onClick: (e) => handleBreadcrumbClick(e, item.href, item.onClick), className: "flex items-center gap-2 text-ink-500 hover:text-ink-900 hover:underline transition-colors", children: content }));
+                    }
+                    // Only onClick (no href) - render as button
+                    if (item.onClick) {
+                        return (jsxRuntime.jsx("button", { type: "button", onClick: item.onClick, className: "flex items-center gap-2 text-ink-500 hover:text-ink-900 hover:underline transition-colors bg-transparent border-none cursor-pointer p-0", children: content }));
+                    }
+                    // Neither href nor onClick - render as non-clickable span
+                    return (jsxRuntime.jsx("span", { className: "flex items-center gap-2 text-ink-700 font-medium", children: content }));
+                };
+                return (jsxRuntime.jsxs(React.Fragment, { children: [renderBreadcrumb(), !isLast && jsxRuntime.jsx(lucideReact.ChevronRight, { className: "h-4 w-4 text-ink-400" })] }, index));
             })] }));
 }
 
@@ -56986,6 +57083,7 @@ exports.saveColumnOrder = saveColumnOrder;
 exports.saveColumnWidths = saveColumnWidths;
 exports.searchFormulas = searchFormulas;
 exports.statusManager = statusManager;
+exports.useBreadcrumbReset = useBreadcrumbReset;
 exports.useBreakpoint = useBreakpoint;
 exports.useBreakpointValue = useBreakpointValue;
 exports.useColumnReorder = useColumnReorder;