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

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

@@ -38,47 +38,30 @@ export const RestrictionNavigationItem: FC<Props> = ({
         currentRestrict: restrict,
     });
 
-    const labelStyle = {
-        display: 'inline-block',
-        maxWidth: 100,
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        verticalAlign: 'middle',
-    } as React.CSSProperties;
-
-    const needsTooltip = label.length > 12;
-
-    const labelNode = needsTooltip ? (
-        <TooltipProvider delayDuration={300}>
-            <Tooltip>
-                <TooltipTrigger asChild>
-                    <span style={labelStyle}>{label}</span>
-                </TooltipTrigger>
-                <TooltipContent>{label}</TooltipContent>
-            </Tooltip>
-        </TooltipProvider>
-    ) : (
-        <span style={labelStyle}>{label}</span>
-    );
-
     return (
         <NavigationMenuItem key={shortId} asChild>
-            <Button
-                variant={selected ? "default" : "outline"}
-                rounded="full"
-                onClick={() => {
-                    startSearchNavigation();
-                    if (shouldRemoveRestrictParam) {
-                        setRestrict(null);
-                    } else {
-                        setRestrict(restrictionValue);
-                    }
-                }}
-                className="cursor-pointer"
-            >
-                {labelNode}
-            </Button>
+            <TooltipProvider delayDuration={300}>
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <Button
+                            variant={selected ? "default" : "outline"}
+                            rounded="full"
+                            onClick={() => {
+                                startSearchNavigation();
+                                if (shouldRemoveRestrictParam) {
+                                    setRestrict(null);
+                                } else {
+                                    setRestrict(restrictionValue);
+                                }
+                            }}
+                            className="cursor-pointer"
+                        >
+                            {label}
+                        </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>{label}</TooltipContent>
+                </Tooltip>
+            </TooltipProvider>
         </NavigationMenuItem>
     );
 };
@@ -104,25 +87,32 @@ export const RestrictionDropdownItem: FC<Props> = ({
     });
 
     return (
-        <Button
-            variant={selected ? "default" : "ghost"}
-            onClick={() => {
-                if (onClick) {
-                    onClick();
-                    return;
-                }
-                startSearchNavigation();
-                if (shouldRemoveRestrictParam) {
-                    setRestrict(null);
-                } else {
-                    setRestrict(restrictionValue);
-                }
-            }}
-            rounded="full"
-            className="text-left text-wrap !h-auto min-h-10 w-full !justify-start cursor-pointer"
-        >
-            {label}
-        </Button>
+        <TooltipProvider delayDuration={300}>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <Button
+                        variant={selected ? "default" : "ghost"}
+                        onClick={() => {
+                            if (onClick) {
+                                onClick();
+                                return;
+                            }
+                            startSearchNavigation();
+                            if (shouldRemoveRestrictParam) {
+                                setRestrict(null);
+                            } else {
+                                setRestrict(restrictionValue);
+                            }
+                        }}
+                        rounded="full"
+                        className="text-left text-wrap !h-auto min-h-10 w-full !justify-start cursor-pointer"
+                    >
+                        {label}
+                    </Button>
+                </TooltipTrigger>
+                <TooltipContent>{label}</TooltipContent>
+            </Tooltip>
+        </TooltipProvider>
     );
 };
 

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

