feat: Breadcrumb improvements (#452)

src/components/Breadcrumbs.tsx

@@ -3,6 +3,7 @@ import React, {
   ReactNode,
   forwardRef,
   useCallback,
+  useContext,
   useEffect,
   useId,
   useRef,
@@ -19,7 +20,7 @@ import usePrevious from '../hooks/usePrevious'
 import { Select } from './Select'
 import { ListBoxItem } from './ListBoxItem'
 import { useNavigationContext } from './contexts/NavigationContext'
-import { Breadcrumb, useBreadcrumbs } from './contexts/BreadcrumbsContext'
+import { Breadcrumb, BreadcrumbsContext } from './contexts/BreadcrumbsContext'
 
 function getCrumbKey(crumb: Breadcrumb) {
   const maybeKey = crumb?.key
@@ -239,6 +240,7 @@ type BreadcrumbsProps = {
   minLength?: number
   maxLength?: number
   collapsible?: boolean
+  breadcrumbs?: Breadcrumb[]
 } & FlexProps
 
 export function BreadcrumbsInside({
@@ -338,9 +340,17 @@ export function Breadcrumbs({
   minLength = 0,
   maxLength = Infinity,
   collapsible = true,
+  breadcrumbs: propsCrumbs,
   ...props
 }: BreadcrumbsProps) {
-  const { breadcrumbs } = useBreadcrumbs()
+  const { breadcrumbs: contextCrumbs } = useContext(BreadcrumbsContext)
+  const breadcrumbs = propsCrumbs || contextCrumbs
+
+  if (!breadcrumbs) {
+    throw Error(
+      "<Breadcrumbs> must be provided a 'breadcrumbs' prop or used inside a <BreadcrumbProvider>"
+    )
+  }
   const prevBreadcrumbs = usePrevious(breadcrumbs)
   const transitionKey = useRef<number>(0)
 

src/components/contexts/BreadcrumbsContext.tsx

@@ -3,6 +3,7 @@ import React, {
   ReactNode,
   useContext,
   useEffect,
+  useMemo,
   useState,
 } from 'react'
 
@@ -28,14 +29,31 @@ export type Breadcrumb = BreadcrumbBase &
       }
   )
 
-const BreadcrumbsContext = React.createContext<BreadcrumbsContextT | null>(null)
+export const BreadcrumbsContext =
+  React.createContext<BreadcrumbsContextT | null>(null)
 
-export function BreadcrumbsProvider({ children }: PropsWithChildren) {
+export function BreadcrumbsProvider({
+  children,
+  breadcrumbsTransform,
+}: PropsWithChildren<{
+  breadcrumbsTransform?: (breadcrumbs: Breadcrumb[]) => Breadcrumb[]
+}>) {
   const [breadcrumbs, setBreadcrumbs] = useState<Breadcrumb[]>([])
 
+  const contextVal = useMemo(
+    () => ({
+      breadcrumbs:
+        typeof breadcrumbsTransform === 'function'
+          ? breadcrumbsTransform(breadcrumbs)
+          : breadcrumbs,
+      setBreadcrumbs,
+    }),
+    [breadcrumbsTransform, breadcrumbs]
+  )
+
   return (
     // eslint-disable-next-line react/jsx-no-constructed-context-values
-    <BreadcrumbsContext.Provider value={{ breadcrumbs, setBreadcrumbs }}>
+    <BreadcrumbsContext.Provider value={contextVal}>
       {children}
     </BreadcrumbsContext.Provider>
   )