@c-rex/components 0.1.37 → 0.1.39

package/src/renditions/image/rendition.tsx

@@ -1,56 +1,56 @@
-import { FC } from "react";
-import { ImageOff } from "lucide-react";
-import { CommonItemsModel, RenditionModel } from "@c-rex/interfaces";
-import { cn } from "@c-rex/utils";
-interface ImageRenditionProps {
-    items: CommonItemsModel[];
-    emptyImageStyle?: string;
-    imageStyle?: string;
-    formats?: string[];
-}
-
-export const ImageRendition: FC<ImageRenditionProps> = ({
-    items,
-    formats = ["image/svg+xml", "image/gif", "image/png", "image/jpg"],
-    emptyImageStyle,
-    imageStyle }) => {
-    if (!items || items.length === 0) return <ImageOff className={cn(emptyImageStyle, "text-muted")} />;
-
-    const item = items[0];
-    if (!item || item == undefined) return <ImageOff className={cn(emptyImageStyle, "text-muted")} />;
-
-    const wanted = formats.map((f) => f.toLowerCase());
-    let rendition = null
-    const renditions = items[0]?.renditions as RenditionModel[] || [];
-
-
-    for (const fmt of wanted) {
-
-        const found = renditions.find((r) => r.format?.toLowerCase() === fmt);
-
-        if (found) {
-            rendition = found;
-            break;
-        }
-    }
-
-    if (rendition == null) return <ImageOff className={cn(emptyImageStyle, "text-muted")} />;
-
-    const src =
-        rendition.links?.find((l) => l.rel === "view")?.href ??
-        rendition.links?.find((l) => l.rel === "download")?.href ??
-        rendition.links?.find((l) => l.rel === "resource")?.href ??
-        rendition.source ??
-        "";
-
-    if (!src) return <ImageOff className={cn(emptyImageStyle, "text-muted")} />;
-
-    const alt =
-        item.labels?.[0]?.value ??
-        item.titles?.[0]?.value ??
-        "Document image";
-
-    return (
-        <img src={src} alt={alt} loading="eager" className={cn(imageStyle, "w-full")} />
-    );
+import { FC } from "react";
+import { ImageOff } from "lucide-react";
+import { CommonItemsModel, RenditionModel } from "@c-rex/interfaces";
+import { cn } from "@c-rex/utils";
+interface ImageRenditionProps {
+    items: CommonItemsModel[];
+    emptyImageStyle?: string;
+    imageStyle?: string;
+    formats?: string[];
+}
+
+export const ImageRendition: FC<ImageRenditionProps> = ({
+    items,
+    formats = ["image/svg+xml", "image/gif", "image/png", "image/jpg"],
+    emptyImageStyle,
+    imageStyle }) => {
+    if (!items || items.length === 0) return <ImageOff className={cn(emptyImageStyle, "text-muted")} />;
+
+    const item = items[0];
+    if (!item || item == undefined) return <ImageOff className={cn(emptyImageStyle, "text-muted")} />;
+
+    const wanted = formats.map((f) => f.toLowerCase());
+    let rendition = null
+    const renditions = items[0]?.renditions as RenditionModel[] || [];
+
+
+    for (const fmt of wanted) {
+
+        const found = renditions.find((r) => r.format?.toLowerCase() === fmt);
+
+        if (found) {
+            rendition = found;
+            break;
+        }
+    }
+
+    if (rendition == null) return <ImageOff className={cn(emptyImageStyle, "text-muted")} />;
+
+    const src =
+        rendition.links?.find((l) => l.rel === "view")?.href ??
+        rendition.links?.find((l) => l.rel === "download")?.href ??
+        rendition.links?.find((l) => l.rel === "resource")?.href ??
+        rendition.source ??
+        "";
+
+    if (!src) return <ImageOff className={cn(emptyImageStyle, "text-muted")} />;
+
+    const alt =
+        item.labels?.[0]?.value ??
+        item.titles?.[0]?.value ??
+        "Document image";
+
+    return (
+        <img src={src} alt={alt} loading="eager" className={cn(imageStyle, "w-full")} />
+    );
 }

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

@@ -1,53 +1,117 @@
-"use client";
-
-import { ComponentProps, FC } from "react"
-import * as ComponentOptions from "../generated/client-components";
-import { InformationSubjectsGetAllClient } from "../generated/client-components";
-import { Skeleton } from "@c-rex/ui/skeleton";
-import { RestrictionMenu } from "./restriction-menu";
-
-type Props = {
-    restrictField?: string
-    navigationMenuListClassName?: string
-    itemsToRender?: number
-    requestType?: keyof typeof ComponentOptions
-} & Partial<Omit<ComponentProps<typeof InformationSubjectsGetAllClient>, ("render" | "children" | "pathParams")>>;
-
-export const RestrictionMenuContainer: FC<Props> = ({
-    queryParams,
-    restrictField = "informationSubjects",
-    itemsToRender = 7,
-    requestType = "InformationSubjectsGetAllClient",
-    navigationMenuListClassName = "items-center justify-between flex-row",
-}) => {
-    const RequestComponent = ComponentOptions[requestType] as unknown as FC<ComponentProps<typeof InformationSubjectsGetAllClient>>;
-
-    return (
-        <RequestComponent
-            queryParams={{
-                Fields: ["labels"],
-                PageSize: 100,
-                Links: true,
-                Sort: ["labels.value"],
-                ...queryParams
-            }}
-        >
-            {({ 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;
-
-                return <RestrictionMenu restrictField={restrictField} items={data.items} navigationMenuListClassName={navigationMenuListClassName} />
-            }}
-        </RequestComponent>
-    );
-};
+"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>
+    );
+};

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

