@c-rex/components 0.3.0-build.35 → 0.3.0-build.38

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "@c-rex/components",
-    "version":  "0.3.0-build.35",
+    "version":  "0.3.0-build.38",
     "files":  [
                   "src"
               ],
@@ -21,10 +21,6 @@
                                                     "types":  "./src/generated/suggestions.tsx",
                                                     "import":  "./src/generated/suggestions.tsx"
                                                 },
-                    "./breadcrumb":  {
-                                         "types":  "./src/breadcrumb.tsx",
-                                         "import":  "./src/breadcrumb.tsx"
-                                     },
                     "./navbar":  {
                                      "types":  "./src/navbar/navbar.tsx",
                                      "import":  "./src/navbar/navbar.tsx"
@@ -62,12 +58,12 @@
                                         "import":  "./src/info/info-card.tsx"
                                     },
                     "./check-article-lang":  {
-                                                 "types":  "./src/check-article-lang.tsx",
-                                                 "import":  "./src/check-article-lang.tsx"
+                                                 "types":  "./src/article/check-article-lang.tsx",
+                                                 "import":  "./src/article/check-article-lang.tsx"
                                              },
                     "./render-article":  {
-                                             "types":  "./src/render-article.tsx",
-                                             "import":  "./src/render-article.tsx"
+                                             "types":  "./src/article/render-article.tsx",
+                                             "import":  "./src/article/render-article.tsx"
                                          },
                     "./article-action-bar":  {
                                                  "types":  "./src/article/article-action-bar.tsx",
@@ -98,17 +94,13 @@
                                                     "import":  "./src/renditions/html-client.tsx"
                                                 },
                     "./image-rendition-container":  {
-                                                        "types":  "./src/renditions/container.ts",
-                                                        "import":  "./src/renditions/container.ts"
+                                                        "types":  "./src/renditions/image/container.tsx",
+                                                        "import":  "./src/renditions/image/container.tsx"
                                                     },
                     "./autocomplete":  {
                                            "types":  "./src/autocomplete.tsx",
                                            "import":  "./src/autocomplete.tsx"
                                        },
-                    "./result-container":  {
-                                               "types":  "./src/result-container.tsx",
-                                               "import":  "./src/result-container.tsx"
-                                           },
                     "./dialog-filter":  {
                                             "types":  "./src/results/dialog-filter.tsx",
                                             "import":  "./src/results/dialog-filter.tsx"
@@ -117,6 +109,10 @@
                                          "types":  "./src/results/pagination.tsx",
                                          "import":  "./src/results/pagination.tsx"
                                      },
+                    "./information-unit-search-results-card-list":  {
+                                                                        "types":  "./src/results/information-unit-search-results-card-list.tsx",
+                                                                        "import":  "./src/results/information-unit-search-results-card-list.tsx"
+                                                                    },
                     "./information-unit-search-results-cards":  {
                                                                     "types":  "./src/results/information-unit-search-results-cards.tsx",
                                                                     "import":  "./src/results/information-unit-search-results-cards.tsx"
@@ -141,10 +137,10 @@
                                               "types":  "./src/stores/highlight-store.ts",
                                               "import":  "./src/stores/highlight-store.ts"
                                           },
-                    "./favorites-store":  {
-                                              "types":  "./src/stores/favorites-store.ts",
-                                              "import":  "./src/stores/favorites-store.ts"
-                                          },
+                    "./favorites-context":  {
+                                                "types":  "./src/favorites/favorites-context.tsx",
+                                                "import":  "./src/favorites/favorites-context.tsx"
+                                            },
                     "./search-settings-store":  {
                                                     "types":  "./src/stores/search-settings-store.ts",
                                                     "import":  "./src/stores/search-settings-store.ts"
@@ -177,14 +173,6 @@
                                               "types":  "./src/renditions/image/rendition.tsx",
                                               "import":  "./src/renditions/image/rendition.tsx"
                                           },