@@ -0,0 +1,445 @@
+"use client";
+
+import { FC, useEffect, useMemo, useRef, useState } from "react"
+import {
+    NavigationMenu,
+    NavigationMenuList,
+    NavigationMenuItem,
+} from "@c-rex/ui/navigation-menu";
+import { RestrictionNavigationItem } from "./restriction-menu-item";
+import { parseAsString, useQueryState, 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 { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from "@c-rex/ui/command";
+import { Dialog, DialogContent, DialogTitle } from "@c-rex/ui/dialog";
+import { Button } from "@c-rex/ui/button";
+import { Check, ChevronDown } from "lucide-react";
+import { useSearchNavigationStore } from "../stores/search-navigation-store";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@c-rex/ui/tooltip";
+
+type Props = {
+    restrictField: string
+    navigationMenuListClassName?: string
+    items: DomainEntityModel[],
+    enableHierarchy?: boolean,
+    hasMoreItems?: boolean,
+    showAllWhenEmpty?: boolean,
+    onRequestMore?: () => void,
+    stripLabelPrefix?: string,
+    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;
+};
+
+type RestrictionCommandDialogProps = {
+    label: string;
+    items: RestrictionTreeNode[];
+    restrictField: string;
+    selectedRestrictionIds: Set<string>;
+    lang: string;
+    highlighted?: boolean;
+    formatLabel?: (label: string) => string;
+};
+
+const RestrictionCommandDialog: FC<RestrictionCommandDialogProps> = ({
+    label,
+    items,
+    restrictField,
+    selectedRestrictionIds,
+    lang,
+    highlighted = false,
+    formatLabel,
+}) => {
+    const fmt = (raw: string) => formatLabel ? formatLabel(raw) : raw;
+    const [open, setOpen] = useState(false);
+    const [search, setSearch] = useState("");
+    const listRef = useRef<HTMLDivElement>(null);
+    const [restrict, setRestrict] = useQueryState("restrict", { shallow: false, history: "push" });
+    const startSearchNavigation = useSearchNavigationStore((state) => state.start);
+    const t = useTranslations();
+    const device = useBreakpoint();
+
+    useEffect(() => {
+        if (listRef.current) {
+            listRef.current.scrollTop = 0;
+        }
+    }, [search]);
+
+    const filteredItems = useMemo(() => {
+        if (!search) return items;
+        const lower = search.toLowerCase();
+        return items.flatMap((node) => {
+            const groupLabel = getLabelByLang(node.item.labels, lang) ?? node.item.shortId ?? "";
+            const matchingChildren = node.children.filter((child) => {
+                const childLabel = getLabelByLang(child.item.labels, lang) ?? child.item.shortId ?? "";
+                return childLabel.toLowerCase().includes(lower);
+            });
+            if (groupLabel.toLowerCase().includes(lower)) {
+                return [node];
+            }
+            if (matchingChildren.length > 0) {
+                return [{ ...node, children: matchingChildren }];
+            }
+            return [];
+        });
+    }, [items, search, lang]);
+
+    const handleSelect = (shortId: string, isSelected: boolean) => {
+        startSearchNavigation();
+        if (isSelected) {
+            const restrictionsLength = restrict?.split(",").length ?? 0;
+            if (restrictionsLength <= 1) {
+                setRestrict(null);
+            } else {
+                const updated = restrict!
+                    .replace(shortId, "")
+                    .replace(",,", ",")
+                    .replace(/(^,)|(,$)/g, "");
+                setRestrict(/^[^=]+=$/.test(updated) ? null : updated);
+            }
+        } else {
+            setRestrict(restrict ? `${restrict},${shortId}` : `${restrictField}=${shortId}`);
+        }
+        setOpen(false);
+    };
+
+    return (
+        <>
+            <TooltipProvider delayDuration={300}>
+                <Button
+                    variant={highlighted ? "default" : "outline"}
+                    rounded="full"
+                    onClick={() => setOpen(true)}
+                    className="cursor-pointer gap-1"
+                >
+                    <Tooltip>
+                        <TooltipTrigger asChild>
+                            <span className="items-center gap-2">
+                                {(
+                                    device == DEVICE_OPTIONS.MOBILE && label.length > 15
+                                ) ? `${label.slice(0, 12)}...` : label}
+                                {highlighted && (
+                                    <span aria-hidden="true" className="h-2 w-2 rounded-full bg-primary/55" />
+                                )}
+                            </span>
+                        </TooltipTrigger>
+                        <TooltipContent>{label}</TooltipContent>
+                    </Tooltip>
+                    <ChevronDown className="h-3 w-3 opacity-60" />
+                </Button>
+            </TooltipProvider>
+
+            <Dialog open={open} onOpenChange={setOpen}>
+                <DialogContent className="overflow-hidden p-0">
+                    <DialogTitle className="sr-only">{t("search")}</DialogTitle>
+                    <Command shouldFilter={false} className="[&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+                        <CommandInput placeholder={t("search")} value={search} onValueChange={setSearch} />
+                        <CommandList ref={listRef}>
+                            <CommandEmpty>{t("results.noResultsTitle")}</CommandEmpty>
+                            {filteredItems.map((node) => {
+                                const groupShortId = node.item.shortId ?? "";
+                                const groupLabel = fmt(getLabelByLang(node.item.labels, lang) ?? groupShortId);
+                                const groupIsSelected = selectedRestrictionIds.has(groupShortId);
+
+                                return (
+                                    <>
+                                        <CommandItem
+                                            key={groupShortId}
+                                            value={groupLabel}
+                                            onSelect={() => handleSelect(groupShortId, groupIsSelected)}
+                                            className="cursor-pointer"
+                                        >
+                                            <span className={cn("flex-1", groupIsSelected && "font-medium")}>{groupLabel}</span>
+                                            {groupIsSelected && <Check className="h-4 w-4 shrink-0 text-primary" />}
+                                        </CommandItem>
+                                        {node.children.map((child) => {
+                                            const shortId = child.item.shortId ?? "";
+                                            const childLabel = fmt(getLabelByLang(child.item.labels, lang) ?? shortId);
+                                            const isSelected = selectedRestrictionIds.has(shortId);
+                                            return (
+                                                <CommandItem
+                                                    key={shortId}
+                                                    value={`${groupLabel}/${childLabel}`}
+                                                    onSelect={() => handleSelect(shortId, isSelected)}
+                                                    className="cursor-pointer !pl-8"
+                                                >
+                                                    <span className={cn("flex-1", isSelected && "font-bold")}>{childLabel}</span>
+                                                    {isSelected && <Check className="h-4 w-4 shrink-0 text-primary" />}
+                                                </CommandItem>
+                                            );
+                                        })}
+                                    </>
+                                );
+                            })}
+                        </CommandList>
+                    </Command>
+                </DialogContent>
+            </Dialog>
+        </>
+    );
+};
+
+export const RestrictionSelectionCommandMenu: FC<Props> = ({
+    items,
+    restrictField,
+    enableHierarchy = false,
+    hasMoreItems = false,
+    showAllWhenEmpty = true,
+    onRequestMore,
+    stripLabelPrefix,
+    navigationMenuListClassName = "items-center justify-start gap-4 flex-row",
+    itemsByRow = {
+        [DEVICE_OPTIONS.MOBILE]: 2,
+        [DEVICE_OPTIONS.TABLET]: 4,
+        [DEVICE_OPTIONS.DESKTOP]: 7,
+    }
+}) => {
+    const t = useTranslations();
+    const setRestrictionList = useRestrictionStore((state) => state.setRestrictionList);
+    const formatLabel = stripLabelPrefix
+        ? (label: string) => label.replace(new RegExp(`^${stripLabelPrefix}`, "i"), "")
+        : undefined;
+
+    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(() => {
+        return [...items].sort((a, b) => {
+            const aIndex = restrictionValues.indexOf(a.shortId || "");
+            const bIndex = restrictionValues.indexOf(b.shortId || "");
+            if (aIndex === -1 && bIndex === -1) return 0;
+            if (aIndex === -1) return 1;
+            if (bIndex === -1) return -1;
+            return aIndex - bIndex;
+        });
+    }, [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 hasHiddenContent = (enableHierarchy ? hiddenHierarchyRoots.length > 0 : hiddenItems.length > 0) || hasMoreItems;
+
+    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) => {
+                    const rawLabel = getLabelByLang(item.labels, lang);
+                    const label = rawLabel && formatLabel ? formatLabel(rawLabel) : rawLabel;
+                    return (
+                        <RestrictionNavigationItem
+                            key={item.shortId}
+                            shortId={item.shortId!}
+                            restrictField={restrictField}
+                            label={label}
+                            selected={restrictionValues.includes(item.shortId!)}
+                        />
+                    );
+                })}
+
+                {enableHierarchy && visibleHierarchyRoots.map((rootNode) => {
+                    const shortId = rootNode.item.shortId || "";
+                    const hasChildren = rootNode.children.length > 0;
+                    const rawLabel = getLabelByLang(rootNode.item.labels, lang);
+                    const label = rawLabel && formatLabel ? formatLabel(rawLabel) : rawLabel;
+                    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={rootSelected}
+                            />
+                        );
+                    }
+
+                    return (
+                        <NavigationMenuItem key={`root-command-${shortId}`}>
+                            <RestrictionCommandDialog
+                                label={label}
+                                items={rootNode.children}
+                                restrictField={restrictField}
+                                selectedRestrictionIds={selectedRestrictionIds}
+                                lang={lang}
+                                highlighted={shouldHighlightBranch}
+                                formatLabel={formatLabel}
+                            />
+                        </NavigationMenuItem>
+                    );
+                })}
+
+                {hasHiddenContent && (
+                    <NavigationMenuItem>
+                        <RestrictionCommandDialog
+                            label={t('more')}
+                            items={
+                                enableHierarchy
+                                    ? hiddenHierarchyRoots
+                                    : hiddenItems.map((item) => ({ item, children: [] }))
+                            }
+                            restrictField={restrictField}
+                            selectedRestrictionIds={selectedRestrictionIds}
+                            lang={lang}
+                            highlighted={false}
+                            formatLabel={formatLabel}
+                        />
+                    </NavigationMenuItem>
+                )}
+
+            </NavigationMenuList>
+        </NavigationMenu>
+    );
+};

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

