(bugfix): fix Breadcrumb/CookieConsent linkComponent typing for react-router

CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.4.4] - 2026-08-12
+
+### Fixed
+
+- `Breadcrumb` / `CookieConsent` `linkComponent` typing: `to` is required on the injected link props (and always passed when rendering links), so react-router `Link` is assignable without a host adapter. Exports: `BreadcrumbLinkComponent`, `CookieConsentLinkComponent`.
+
 ## [0.4.3] - 2026-08-06
 
 ### Added

src/components/components/Breadcrumb/Breadcrumb.tsx

@@ -14,12 +14,15 @@ export interface BreadcrumbItem {
   linkProps?: Record<string, unknown>
 }
 
-type BreadcrumbLinkComponent = ComponentType<{
+/**
+ * Injectable link surface for SPA routers.
+ * `to` is always provided when Breadcrumb renders a link, so react-router `Link` is assignable.
+ */
+export type BreadcrumbLinkComponent = ComponentType<{
+  to: string
   href?: string
-  to?: string
   className?: string
   children?: ReactNode
-  [key: string]: unknown
 }>
 
 export interface BreadcrumbProps {
@@ -89,10 +92,10 @@ const Breadcrumb: FC<BreadcrumbProps> = ({
                 </span>
               ) : null}
 
-              {isLink ? (
+              {isLink && target ? (
                 <LinkComponent
                   href={item.href ?? (typeof item.to === 'string' ? item.to : undefined)}
-                  to={item.to ?? item.href}
+                  to={target}
                   className={linkClassName}
                   {...(item.linkProps ?? {})}
                 >

src/components/components/Breadcrumb/index.ts

@@ -1,2 +1,6 @@
 export { Breadcrumb } from './Breadcrumb'
-export type { BreadcrumbProps, BreadcrumbItem } from './Breadcrumb'
+export type {
+  BreadcrumbProps,
+  BreadcrumbItem,
+  BreadcrumbLinkComponent,
+} from './Breadcrumb'

src/components/components/CookieConsent/CookieConsent.tsx

@@ -17,12 +17,15 @@ export interface CookieConsentLink {
   linkProps?: Record<string, unknown>
 }
 
-type ConsentLinkComponent = ComponentType<{
+/**
+ * Injectable link surface for SPA routers.
+ * `to` is always provided when CookieConsent renders a link, so react-router `Link` is assignable.
+ */
+export type CookieConsentLinkComponent = ComponentType<{
+  to: string
   href?: string
-  to?: string
   className?: string
   children?: ReactNode
-  [key: string]: unknown
 }>
 
 export interface CookieConsentProps {
@@ -33,13 +36,13 @@ export interface CookieConsentProps {
   cookieName?: string
   cookieDays?: number
   /** Host injects `Link` from react-router (or any anchor-like component). Defaults to `<a>`. */
-  linkComponent?: ConsentLinkComponent
+  linkComponent?: CookieConsentLinkComponent
   onAccept?: () => void
   onDismiss?: () => void
   className?: string
 }
 
-const DefaultLink: ConsentLinkComponent = ({
+const DefaultLink: CookieConsentLinkComponent = ({
   href,
   to,
   children,
@@ -108,18 +111,24 @@ const CookieConsent: FC<CookieConsentProps> = ({
         {message}
         {links.length > 0 ? (
           <ul className={'mt-2 flex flex-wrap gap-x-3 gap-y-1'}>
-            {links.map((link, index) => (
+            {links.map((link, index) => {
-              <li key={index}>
+              const target = link.to ?? link.href
-                <LinkComponent
+              if (!target)
-                  href={link.href ?? (typeof link.to === 'string' ? link.to : undefined)}
+                return null
-                  to={link.to ?? link.href}
+
-                  className={'text-sky-700 underline hover:text-sky-900'}
+              return (
-                  {...(link.linkProps ?? {})}
+                <li key={index}>
-                >
+                  <LinkComponent
-                  {link.label}
+                    href={link.href ?? (typeof link.to === 'string' ? link.to : undefined)}
-                </LinkComponent>
+                    to={target}
-              </li>
+                    className={'text-sky-700 underline hover:text-sky-900'}
-            ))}
+                    {...(link.linkProps ?? {})}
+                  >
+                    {link.label}
+                  </LinkComponent>
+                </li>
+              )
+            })}
           </ul>
         ) : null}
       </div>

src/components/components/CookieConsent/index.ts

@@ -1,3 +1,7 @@
 export { CookieConsent } from './CookieConsent'
-export type { CookieConsentProps, CookieConsentLink } from './CookieConsent'
+export type {
+  CookieConsentProps,
+  CookieConsentLink,
+  CookieConsentLinkComponent,
+} from './CookieConsent'
 export { getCookie, setCookie } from './cookies'

src/components/index.ts

@@ -4,7 +4,11 @@ export { SecretComponent } from './components/editors/SecretComponent'
 export type { SecretDataSource, SecretComponentProps } from './components/editors/SecretComponent'
 export { FormContainer, FormContent, FormFooter, FormHeader } from './components/FormLayout'
 export { Breadcrumb } from './components/Breadcrumb'
-export type { BreadcrumbProps, BreadcrumbItem } from './components/Breadcrumb'
+export type {
+  BreadcrumbProps,
+  BreadcrumbItem,
+  BreadcrumbLinkComponent,
+} from './components/Breadcrumb'
 export { Offcanvas } from './components/Offcanvas'
 export { Modal, ConfirmDialog } from './components/Modal'
 export type { ModalProps, ModalSize, ConfirmDialogProps } from './components/Modal'
@@ -22,7 +26,11 @@ export type { MasonryProps } from './components/Masonry'
 export { LightBox } from './components/LightBox'
 export type { LightBoxProps, LightBoxSlide } from './components/LightBox'
 export { CookieConsent, getCookie, setCookie } from './components/CookieConsent'
-export type { CookieConsentProps, CookieConsentLink } from './components/CookieConsent'
+export type {
+  CookieConsentProps,
+  CookieConsentLink,
+  CookieConsentLinkComponent,
+} from './components/CookieConsent'
 export {
   WhatsAppButton,
   buildWhatsAppHref,

src/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maks-it.com/webui",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "Shared contracts, utilities, and React components for MaksIT WebUI apps",
   "type": "module",
   "main": "./dist/index.cjs",