-                    "./server-image-rendition":  {
-                                                     "types":  "./src/renditions/image/server-image-rendition.tsx",
-                                                     "import":  "./src/renditions/image/server-image-rendition.tsx"
-                                                 },
-                    "./article-skeleton":  {
-                                               "types":  "./src/article/article-skeleton.tsx",
-                                               "import":  "./src/article/article-skeleton.tsx"
-                                           },
                     "./documents-result-list":  {
                                                     "types":  "./src/documents/result-list.tsx",
                                                     "import":  "./src/documents/result-list.tsx"
@@ -201,14 +189,6 @@
                                        "types":  "./src/carousel/carousel.tsx",
                                        "import":  "./src/carousel/carousel.tsx"
                                    },
-                    "./restriction-menu":  {
-                                               "types":  "./src/restriction-menu/restriction-menu.tsx",
-                                               "import":  "./src/restriction-menu/restriction-menu.tsx"
-                                           },
-                    "./restriction-menu-container":  {
-                                                         "types":  "./src/restriction-menu/restriction-menu-container.tsx",
-                                                         "import":  "./src/restriction-menu/restriction-menu-container.tsx"
-                                                     },
                     "./restriction-menu-item":  {
                                                     "types":  "./src/restriction-menu/restriction-menu-item.tsx",
                                                     "import":  "./src/restriction-menu/restriction-menu-item.tsx"
@@ -217,6 +197,10 @@
                                            "types":  "./src/search-input.tsx",
                                            "import":  "./src/search-input.tsx"
                                        },
+                    "./content-unavailable":  {
+                                                  "types":  "./src/content-unavailable.tsx",
+                                                  "import":  "./src/content-unavailable.tsx"
+                                              },
                     "./footer":  {
                                      "types":  "./src/footer/footer.tsx",
                                      "import":  "./src/footer/footer.tsx"
@@ -240,7 +224,19 @@
                     "./taxonomy-restriction-menu":  {
                                                         "types":  "./src/restriction-menu/taxonomy-restriction-menu.tsx",
                                                         "import":  "./src/restriction-menu/taxonomy-restriction-menu.tsx"
-                                                    }
+                                                    },
+                    "./restriction-selection-command-menu":  {
+                                                                 "types":  "./src/restriction-menu/restriction-selection-command-menu.tsx",
+                                                                 "import":  "./src/restriction-menu/restriction-selection-command-menu.tsx"
+                                                             },
+                    "./taxonomy-restriction-command-menu":  {
+                                                                "types":  "./src/restriction-menu/taxonomy-restriction-command-menu.tsx",
+                                                                "import":  "./src/restriction-menu/taxonomy-restriction-command-menu.tsx"
+                                                            },
+                    "./blog-author-card":  {
+                                               "types":  "./src/blog/blog-author-card.tsx",
+                                               "import":  "./src/blog/blog-author-card.tsx"
+                                           }
                 },
     "scripts":  {
                     "storybook":  "storybook dev -p 6006",

package/src/article/article-action-bar.tsx

@@ -10,12 +10,15 @@ import { cn } from "@c-rex/utils";
 import { useTranslations } from "next-intl";
 import { FavoriteButton } from "../favorites/favorite-button";
 import { ResultTypes } from "@c-rex/types";
+import { ShareButton } from "../share-button";
 type Props = {
     id: string;
     articleType: ResultTypes;
     favoriteLabel: string;
+    className?: string;
+    children?: React.ReactNode;
 }
-export const ArticleActionBar: FC<Props> = ({ id, articleType, favoriteLabel }) => {
+export const ArticleActionBar: FC<Props> = ({ id, articleType, favoriteLabel, className, children }) => {
     const t = useTranslations();
     const inputRef = useRef<HTMLInputElement>(null);
     const { next } = useHighlight();
@@ -31,7 +34,10 @@ export const ArticleActionBar: FC<Props> = ({ id, articleType, favoriteLabel })
     }, [open]);
 
     return (
-        <div className="w-9 flex gap-2 transition-all duration-300 flex-row z-20 items-end md:flex-col md:rounded-2xl md:sticky md:top-24 md:self-start">
+        <div className={cn(
+            "w-9 flex gap-2 transition-all duration-300 z-20 items-end flex-col sticky top-32 self-start",
+            className
+        )}>
 
             <SidebarTrigger side="right" />
 
@@ -41,6 +47,8 @@ export const ArticleActionBar: FC<Props> = ({ id, articleType, favoriteLabel })
                 label={favoriteLabel}
             />
 
+            <ShareButton />
+
             <Button
                 variant="ghost"
                 size="icon"
@@ -98,6 +106,8 @@ export const ArticleActionBar: FC<Props> = ({ id, articleType, favoriteLabel })
 
                 </>
             )}
