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

package/src/restriction-menu/restriction-selection-menu.tsx

@@ -11,12 +11,15 @@ import {
 import { RestrictionDropdownItem, RestrictionNavigationItem } from "./restriction-menu-item";
 import { parseAsString, useQueryStates } from "nuqs";
 import { DomainEntityModel, ObjectRefModel } from "@c-rex/interfaces";
+import type { TaxonomyResult } from "@c-rex/services/read-models";
 import { useLocale, useTranslations } from 'next-intl'
 import { cn, getLabelByLang } from "@c-rex/utils";
 import { useRestrictionStore } from "../stores/restriction-store";
 import { useBreakpoint } from "@c-rex/ui/hooks";
 import { DEVICE_OPTIONS } from "@c-rex/constants";
 import { ChevronDown, ChevronRight } from "lucide-react";
+import { buildTaxonomyHierarchy, type HierarchyItem } from "../taxonomy/hierarchy";
+import { isRestrictionHierarchyNodeSelectable } from "./restriction-hierarchy";
 
 
 type Props = {
@@ -24,6 +27,7 @@ type Props = {
     navigationMenuListClassName?: string
     items: DomainEntityModel[],
     enableHierarchy?: boolean,
+    hierarchyTaxonomy?: TaxonomyResult,
     hasMoreItems?: boolean,
     showAllWhenEmpty?: boolean,
     onRequestMore?: () => void,
@@ -32,6 +36,8 @@ type Props = {
         [DEVICE_OPTIONS.TABLET]: number,
         [DEVICE_OPTIONS.DESKTOP]: number,
     }
+    multipleSelection?: boolean;
+    updatePosition?: boolean;
 }
 
 type RestrictionTreeNode = {
@@ -39,6 +45,10 @@ type RestrictionTreeNode = {
     children: RestrictionTreeNode[];
 };
 
+type RestrictionHierarchyItem = HierarchyItem & {
+    item?: DomainEntityModel;
+};
+
 const hasSelectedDescendant = (node: RestrictionTreeNode, selectedShortIds: Set<string>): boolean => {
     const shortId = node.item.shortId;
     if (shortId && selectedShortIds.has(shortId)) {
@@ -66,6 +76,13 @@ const extractParentKeys = (item: DomainEntityModel): string[] => {
         });
 };
 
+const extractParentIds = (item: DomainEntityModel): string[] => {
+    const withParents = item as DomainEntityModel & { parents?: ObjectRefModel[] | null };
+    return (withParents.parents || [])
+        .map((parent) => parent.id || parent.shortId)
+        .filter((parentId): parentId is string => Boolean(parentId));
+};
+
 const buildRestrictionTree = (items: DomainEntityModel[]): RestrictionTreeNode[] => {
     const nodes = new Map<string, RestrictionTreeNode>();
     items.forEach((item) => {
@@ -114,6 +131,7 @@ export const RestrictionSelectionMenu: FC<Props> = ({
     items,
     restrictField,
     enableHierarchy = false,
+    hierarchyTaxonomy,
     hasMoreItems = false,
     showAllWhenEmpty = true,
     onRequestMore,
@@ -122,7 +140,9 @@ export const RestrictionSelectionMenu: FC<Props> = ({
         [DEVICE_OPTIONS.MOBILE]: 2,
         [DEVICE_OPTIONS.TABLET]: 4,
         [DEVICE_OPTIONS.DESKTOP]: 7,
-    }
+    },
+    multipleSelection = true,
+    updatePosition = true
 }) => {
     const t = useTranslations();
     const setRestrictionList = useRestrictionStore((state) => state.setRestrictionList);
@@ -154,6 +174,8 @@ export const RestrictionSelectionMenu: FC<Props> = ({
     const sortedItems = useMemo(() => {
         //if shortId it is on the restrictionValues, it should be on top of the list, otherwise keep the original order
 
+        if (updatePosition === false) return items;
+
         const sorted = [...items].sort((a, b) => {
             const aShortId = a.shortId || "";
             const bShortId = b.shortId || "";
@@ -173,12 +195,42 @@ export const RestrictionSelectionMenu: FC<Props> = ({
             return aIndex - bIndex; // sort by index in restrictionValues
         });
         return sorted;
-    }, [items, restrictionValues]);
+    }, [items, restrictionValues, updatePosition]);
 
-    const hierarchyRoots = useMemo(() => {
+    const hierarchyTree = useMemo(() => {
         if (!enableHierarchy) return [];
-        return buildRestrictionTree(sortedItems);
-    }, [enableHierarchy, sortedItems]);
+        if (!hierarchyTaxonomy) return buildRestrictionTree(sortedItems);
+
+        const hierarchy = buildTaxonomyHierarchy<RestrictionHierarchyItem>(
+            sortedItems.map((item) => ({
+                shortId: item.shortId || item.id || "",
+                label: getLabelByLang(item.labels, lang) || item.shortId || item.id || "",
+                active: selectedRestrictionIds.has(item.shortId || ""),
+                hits: 0,
+                total: 0,
+                taxonomyId: item.id || undefined,
+                parentIds: extractParentIds(item),
+                item,
+            })),
+            hierarchyTaxonomy
+        );
+
+        const toTreeNode = (node: RestrictionHierarchyItem): RestrictionTreeNode => {
+            const nodeKey = node.taxonomyId || node.shortId;
+            const runtimeItem = node.item || {
+                id: node.taxonomyId,
+                shortId: node.shortId,
+                labels: [{ language: lang, value: node.label }],
+            } as DomainEntityModel;
+
+            return {
+                item: runtimeItem,
+                children: (hierarchy.children.get(nodeKey) || []).map((child) => toTreeNode(child)),
+            };
+        };
+
+        return hierarchy.roots.map((root) => toTreeNode(root));
+    }, [enableHierarchy, hierarchyTaxonomy, lang, selectedRestrictionIds, sortedItems]);
 
     const device = useBreakpoint();
     const [visibleCount, setVisibleCount] = useState(0);
@@ -195,7 +247,7 @@ export const RestrictionSelectionMenu: FC<Props> = ({
         if (visibleCount == 0) return;
 
         if (enableHierarchy) {
-            const roots = hierarchyRoots.map((node) => node.item);
+            const roots = hierarchyTree.map((node) => node.item);
             setVisibleItems(roots.slice(0, visibleCount));
             setHiddenItems(roots.slice(visibleCount));
             return;
@@ -203,19 +255,19 @@ export const RestrictionSelectionMenu: FC<Props> = ({
 
         setVisibleItems(sortedItems.slice(0, visibleCount));
         setHiddenItems(sortedItems.slice(visibleCount));
-    }, [enableHierarchy, hierarchyRoots, sortedItems, visibleCount]);
+    }, [enableHierarchy, hierarchyTree, sortedItems, visibleCount]);
 
     const visibleHierarchyRoots = useMemo(() => {
         if (!enableHierarchy) return [];
         const visibleRootShortIds = new Set(visibleItems.map((item) => item.shortId).filter(Boolean));
-        return hierarchyRoots.filter((root) => root.item.shortId && visibleRootShortIds.has(root.item.shortId));
-    }, [enableHierarchy, hierarchyRoots, visibleItems]);
+        return hierarchyTree.filter((root) => root.item.shortId && visibleRootShortIds.has(root.item.shortId));
+    }, [enableHierarchy, hierarchyTree, visibleItems]);
 
     const hiddenHierarchyRoots = useMemo(() => {
         if (!enableHierarchy) return [];
         const hiddenRootShortIds = new Set(hiddenItems.map((item) => item.shortId).filter(Boolean));
-        return hierarchyRoots.filter((root) => root.item.shortId && hiddenRootShortIds.has(root.item.shortId));
-    }, [enableHierarchy, hierarchyRoots, hiddenItems]);
+        return hierarchyTree.filter((root) => root.item.shortId && hiddenRootShortIds.has(root.item.shortId));
+    }, [enableHierarchy, hierarchyTree, hiddenItems]);
 
     const [expandedNodes, setExpandedNodes] = useState<Record<string, boolean>>({});
     const toggleExpanded = (shortId: string) => {
@@ -228,8 +280,10 @@ export const RestrictionSelectionMenu: FC<Props> = ({
         const isRootNode = depth === 0;
         const isExpanded = isRootNode || expandedNodes[shortId] === true;
         const isSelected = restrictionValues.includes(shortId);
+        const isSelectable = isRestrictionHierarchyNodeSelectable(node.item);
         const hasActiveDescendant = hasChildren && node.children.some((child) => hasSelectedDescendant(child, selectedRestrictionIds));
         const shouldHighlightBranch = hasActiveDescendant && !isSelected;
+        const label = getLabelByLang(node.item.labels, lang);
 
         return (
             <li key={`tree-node-${shortId}`} className="flex flex-col w-full">
@@ -253,12 +307,18 @@ export const RestrictionSelectionMenu: FC<Props> = ({
                             shouldHighlightBranch && "bg-primary/5 ring-1 ring-primary/10"
                         )}
                     >
-                        <RestrictionDropdownItem
-                            shortId={shortId}
-                            restrictField={restrictField}
-                            label={getLabelByLang(node.item.labels, lang)}
-                            selected={isSelected}
-                        />
+                        {isSelectable ? (
+                            <RestrictionDropdownItem
+                                shortId={shortId}
+                                restrictField={restrictField}
+                                label={label}
+                                selected={isSelected}
+                            />
+                        ) : (
+                            <div className="flex min-h-10 w-full items-center rounded-full px-4 py-2 text-sm text-muted-foreground">
+                                {label}
+                            </div>
+                        )}
                     </div>
                     {shouldHighlightBranch ? (
                         <span
@@ -293,6 +353,7 @@ export const RestrictionSelectionMenu: FC<Props> = ({
                     <RestrictionNavigationItem
                         key={item.shortId}
                         shortId={item.shortId!}
+                        multipleSelection={multipleSelection}
                         restrictField={restrictField as string}
                         label={getLabelByLang(item.labels, lang)}
                         selected={restrictionValues.includes(item.shortId!)}
@@ -302,12 +363,23 @@ export const RestrictionSelectionMenu: FC<Props> = ({
                 {enableHierarchy && visibleHierarchyRoots.map((rootNode) => {
                     const shortId = rootNode.item.shortId || "";
                     const hasChildren = rootNode.children.length > 0;
+                    const isSelectable = isRestrictionHierarchyNodeSelectable(rootNode.item);
                     const label = getLabelByLang(rootNode.item.labels, lang);
                     const rootSelected = restrictionValues.includes(shortId);
                     const hasActiveDescendant = hasChildren && hasSelectedDescendant(rootNode, selectedRestrictionIds);
                     const shouldHighlightBranch = hasActiveDescendant && !rootSelected;
 
                     if (!hasChildren) {
+                        if (!isSelectable) {
+                            return (
+                                <NavigationMenuItem key={shortId}>
+                                    <div className="flex min-h-9 items-center rounded-full border border-transparent px-4 py-2 text-sm text-muted-foreground">
+                                        {label}
+                                    </div>
+                                </NavigationMenuItem>
+                            );
+                        }
+
                         return (
                             <RestrictionNavigationItem
                                 key={shortId}
@@ -315,6 +387,7 @@ export const RestrictionSelectionMenu: FC<Props> = ({
                                 restrictField={restrictField}
                                 label={label}
                                 selected={restrictionValues.includes(shortId)}
+                                multipleSelection={multipleSelection}
                             />
                         );
                     }
@@ -364,6 +437,7 @@ export const RestrictionSelectionMenu: FC<Props> = ({
                                         >
                                             <RestrictionDropdownItem
                                                 shortId={item.shortId!}
+                                                multipleSelection={multipleSelection}
                                                 restrictField={restrictField as string}
                                                 label={getLabelByLang(item.labels, lang)}
                                                 selected={restrictionValues.includes(item.shortId!)}

package/src/restriction-menu/taxonomy-restriction-command-menu.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { DomainEntityModel } from "@c-rex/interfaces";
+import type { TaxonomyResult } from "@c-rex/services/read-models";
 import { FC, ReactNode, useMemo, useState } from "react";
 import * as ComponentOptions from "../generated/client-components";
 import { Skeleton } from "@c-rex/ui/skeleton";
@@ -30,6 +31,7 @@ export type TaxonomyRestrictionCommandMenuProps = {
     showAllWhenEmpty?: boolean;
     queryParams?: GenericQueryParams;
     stripLabelPrefix?: string;
+    hierarchyTaxonomy?: TaxonomyResult;
 };
 
 export const TaxonomyRestrictionCommandMenu: FC<TaxonomyRestrictionCommandMenuProps> = ({
@@ -43,6 +45,7 @@ export const TaxonomyRestrictionCommandMenu: FC<TaxonomyRestrictionCommandMenuPr
     showAllWhenEmpty = true,
     navigationMenuListClassName = "items-center justify-start gap-4 flex-row",
     stripLabelPrefix,
+    hierarchyTaxonomy,
 }) => {
     const [loadAll, setLoadAll] = useState(false);
     const RequestComponent = ComponentOptions[requestType] as unknown as FC<GenericRequestProps>;
@@ -94,6 +97,7 @@ export const TaxonomyRestrictionCommandMenu: FC<TaxonomyRestrictionCommandMenuPr
                         restrictField={restrictField}
                         items={data.items || []}
                         enableHierarchy={enableHierarchy}
+                        hierarchyTaxonomy={hierarchyTaxonomy}
                         hasMoreItems={hasMoreItems}
                         showAllWhenEmpty={showAllWhenEmpty}
                         onRequestMore={() => {
@@ -102,7 +106,6 @@ export const TaxonomyRestrictionCommandMenu: FC<TaxonomyRestrictionCommandMenuPr
                             }
                         }}
                         navigationMenuListClassName={navigationMenuListClassName}
-                        stripLabelPrefix={stripLabelPrefix}
                     />
                 );
             }}

package/src/restriction-menu/taxonomy-restriction-menu.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { DomainEntityModel } from "@c-rex/interfaces";
+import type { TaxonomyResult } from "@c-rex/services/read-models";
 import { FC, ReactNode, useMemo, useState } from "react";
 import * as ComponentOptions from "../generated/client-components";
 import { Skeleton } from "@c-rex/ui/skeleton";
@@ -34,6 +35,9 @@ export type TaxonomyRestrictionMenuProps = {
     fetchMode?: RestrictionMenuFetchMode;
     showAllWhenEmpty?: boolean;
     queryParams?: GenericQueryParams;
+    hierarchyTaxonomy?: TaxonomyResult;
+    multipleSelection?: boolean;
+    updatePosition?: boolean;
 };
 
 const DEFAULT_ITEMS_BY_ROW = {
@@ -52,6 +56,9 @@ export const TaxonomyRestrictionMenu: FC<TaxonomyRestrictionMenuProps> = ({
     fetchMode = "deferred",
     showAllWhenEmpty = true,
     navigationMenuListClassName = "items-center justify-start gap-4 flex-row",
+    hierarchyTaxonomy,
+    multipleSelection = true,
+    updatePosition = true,
 }) => {
     const [loadAll, setLoadAll] = useState(false);
     const RequestComponent = ComponentOptions[requestType] as unknown as FC<GenericRequestProps>;
@@ -104,6 +111,7 @@ export const TaxonomyRestrictionMenu: FC<TaxonomyRestrictionMenuProps> = ({
                         restrictField={restrictField}
                         items={data.items || []}
                         enableHierarchy={enableHierarchy}
+                        hierarchyTaxonomy={hierarchyTaxonomy}
                         hasMoreItems={hasMoreItems}
                         showAllWhenEmpty={showAllWhenEmpty}
                         itemsByRow={itemsByRow}
@@ -113,6 +121,8 @@ export const TaxonomyRestrictionMenu: FC<TaxonomyRestrictionMenuProps> = ({
                             }
                         }}
                         navigationMenuListClassName={navigationMenuListClassName}
+                        multipleSelection={multipleSelection}
+                        updatePosition={updatePosition}
                     />
                 );
             }}

package/src/results/filter-navbar.tsx

@@ -9,7 +9,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@c-rex
 import { DEVICE_OPTIONS, OPERATOR_OPTIONS } from "@c-rex/constants";
 import { Tags } from "@c-rex/interfaces";
 import { useBreakpoint } from "@c-rex/ui/hooks";
-import { applyFacetPropertyVisibility, FacetLabelOverrides, memoizeFilteredTags } from "./filter-sidebar/utils";
+import { applyFacetPropertyVisibility, FacetPresentation, memoizeFilteredTags } from "./filter-sidebar/utils";
 import { useFilterSidebarState } from "./filter-sidebar/context";
 import { useSearchSettingsStore } from "../stores/search-settings-store";
 import { useRestrictionStore } from "../stores/restriction-store";
@@ -25,7 +25,8 @@ type filterModel = {
 
 type FilterNavbarProps = {
     tags?: Tags
-    facetLabelOverrides?: FacetLabelOverrides
+    facetPresentation?: FacetPresentation
+    facetLabelOverrides?: FacetPresentation
     includeZeroHits?: boolean
     includeProperties?: string[]
     excludeProperties?: string[]
@@ -33,6 +34,7 @@ type FilterNavbarProps = {
 
 export const FilterNavbar: FC<FilterNavbarProps> = ({
     tags,
+    facetPresentation,
     facetLabelOverrides,
     includeZeroHits = true,
     includeProperties,
@@ -45,6 +47,7 @@ export const FilterNavbar: FC<FilterNavbarProps> = ({
     const { setIsMobileFiltersOpen } = useFilterSidebarState();
     const restrictionList = useRestrictionStore((state) => state.restrictionList);
     const startSearchNavigation = useSearchNavigationStore((state) => state.start);
+    const effectiveFacetPresentation = facetPresentation || facetLabelOverrides;
     const [params, setParams] = useQueryStates({
         language: parseAsString.withDefault(useSearchSettingsStore.getState().language || ''),
         page: parseAsInteger.withDefault(1),
@@ -68,11 +71,11 @@ export const FilterNavbar: FC<FilterNavbarProps> = ({
     const filteredTags = useMemo(() => {
         const resolved = memoizeFilteredTags(tags, params.filter, params.packages, {
             uiLanguage: locale,
-            labelOverrides: facetLabelOverrides,
+            facetPresentation: effectiveFacetPresentation,
             includeZeroHits,
         });
         return applyFacetPropertyVisibility(resolved, includeProperties, excludeProperties);
-    }, [tags, params.filter, params.packages, locale, facetLabelOverrides, includeZeroHits, includeProperties, excludeProperties]);
+    }, [tags, params.filter, params.packages, locale, effectiveFacetPresentation, includeZeroHits, includeProperties, excludeProperties]);
     const hasMobileFilters = Object.entries(filteredTags).length > 0;
 
     const humanizeMetadataKey = (key: string): string =>