@@ -1,147 +1,155 @@
-"use client";
-
-import { FC } from "react";
-import { Button } from "@c-rex/ui/button";
-import { NavigationMenuItem } from "@c-rex/ui/navigation-menu";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@c-rex/ui/tooltip";
-import { useQueryState } from "nuqs";
-
-
-type Props = {
-    shortId?: string;
-    label: string;
-    restrictField?: string;
-    removeRestrictParam?: boolean;
-    selected?: boolean;
-};
-
-export const RestrictionNavigationItem: FC<Props> = ({
-    shortId,
-    label,
-    restrictField,
-    removeRestrictParam = false,
-    selected = false,
-}) => {
-    const [restrict, setRestrict] = useQueryState("restrict", {
-        shallow: false,
-        history: "push",
-    });
-
-    const { restrictionValue, shouldRemoveRestrictParam } = getRestrictionValue({
-        shortId,
-        restrictField,
-        removeRestrictParam,
-        selected,
-        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={() => shouldRemoveRestrictParam ? setRestrict(null) : setRestrict(restrictionValue)}
-                className="cursor-pointer"
-            >
-                {labelNode}
-            </Button>
-        </NavigationMenuItem>
-    );
-};
-
-export const RestrictionDropdownItem: FC<Props> = ({
-    shortId,
-    label,
-    restrictField,
-    selected = false,
-}) => {
-    const [restrict, setRestrict] = useQueryState("restrict", {
-        shallow: false,
-        history: "push",
-    });
-
-    const { restrictionValue, shouldRemoveRestrictParam } = getRestrictionValue({
-        shortId,
-        restrictField,
-        selected,
-        currentRestrict: restrict,
-    });
-
-    return (
-        <Button
-            variant={selected ? "default" : "ghost"}
-            onClick={() => shouldRemoveRestrictParam ? setRestrict(null) : setRestrict(restrictionValue)}
-            rounded="full"
-            className="text-left text-wrap !h-auto min-h-10 w-full !justify-start cursor-pointer"
-        >
-            {label}
-        </Button>
-    );
-};
-
-function getRestrictionValue({
-    shortId,
-    restrictField,
-    removeRestrictParam = false,
-    selected = false,
-
-    currentRestrict,
-}: {
-    shortId?: string;
-    restrictField?: string;
-    removeRestrictParam?: boolean;
-    selected?: boolean;
-    currentRestrict: string | null;
-}): { restrictionValue: string | null; shouldRemoveRestrictParam: boolean } {
-    let restrictParam = "";
-    let shouldRemoveRestrictParam = removeRestrictParam;
-
-    if (currentRestrict) {
-        if (selected) {
-            const restrictionsLength = currentRestrict.split(",").length;
-            //if there is only one restriction, we can remove the whole restrict param
-            if (restrictionsLength === 1) {
-                shouldRemoveRestrictParam = true;
-            } else {
-                restrictParam = currentRestrict.replace(`${shortId}`, "").replace(",,", ",").replace(/(^,)|(,$)/g, "");
-
-                // Remove the restrict param if nothing remains after '='
-                if (/^[^=]+=$/.test(restrictParam)) {
-                    shouldRemoveRestrictParam = true;
-                }
-            }
-        } else {
-            restrictParam = `${currentRestrict},${shortId}`;
-        }
-    } else {
-        restrictParam = `${restrictField}=${shortId}`;
-    }
-
-    const restrictionValue = shouldRemoveRestrictParam ? null : restrictParam
-
-    return { restrictionValue, shouldRemoveRestrictParam };
-}
+"use client";
+
+import { FC } from "react";
+import { Button } from "@c-rex/ui/button";
+import { NavigationMenuItem } from "@c-rex/ui/navigation-menu";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@c-rex/ui/tooltip";
+import { useQueryState } from "nuqs";
+
+
+type Props = {
+    shortId?: string;
+    label: string;
+    restrictField?: string;
+    removeRestrictParam?: boolean;
+    selected?: boolean;
+    onClick?: () => void;
+};
+
+export const RestrictionNavigationItem: FC<Props> = ({
+    shortId,
+    label,
+    restrictField,
+    removeRestrictParam = false,
+    selected = false,
+}) => {
+    const [restrict, setRestrict] = useQueryState("restrict", {
+        shallow: false,
+        history: "push",
+    });
+
+    const { restrictionValue, shouldRemoveRestrictParam } = getRestrictionValue({
+        shortId,
+        restrictField,
+        removeRestrictParam,
+        selected,
+        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={() => shouldRemoveRestrictParam ? setRestrict(null) : setRestrict(restrictionValue)}
+                className="cursor-pointer"
+            >
+                {labelNode}
+            </Button>
+        </NavigationMenuItem>
+    );
+};
+
+export const RestrictionDropdownItem: FC<Props> = ({
+    shortId,
+    label,
+    restrictField,
+    selected = false,
+    onClick,
+}) => {
+    const [restrict, setRestrict] = useQueryState("restrict", {
+        shallow: false,
+        history: "push",
+    });
+
+    const { restrictionValue, shouldRemoveRestrictParam } = getRestrictionValue({
+        shortId,
+        restrictField,
+        selected,
+        currentRestrict: restrict,
+    });
+
+    return (
+        <Button
+            variant={selected ? "default" : "ghost"}
+            onClick={() => {
+                if (onClick) {
+                    onClick();
+                    return;
+                }
+                shouldRemoveRestrictParam ? setRestrict(null) : setRestrict(restrictionValue)
+            }}
+            rounded="full"
+            className="text-left text-wrap !h-auto min-h-10 w-full !justify-start cursor-pointer"
+        >
+            {label}
+        </Button>
+    );
+};
+
+function getRestrictionValue({
+    shortId,
+    restrictField,
+    removeRestrictParam = false,
+    selected = false,
+
+    currentRestrict,
+}: {
+    shortId?: string;
+    restrictField?: string;
+    removeRestrictParam?: boolean;
+    selected?: boolean;
+    currentRestrict: string | null;
+}): { restrictionValue: string | null; shouldRemoveRestrictParam: boolean } {
+    let restrictParam = "";
+    let shouldRemoveRestrictParam = removeRestrictParam;
+
+    if (currentRestrict) {
+        if (selected) {
+            const restrictionsLength = currentRestrict.split(",").length;
+            //if there is only one restriction, we can remove the whole restrict param
+            if (restrictionsLength === 1) {
+                shouldRemoveRestrictParam = true;
+            } else {
+                restrictParam = currentRestrict.replace(`${shortId}`, "").replace(",,", ",").replace(/(^,)|(,$)/g, "");
+
+                // Remove the restrict param if nothing remains after '='
+                if (/^[^=]+=$/.test(restrictParam)) {
+                    shouldRemoveRestrictParam = true;
+                }
+            }
+        } else {
+            restrictParam = `${currentRestrict},${shortId}`;
+        }
+    } else {
+        restrictParam = `${restrictField}=${shortId}`;
+    }
+
+    const restrictionValue = shouldRemoveRestrictParam ? null : restrictParam
+
+    return { restrictionValue, shouldRemoveRestrictParam };
+}