+
+            {children}
         </div>
     )
 }

package/src/{check-article-lang.tsx → article/check-article-lang.tsx}

@@ -5,7 +5,7 @@ import { useAppConfig } from "@c-rex/contexts/config-provider";
 import { AvailableVersionsInterface } from "@c-rex/interfaces";
 import { toast } from "sonner"
 import { useTranslations } from "next-intl"
-import { useSearchSettingsStore } from "./stores/search-settings-store";
+import { useSearchSettingsStore } from "../stores/search-settings-store";
 
 interface Props {
     availableVersions: AvailableVersionsInterface[]

package/src/article/render-article-highlight.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { useEffect } from "react";
+import { useQueryState } from "nuqs";
+import { useHighlight } from "@c-rex/contexts/highlight-provider";
+import { useHighlightStore } from "../stores/highlight-store";
+
+const EXCLUDED_TAGS = new Set(["MARK", "SCRIPT", "STYLE", "NOSCRIPT", "TEXTAREA"]);
+
+export const extractHighlightTerms = (query: string | null): string[] => {
+    if (!query) return [];
+
+    return query
+        .split(/[+ ]/)
+        .map((term) => term.trim())
+        .filter(Boolean);
+};
+
+const applyHighlightToElement = (container: HTMLElement, terms: string[]) => {
+    if (terms.length === 0) return;
+
+    const escapedTerms = terms.map((term) =>
+        term.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")
+    );
+    const regex = new RegExp(`(${escapedTerms.join("|")})`, "gi");
+    const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
+    const textNodes: Text[] = [];
+
+    let currentNode = walker.nextNode();
+    while (currentNode) {
+        const parent = currentNode.parentElement;
+        const textContent = currentNode.textContent ?? "";
+
+        if (
+            parent &&
+            !EXCLUDED_TAGS.has(parent.tagName) &&
+            textContent.trim().length > 0
+        ) {
+            const hasMatch = regex.test(textContent);
+            regex.lastIndex = 0;
+
+            if (hasMatch) {
+                textNodes.push(currentNode as Text);
+            }
+        }
+
+        currentNode = walker.nextNode();
+    }
+
+    textNodes.forEach((textNode) => {
+        const textContent = textNode.textContent ?? "";
+        const parts = textContent.split(regex);
+
+        if (parts.length <= 1) return;
+
+        const fragment = document.createDocumentFragment();
+
+        parts.forEach((part) => {
+            if (!part) return;
+
+            const isMatch = regex.test(part);
+            regex.lastIndex = 0;
+
+            if (isMatch) {
+                const mark = document.createElement("mark");
+                mark.className = "bg-yellow-200";
+                mark.textContent = part;
+                fragment.appendChild(mark);
+                return;
+            }
+
+            fragment.appendChild(document.createTextNode(part));
+        });
+
+        textNode.parentNode?.replaceChild(fragment, textNode);
+    });
+};
+
+type RenderArticleHighlightProps = {
+    containerId: string
+    htmlContent: string
+};
+
+export const RenderArticleHighlight = ({
+    containerId,
+    htmlContent,
+}: RenderArticleHighlightProps) => {
+    const [query] = useQueryState("q");
+    const enableHighlight = useHighlightStore((state) => state.enable);
+    const { registerContainer, refreshMarks } = useHighlight();
+
+    useEffect(() => {
+        const container = document.getElementById(containerId) as HTMLElement | null;
+        if (!container) return;
+
+        registerContainer(container);
+        container.innerHTML = htmlContent;
+
+        if (enableHighlight) {
+            const terms = extractHighlightTerms(query);
+            applyHighlightToElement(container, terms);
+        }
+
+        refreshMarks();
+    }, [containerId, enableHighlight, htmlContent, query, refreshMarks, registerContainer]);
+
+    return null;
+};

package/src/article/render-article.tsx

@@ -0,0 +1,28 @@
+import { useId } from "react";
+import styles from "./render-article.module.css";
+import { RenderArticleHighlight } from "./render-article-highlight";
+
+type Props = {
+    htmlContent: string;
+    contentLang?: string;
+};
+
+export const RenderArticle = ({ htmlContent, contentLang }: Props) => {
+    const containerId = useId().replace(/:/g, "");
+
+    return (
+        <>
+            <main
+                id={containerId}
+                data-content-scope="dita"
+                lang={contentLang}
+                className={`ids-content ids-content--dita-ot ${styles.idsContent}`}
+                dangerouslySetInnerHTML={{ __html: htmlContent }}
+            />
+            <RenderArticleHighlight
+                containerId={containerId}
+                htmlContent={htmlContent}
+            />
+        </>
+    );
+};

package/src/autocomplete.tsx

@@ -101,27 +101,6 @@ export const AutoComplete = ({
         });
     };
 
