@c-rex/components 0.3.0-build.28 → 0.3.0-build.30

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

@@ -1,117 +1,4 @@
-"use client";
-
-import { DomainEntityModel } from "@c-rex/interfaces";
-import { FC, ReactNode, useMemo, useState } from "react"
-import * as ComponentOptions from "../generated/client-components";
-import { Skeleton } from "@c-rex/ui/skeleton";
-import { RestrictionMenu } from "./restriction-menu";
-
-type GenericRequestData = {
-    items?: DomainEntityModel[];
-    pageInfo?: {
-        totalItemCount?: number;
-    };
-} | null | undefined;
-type GenericQueryParams = Record<string, unknown> & { Restrict?: string[]; PageSize?: number; Fields?: string[] };
-type GenericRequestProps = {
-    queryParams?: GenericQueryParams;
-    children: (props: { data?: GenericRequestData; isLoading?: boolean }) => ReactNode;
-};
-type RestrictionMenuFetchMode = "all" | "deferred";
-
-type Props = {
-    restrictField: string
-    navigationMenuListClassName?: string
-    itemsToRender?: number
-    requestType: keyof typeof ComponentOptions
-    onlyUsedEntries?: boolean
-    enableHierarchy?: boolean
-    fetchMode?: RestrictionMenuFetchMode
-    showAllWhenEmpty?: boolean
-    queryParams?: GenericQueryParams
-};
-
-export const RestrictionMenuContainer: FC<Props> = ({
-    queryParams,
-    restrictField,
-    itemsToRender = 7,
-    requestType,
-    onlyUsedEntries = true,
-    enableHierarchy = false,
-    fetchMode = "deferred",
-    showAllWhenEmpty = true,
-    navigationMenuListClassName = "items-center justify-between flex-row",
-}) => {
-    const [loadAll, setLoadAll] = useState(false);
-    const RequestComponent = ComponentOptions[requestType] as unknown as FC<GenericRequestProps>;
-    const queryRestrict = queryParams?.Restrict || [];
-    const restrict = onlyUsedEntries ? ["hasInformationUnits=true", ...queryRestrict] : queryRestrict;
-    const explicitPageSize =
-        Number.isFinite(Number(queryParams?.PageSize)) && Number(queryParams?.PageSize) > 0
-            ? Number(queryParams?.PageSize)
-            : undefined;
-    const resolvedPageSize = useMemo(() => {
-        if (explicitPageSize) return explicitPageSize;
-        // TODO(UI/Gabriel): `deferred` currently behaves like "initial subset + load all on first More click".
-        // Keep this behavior for now; planned follow-up is incremental loading from inside the opened More dropdown.
-        if (fetchMode === "deferred" && !loadAll) return Math.max(itemsToRender, 1);
-        return 100;
-    }, [explicitPageSize, fetchMode, itemsToRender, loadAll]);
-    const requestedFields = Array.isArray(queryParams?.Fields) ? queryParams.Fields : undefined;
-    const resolvedFields = useMemo(() => {
-        const baseFields = requestedFields && requestedFields.length > 0 ? requestedFields : ["labels"];
-        if (!enableHierarchy) return baseFields;
-        const withParents = new Set(baseFields);
-        withParents.add("parents");
-        return Array.from(withParents);
-    }, [enableHierarchy, requestedFields]);
-
-    return (
-        <RequestComponent
-            queryParams={{
-                ...queryParams,
-                Fields: resolvedFields,
-                Links: true,
-                Sort: ["labels.value"],
-                PageSize: resolvedPageSize,
-                Restrict: restrict,
-            }}
-        >
-            {({ data, isLoading }) => {
-
-                if (isLoading) return (
-                    <div className="flex justify-between">
-                        <Skeleton className="w-12 h-9 rounded-full" />
-                        {Array(itemsToRender).fill(0).map((_, index) => (
-                            <Skeleton key={`skeleton-${index}`} className="w-28 h-9 rounded-full" />
-                        ))}
-                        <Skeleton className="w-20 h-9 rounded-full" />
-                    </div>
-                )
-
-                if (!data) return null;
-
-                const itemCount = data.items?.length || 0;
-                const totalItemCount = data.pageInfo?.totalItemCount;
-                const hasMoreFromServer = typeof totalItemCount === "number" ? totalItemCount > itemCount : false;
-                const hasMoreItems = hasMoreFromServer || (explicitPageSize ? false : (fetchMode === "deferred" && !loadAll && itemCount >= resolvedPageSize));
-
-                return (
-                    <RestrictionMenu
-                        restrictField={restrictField}
-                        items={data.items || []}
-                        enableHierarchy={enableHierarchy}
-                        hasMoreItems={hasMoreItems}
-                        showAllWhenEmpty={showAllWhenEmpty}
-                        onRequestMore={() => {
-                            if (fetchMode === "deferred" && !explicitPageSize) {
-                                setLoadAll(true);
-                            }
-                        }}
-                        navigationMenuListClassName={navigationMenuListClassName}
-                    />
-                )
-            }}
-        </RequestComponent>
-    );
-};
+export {
+    TaxonomyRestrictionMenu as RestrictionMenuContainer,
+    type TaxonomyRestrictionMenuProps as RestrictionMenuContainerProps,
+} from "./taxonomy-restriction-menu";

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