@@ -117,10 +117,10 @@ export const RestrictionSelectionMenu: FC<Props> = ({
     hasMoreItems = false,
     showAllWhenEmpty = true,
     onRequestMore,
-    navigationMenuListClassName = "items-center justify-between flex-row",
+    navigationMenuListClassName = "items-center justify-start gap-4 flex-row",
     itemsByRow = {
         [DEVICE_OPTIONS.MOBILE]: 2,
-        [DEVICE_OPTIONS.TABLET]: 5,
+        [DEVICE_OPTIONS.TABLET]: 4,
         [DEVICE_OPTIONS.DESKTOP]: 7,
     }
 }) => {
@@ -277,7 +277,7 @@ export const RestrictionSelectionMenu: FC<Props> = ({
     };
 
     return (
-        <NavigationMenu viewport={false} className="max-w-full w-full c-rex-restriction-menu">
+        <NavigationMenu viewport={false} className="max-w-full w-full c-rex-restriction-menu overflow-auto pb-4">
             <NavigationMenuList className={cn("w-full", navigationMenuListClassName)}>
 
 
@@ -326,7 +326,7 @@ export const RestrictionSelectionMenu: FC<Props> = ({
                                     shouldHighlightBranch && "border border-primary/20 bg-primary/5 text-primary shadow-sm"
                                 )}
                             >
-                                <span className="inline-flex items-center gap-2">
+                                <span className="max-w-40 overflow-hidden text-ellipsis items-center gap-2">
                                     {label}
                                     {shouldHighlightBranch ? (
                                         <span
@@ -378,6 +378,4 @@ export const RestrictionSelectionMenu: FC<Props> = ({
             </NavigationMenuList>
         </NavigationMenu>
     );
-};
-
-export const RestrictionMenu = RestrictionSelectionMenu;
+};