-    const clearSearch = () => {
-        setQuery("");
-        setOpen(false);
-        const nextParams = new URLSearchParams(keepParams ? searchParams.toString() : "");
-        nextParams.set("page", "1");
-        nextParams.delete("search");
-        const queryString = nextParams.toString();
-
-        onSelectParams?.forEach(param => {
-            nextParams.set(param.key, param.value);
-        });
-        const targetUrl = queryString ? `${onSelectPath}?${queryString}` : onSelectPath;
-        const currentUrl = `${pathname}${searchParams.toString().length > 0 ? `?${searchParams.toString()}` : ""}`;
-        if (targetUrl === currentUrl) return;
-
-        startSearchNavigation();
-        startNavigation(() => {
-            router.push(targetUrl);
-        });
-    };
-
     useEffect(() => setQuery(initialValue), [initialValue]);
     useEffect(() => {
         stopSearchNavigation();
@@ -199,6 +178,7 @@ export const AutoComplete = ({
                             setQuery(e.target.value);
                             setOpen(true);
                         }}
+                        onFocus={() => setOpen(true)}
                     />
                     {isNavigating || searchNavigationPending ? (
                         <InputGroupAddon align="inline-end">
@@ -209,8 +189,8 @@ export const AutoComplete = ({
                             <InputGroupButton
                                 size="icon-xs"
                                 variant="ghost"
-                                aria-label="Clear search"
-                                onClick={clearSearch}
+                                aria-label={t("clearSearch")}
+                                onClick={() => setQuery("")}
                             >
                                 <X className="size-3" />
                             </InputGroupButton>
@@ -221,7 +201,9 @@ export const AutoComplete = ({
 
             {open && (
                 <ul className="suggestions-list absolute z-10 w-full bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-y-auto">
-                    {loading ? (
+                    {query.length === 0 ? (
+                        <li className="px-4 py-2 text-sm text-muted-foreground">{t("typingHint")}</li>
+                    ) : loading ? (
                         <li>
                             <div className="flex items-center justify-center py-4">
                                 <div className="animate-spin rounded-full h-6 w-6 border-2 border-gray-300 border-t-gray-950" />
@@ -246,7 +228,7 @@ export const AutoComplete = ({
                                     ))}
                                 </>
                             ) : (
-                                <li className="px-4 py-2">No suggestions.</li>
+                                <li className="px-4 py-2">{t("noSuggestions")}</li>
                             )}
                         </>
                     )}

package/src/blog/blog-author-card.tsx

@@ -0,0 +1,116 @@
+import { User, Mail, Link as LinkIcon } from "lucide-react";
+import Link from "next/link";
+import { cn } from "@c-rex/utils";
+import { Card, CardContent, CardHeader, CardTitle } from "@c-rex/ui/card";
+
+export type BlogAuthor = {
+    name: string;
+    photo: string | null;
+    title?: string | null;
+    role?: string | null;
+    emails?: string[];
+    urls?: string[];
+};
+
+type Props = {
+    authors: BlogAuthor[];
+    label: string;
+    embedded?: boolean;
+    fields?: Array<keyof BlogAuthor>;
+    className?: string;
+};
+
+const DEFAULT_FIELDS: Array<keyof BlogAuthor> = ["photo", "name", "title", "role"];
+
+const AuthorAvatar = ({ author }: { author: BlogAuthor }) => (
+    author.photo ? (
+        <img
+            src={author.photo}
+            alt={author.name}
+            className="size-10 rounded-full object-cover shrink-0"
+        />
+    ) : (
+        <div className="size-10 rounded-full bg-muted shrink-0 flex items-center justify-center">
+            <User className="size-6" />
+        </div>
+    )
+);
+
+const AuthorEntry = ({ author, fields }: { author: BlogAuthor; fields: Array<keyof BlogAuthor> }) => {
+    const showPhoto = fields.includes("photo");
+    const showName = fields.includes("name");
+    const showTitle = fields.includes("title");
+    const showRole = fields.includes("role");
+    const showEmails = fields.includes("emails");
+    const showUrls = fields.includes("urls");
+
+    return (
+        <div className="flex items-start gap-3">
+            {showPhoto && <AuthorAvatar author={author} />}
+            <div className="flex flex-col gap-0.5 min-w-0">
+                {showName && (
+                    <span className="text-sm font-medium truncate">{author.name}</span>
+                )}
+                {showTitle && author.title && (
+                    <span className="text-xs text-muted-foreground truncate">{author.title}</span>
+                )}
+                {showRole && author.role && (
+                    <span className="text-xs text-muted-foreground truncate">{author.role}</span>
+                )}
+                {showEmails && author.emails && author.emails.length > 0 && (
+                    <div className="flex flex-col gap-0.5 mt-1">
+                        {author.emails.map((email) => (
+                            <Link
+                                key={email}
+                                href={`mailto:${email}`}
+                                className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+                            >
+                                <Mail className="size-3 shrink-0" />
+                                <span className="truncate">{email}</span>
+                            </Link>
+                        ))}
+                    </div>
+                )}
+                {showUrls && author.urls && author.urls.length > 0 && (
+                    <div className="flex flex-col gap-0.5 mt-1">
+                        {author.urls.map((url) => (
+                            <Link
+                                key={url}
+                                href={url}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+                            >
+                                <LinkIcon className="size-3 shrink-0" />
+                                <span className="truncate">{url}</span>
+                            </Link>
+                        ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export const BlogAuthorCard = ({ authors, label, embedded = false, fields = DEFAULT_FIELDS, className }: Props) => {
+    if (authors.length === 0) return null;
+
+    const content = (
+        <CardContent className="space-y-3 pb-4">
+            {authors.map((author, i) => (
+                <AuthorEntry key={i} author={author} fields={fields} />
+            ))}
+        </CardContent>
+    );
+
+    if (embedded) return content;
+
+    return (
+        <Card className={cn("gap-0", className)}>
+            <CardHeader>
+                <CardTitle className="text-lg">{label}</CardTitle>
+            </CardHeader>
+            {content}
+        </Card>
+    );
+};

package/src/carousel/carousel.tsx

@@ -298,6 +298,7 @@ export const Carousel: FC<Props> = ({
                 <div ref={containerRef} className={cn("w-full flex items-center")}>
                     {(arrows && data && data.length > 0) && <CarouselPrev />}
                     <div className={cn("flex-1 overflow-hidden relative flex items-center")}>
+                        {/*TODO: update loading position*/}
                         {loadByPages && loading && data && data.length > 0 && (
                             <div className="absolute right-3 top-3 z-20 rounded-full bg-background/95 p-2 text-muted-foreground shadow-sm">
                                 <LoaderCircle className="h-3.5 w-3.5 animate-spin" />
@@ -327,7 +328,10 @@ export const Carousel: FC<Props> = ({
                                 data.map((item: CommonItemsModel, index: number) => (
                                     <div
                                         key={item.shortId}
-                                        className={`flex-shrink-0 flex-grow-0 flex justify-center`}
+                                        className={cn(
+                                            'flex-shrink-0 flex-grow-0 flex justify-center',
+                                            loading && "opacity-40"
+                                        )}
                                         style={{ width: `${100 / slidesToShow}%` }}
                                     >
                                         <RenderComponent
@@ -454,7 +458,6 @@ const CarouselIndicators: FC<{ className?: string }> = ({ className }) => {
                     );
                 })}
             </ol>
-            {pagedMode && loading && <LoaderCircle className="h-3.5 w-3.5 animate-spin text-muted-foreground" />}
         </div>
     );
 };

package/src/carousel/information-unit-carousel-item.tsx

@@ -65,7 +65,7 @@ export const InformationUnitCarouselItem: FC<Props> = ({
                 <Tooltip>
                     <TooltipTrigger asChild>
                         <div className="h-44 overflow-hidden">
-                            <span className="line-clamp-5 text-lg font-semibold group-hover:underline">
+                            <span className="line-clamp-5 text-lg font-semibold group-hover:underline max-w-full overflow-ellipsis [overflow-wrap:anywhere] hyphens-auto">
                                 {title}
                             </span>
                         </div>

package/src/content-unavailable.tsx

@@ -0,0 +1,20 @@
+import { ComponentProps, FC } from "react";
+import { PageWrapper } from "@c-rex/components/page-wrapper";
+import { getTranslations } from "next-intl/server";
+
+
+type Props = Omit<ComponentProps<typeof PageWrapper>, "children">;
+
+export const ContentUnavailable: FC<Props> = async ({ ...props }) => {
+    const t = await getTranslations();
+
+    return (
+        <PageWrapper {...props}>
+            <div className="flex flex-1 justify-center items-center p-4">
+                <div className="rounded-md border p-4 text-sm text-muted-foreground">
+                    {t("contentTemporarilyUnavailableRetry")}
+                </div>
+            </div>
+        </PageWrapper>
+    )
+}

package/src/directoryNodes/directory-tree-context.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { createContext, useContext, useEffect, useMemo, useState, type FC, type PropsWithChildren } from "react";
+import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import type { TreeOfContent } from "@c-rex/interfaces";
 import {
@@ -232,6 +233,7 @@ type DirectoryTreeSidebarMenuProps = {
 export const DirectoryTreeSidebarMenu: FC<DirectoryTreeSidebarMenuProps> = ({
     onNavigateNode,
 }) => {
+    const t = useTranslations();
     const { tree, isLoading, expandActivePathOnLoad } = useDirectoryTree();
     const [expandedNodeIds, setExpandedNodeIds] = useState<Set<string>>(new Set());
 
@@ -266,7 +268,8 @@ export const DirectoryTreeSidebarMenu: FC<DirectoryTreeSidebarMenuProps> = ({
                 <Skeleton className="w-auto h-10 mb-2 ml-8" />
                 <Skeleton className="w-auto h-10 mb-2 ml-8" />
                 <Skeleton className="w-auto h-10 mb-2" />
-                <div className="px-2 pt-1 text-xs text-muted-foreground">Inhaltsverzeichnis wird geladen...</div>
+                {/*TODO: need this?*/}
+                <div className="px-2 pt-1 text-xs text-muted-foreground">{t("loadingTableOfContents")}</div>
             </div>
         );
     }
@@ -302,7 +305,7 @@ export const DirectoryTreeSidebarMenu: FC<DirectoryTreeSidebarMenuProps> = ({
                 {node.children?.length ? (
                     <button
                         type="button"
-                        aria-label={expandedNodeIds.has(node.id) ? "Collapse section" : "Expand section"}
+                        aria-label={expandedNodeIds.has(node.id) ? t("collapseSection") : t("expandSection")}
                         className="h-8 w-8 inline-flex items-center justify-center text-muted-foreground hover:text-foreground"
                         onClick={() => toggleNode(node.id)}
                     >
@@ -335,11 +338,13 @@ type DirectoryTreeBreadcrumbProps = {
 
 export const DirectoryTreeBreadcrumb: FC<DirectoryTreeBreadcrumbProps> = ({
     lang,
-    homeLabel = "Home",
+    homeLabel,
     onNavigateHome,
     onNavigateNodeId,
 }) => {
+    const t = useTranslations();
     const { tree, isLoading } = useDirectoryTree();
+    const resolvedHomeLabel = homeLabel ?? t("home");
     const router = useRouter();
     const items = generateBreadcrumbItems(tree);
 
@@ -362,7 +367,7 @@ export const DirectoryTreeBreadcrumb: FC<DirectoryTreeBreadcrumbProps> = ({
             <BreadcrumbList>
                 <BreadcrumbItem>
                     <button type="button" onClick={navigateHome}>
-                        {homeLabel}
+                        {resolvedHomeLabel}
                     </button>
                 </BreadcrumbItem>
                 <BreadcrumbSeparator />