@@ -1,381 +1,4 @@
-"use client";
-
-import { FC, useEffect, useMemo, useState } from "react"
-import {
-    NavigationMenu,
-    NavigationMenuList,
-    NavigationMenuItem,
-    NavigationMenuTrigger,
-    NavigationMenuContent,
-} from "@c-rex/ui/navigation-menu";
-import { RestrictionDropdownItem, RestrictionNavigationItem } from "./restriction-menu-item";
-import { parseAsString, useQueryStates } from "nuqs";
-import { DomainEntityModel, ObjectRefModel } from "@c-rex/interfaces";
-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";
-
-
-type Props = {
-    restrictField: string
-    navigationMenuListClassName?: string
-    items: DomainEntityModel[],
-    enableHierarchy?: boolean,
-    hasMoreItems?: boolean,
-    showAllWhenEmpty?: boolean,
-    onRequestMore?: () => void,
-    itemsByRow?: {
-        [DEVICE_OPTIONS.MOBILE]: number,
-        [DEVICE_OPTIONS.TABLET]: number,
-        [DEVICE_OPTIONS.DESKTOP]: number,
-    }
-}
-
-type RestrictionTreeNode = {
-    item: DomainEntityModel;
-    children: RestrictionTreeNode[];
-};
-
-const hasSelectedDescendant = (node: RestrictionTreeNode, selectedShortIds: Set<string>): boolean => {
-    const shortId = node.item.shortId;
-    if (shortId && selectedShortIds.has(shortId)) {
-        return true;
-    }
-
-    return node.children.some((child) => hasSelectedDescendant(child, selectedShortIds));
-};
-
-const getNodeKeys = (item: DomainEntityModel): string[] => {
-    const keys = new Set<string>();
-    if (item.shortId) keys.add(`short:${item.shortId}`);
-    if (item.id) keys.add(`id:${item.id}`);
-    return Array.from(keys);
-};
-
-const extractParentKeys = (item: DomainEntityModel): string[] => {
-    const withParents = item as DomainEntityModel & { parents?: ObjectRefModel[] | null };
-    return (withParents.parents || [])
-        .flatMap((parent) => {
-            const keys: string[] = [];
-            if (parent.shortId) keys.push(`short:${parent.shortId}`);
-            if (parent.id) keys.push(`id:${parent.id}`);
-            return keys;
-        });
-};
-
-const buildRestrictionTree = (items: DomainEntityModel[]): RestrictionTreeNode[] => {
-    const nodes = new Map<string, RestrictionTreeNode>();
-    items.forEach((item) => {
-        const keys = getNodeKeys(item);
-        if (keys.length === 0) return;
-        const node: RestrictionTreeNode = { item, children: [] };
-        keys.forEach((key) => nodes.set(key, node));
-    });
-
-    const roots: RestrictionTreeNode[] = [];
-    const linked = new Set<RestrictionTreeNode>();
-    const rootSet = new Set<RestrictionTreeNode>();
-
-    items.forEach((item) => {
-        const [firstKey] = getNodeKeys(item);
-        if (!firstKey) return;
-        const node = nodes.get(firstKey);
-        if (!node) return;
-
-        const parentKeys = extractParentKeys(item);
-        const parentNode = parentKeys
-            .map((parentKey) => nodes.get(parentKey))
-            .find((candidate) => candidate !== undefined);
-
-        if (parentNode) {
-            if (!parentNode.children.includes(node)) {
-                parentNode.children.push(node);
-            }
-            linked.add(node);
-            return;
-        }
-
-        rootSet.add(node);
-    });
-
-    rootSet.forEach((root) => {
-        if (!linked.has(root) || root.item.shortId) {
-            roots.push(root);
-        }
-    });
-
-    return roots;
-};
-
-export const RestrictionMenu: FC<Props> = ({
-    items,
-    restrictField,
-    enableHierarchy = false,
-    hasMoreItems = false,
-    showAllWhenEmpty = true,
-    onRequestMore,
-    navigationMenuListClassName = "items-center justify-between flex-row",
-    itemsByRow = {
-        [DEVICE_OPTIONS.MOBILE]: 2,
-        [DEVICE_OPTIONS.TABLET]: 5,
-        [DEVICE_OPTIONS.DESKTOP]: 7,
-    }
-}) => {
-    const t = useTranslations();
-    const setRestrictionList = useRestrictionStore((state) => state.setRestrictionList);
-
-    const [params] = useQueryStates({
-        restrict: parseAsString,
-    }, {
-        history: 'push',
-        shallow: false,
-    });
-
-    const restrictionValues = useMemo(() => params.restrict?.split(`${restrictField}=`)[1]?.split(",") || [], [params.restrict, restrictField]);
-    const selectedRestrictionIds = useMemo(() => new Set(restrictionValues), [restrictionValues]);
-
-    const uiLang = useLocale();
-    const lang = uiLang?.split("-")[0] ?? "";
-
-    useEffect(() => {
-        const map = new Map<string, string>();
-        items.forEach((item) => {
-            const label = getLabelByLang(item.labels, lang);
-            if (item.shortId && label) {
-                map.set(item.shortId, label);
-            }
-        });
-        setRestrictionList(map);
-    }, [items, lang, setRestrictionList]);
-
-    const sortedItems = useMemo(() => {
-        //if shortId it is on the restrictionValues, it should be on top of the list, otherwise keep the original order
-
-        const sorted = [...items].sort((a, b) => {
-            const aShortId = a.shortId || "";
-            const bShortId = b.shortId || "";
-
-            const aIndex = restrictionValues.indexOf(aShortId);
-            const bIndex = restrictionValues.indexOf(bShortId);
-
-            if (aIndex === -1 && bIndex === -1) {
-                return 0; // keep original order if neither is in restrictionValues
-            }
-            if (aIndex === -1) {
-                return 1; // a goes after b
-            }
-            if (bIndex === -1) {
-                return -1; // a goes before b
-            }
-            return aIndex - bIndex; // sort by index in restrictionValues
-        });
-        return sorted;
-    }, [items, restrictionValues]);
-
-    const hierarchyRoots = useMemo(() => {
-        if (!enableHierarchy) return [];
-        return buildRestrictionTree(sortedItems);
-    }, [enableHierarchy, sortedItems]);
-
-    const device = useBreakpoint();
-    const [visibleCount, setVisibleCount] = useState(0);
-    const [visibleItems, setVisibleItems] = useState(sortedItems.slice(0, visibleCount));
-    const [hiddenItems, setHiddenItems] = useState(sortedItems.slice(visibleCount));
-
-    useEffect(() => {
-        if (device == null) return
-        setVisibleCount(itemsByRow[device as keyof typeof DEVICE_OPTIONS] as number);
-
-    }, [device, itemsByRow]);
-
-    useEffect(() => {
-        if (visibleCount == 0) return;
-
-        if (enableHierarchy) {
-            const roots = hierarchyRoots.map((node) => node.item);
-            setVisibleItems(roots.slice(0, visibleCount));
-            setHiddenItems(roots.slice(visibleCount));
-            return;
-        }
-
-        setVisibleItems(sortedItems.slice(0, visibleCount));
-        setHiddenItems(sortedItems.slice(visibleCount));
-    }, [enableHierarchy, hierarchyRoots, 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]);
-
-    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]);
-
-    const [expandedNodes, setExpandedNodes] = useState<Record<string, boolean>>({});
-    const toggleExpanded = (shortId: string) => {
-        setExpandedNodes((prev) => ({ ...prev, [shortId]: !prev[shortId] }));
-    };
-
-    const renderTreeNode = (node: RestrictionTreeNode, depth = 0) => {
-        const shortId = node.item.shortId || "";
-        const hasChildren = node.children.length > 0;
-        const isRootNode = depth === 0;
-        const isExpanded = isRootNode || expandedNodes[shortId] === true;
-        const isSelected = restrictionValues.includes(shortId);
-        const hasActiveDescendant = hasChildren && node.children.some((child) => hasSelectedDescendant(child, selectedRestrictionIds));
-        const shouldHighlightBranch = hasActiveDescendant && !isSelected;
-
-        return (
-            <li key={`tree-node-${shortId}`} className="flex flex-col w-full">
-                <div className="flex items-center gap-1">
-                    {hasChildren && !isRootNode ? (
-                        <button
-                            type="button"
-                            onClick={() => toggleExpanded(shortId)}
-                            className="shrink-0 rounded p-1 hover:bg-muted"
-                            aria-label={isExpanded ? "Collapse" : "Expand"}
-                        >
-                            {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
-                        </button>
-                    ) : (
-                        <span className="inline-block w-6" />
-                    )}
-                    <div
-                        style={{ marginLeft: depth * 12 }}
-                        className={cn(
-                            "w-full rounded-xl transition-colors",
-                            shouldHighlightBranch && "bg-primary/5 ring-1 ring-primary/10"
-                        )}
-                    >
-                        <RestrictionDropdownItem
-                            shortId={shortId}
-                            restrictField={restrictField}
-                            label={getLabelByLang(node.item.labels, lang)}
-                            selected={isSelected}
-                        />
-                    </div>
-                    {shouldHighlightBranch ? (
-                        <span
-                            aria-hidden="true"
-                            className="ml-1 h-2.5 w-2.5 shrink-0 rounded-full bg-primary/55"
-                        />
-                    ) : null}
-                </div>
-                {hasChildren && isExpanded && (
-                    <ul className="pl-3">
-                        {node.children.map((child) => renderTreeNode(child, depth + 1))}
-                    </ul>
-                )}
-            </li>
-        );
-    };
-
-    return (
-        <NavigationMenu viewport={false} className="max-w-full w-full c-rex-restriction-menu">
-            <NavigationMenuList className={cn("w-full", navigationMenuListClassName)}>
-
-
-                {(showAllWhenEmpty || items.length > 0) && (
-                    <RestrictionNavigationItem
-                        removeRestrictParam
-                        label={t('all')}
-                        selected={restrictionValues.length === 0}
-                    />
-                )}
-
-                {!enableHierarchy && visibleItems.map((item) => (
-                    <RestrictionNavigationItem
-                        key={item.shortId}
-                        shortId={item.shortId!}
-                        restrictField={restrictField as string}
-                        label={getLabelByLang(item.labels, lang)}
-                        selected={restrictionValues.includes(item.shortId!)}
-                    />
-                ))}
-
-                {enableHierarchy && visibleHierarchyRoots.map((rootNode) => {
-                    const shortId = rootNode.item.shortId || "";
-                    const hasChildren = rootNode.children.length > 0;
-                    const label = getLabelByLang(rootNode.item.labels, lang);
-                    const rootSelected = restrictionValues.includes(shortId);
-                    const hasActiveDescendant = hasChildren && hasSelectedDescendant(rootNode, selectedRestrictionIds);
-                    const shouldHighlightBranch = hasActiveDescendant && !rootSelected;
-
-                    if (!hasChildren) {
-                        return (
-                            <RestrictionNavigationItem
-                                key={shortId}
-                                shortId={shortId}
-                                restrictField={restrictField}
-                                label={label}
-                                selected={restrictionValues.includes(shortId)}
-                            />
-                        );
-                    }
-
-                    return (
-                        <NavigationMenuItem key={`root-dropdown-${shortId}`}>
-                            <NavigationMenuTrigger
-                                className={cn(
-                                    shouldHighlightBranch && "border border-primary/20 bg-primary/5 text-primary shadow-sm"
-                                )}
-                            >
-                                <span className="inline-flex items-center gap-2">
-                                    {label}
-                                    {shouldHighlightBranch ? (
-                                        <span
-                                            aria-hidden="true"
-                                            className="h-2 w-2 rounded-full bg-primary/55"
-                                        />
-                                    ) : null}
-                                </span>
-                            </NavigationMenuTrigger>
-                            <NavigationMenuContent className="w-96 sm:w-[420px] md:w-[520px]">
-                                <ul className="grid gap-1">
-                                    {renderTreeNode(rootNode, 0)}
-                                </ul>
-                            </NavigationMenuContent>
-                        </NavigationMenuItem>
-                    );
-                })}
-
-                {(enableHierarchy ? hiddenHierarchyRoots.length > 0 : hiddenItems.length > 0) || hasMoreItems ? (
-                    <NavigationMenuItem>
-                        <NavigationMenuTrigger onClick={onRequestMore}>
-                            {t('more')}
-                        </NavigationMenuTrigger>
-                        <NavigationMenuContent className="w-96 sm:w-[] md:w-[700px] lg:w-[65rem]">
-                            {enableHierarchy ? (
-                                <ul className="grid gap-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3">
-                                    {hiddenHierarchyRoots.map((node) => renderTreeNode(node, 0))}
-                                </ul>
-                            ) : (
-                                <ul className="grid gap-1 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4">
-                                    {hiddenItems.map((item) => (
-                                        <li
-                                            key={item.shortId}
-                                            className="flex items-center"
-                                        >
-                                            <RestrictionDropdownItem
-                                                shortId={item.shortId!}
-                                                restrictField={restrictField as string}
-                                                label={getLabelByLang(item.labels, lang)}
-                                                selected={restrictionValues.includes(item.shortId!)}
-                                            />
-                                        </li>
-                                    ))}
-                                </ul>
-                            )}
-                        </NavigationMenuContent>
-                    </NavigationMenuItem>
-                ) : null}
-            </NavigationMenuList>
-        </NavigationMenu>
-    );
-};
+export {
+    RestrictionSelectionMenu as RestrictionMenu,
+    type RestrictionSelectionMenuProps as RestrictionMenuProps,
+} from "./restriction-selection-menu";