@cosmicdrift/kumiko-renderer 0.388.0 → 0.390.0

package/dist/app/kumiko-screen.js

@@ -3,7 +3,7 @@ import { useEffect, useMemo, useRef } from "react";
 import { useUserRoles } from "../context/user-roles-context.js";
 import { useQuery } from "../hooks/use-query.js";
 import { useTranslation } from "../i18n.js";
-import { PageHeaderSlotAvailableProvider, usePageHeaderSlotAvailable, } from "../page-header-slot.js";
+import { PageHeaderSlotAvailableProvider } from "../page-header-slot.js";
 import { usePrimitives } from "../primitives.js";
 import { ActionFormBody } from "./action-form-body.js";
 import { ConfigEditBody } from "./config-edit-body.js";
@@ -11,6 +11,7 @@ import { useCustomScreenComponent } from "./custom-screens.js";
 import { useDashboardBody } from "./dashboard-body.js";
 import { EntityEditScreen } from "./entity-edit-screen.js";
 import { EntityListScreen } from "./entity-list-screen.js";
+import { LockedHeaderScope, StandInChainBoundary } from "./locked-screen-header.js";
 import { ProjectionDetailBody } from "./projection-detail-body.js";
 import { ProjectionListBody } from "./projection-list-body.js";
 import { lastSegment } from "./qn.js";
@@ -54,7 +55,7 @@ export function KumikoScreen({ schema, qn, translate, entityId, onRowClick, onCo
         onCopyLink,
     });
     // Gate every entry (incl. direct URL): the body element is only mounted once the condition holds.
-    const body = screen.visibleWhen !== undefined ? (_jsx(ScreenVisibilityGate, { featureName: schema.featureName, visibleWhen: screen.visibleWhen, fallback: screen.fallback, translate: translate, children: screenBody })) : (screenBody);
+    const body = screen.visibleWhen !== undefined ? (_jsx(ScreenVisibilityGate, { featureName: schema.featureName, visibleWhen: screen.visibleWhen, fallback: screen.fallback, translate: translate, children: _jsx(StandInChainBoundary, { children: screenBody }) })) : (_jsx(StandInChainBoundary, { children: screenBody }));
     // An embedded screen (e.g. a dashboard panel) keeps its parent's host and
     // must not portal its page header into the shell that hosts the outer screen.
     if (outerHost !== undefined) {
@@ -78,16 +79,7 @@ function ScreenVisibilityGate({ featureName, visibleWhen, fallback, translate, c
     if (fallback !== undefined) {
         return _jsx(FallbackScreen, { featureName: featureName, fallback: fallback, translate: translate });
     }
-    return (_jsxs(_Fragment, { children: [_jsx(LockedScreenHeader, {}), _jsx(ScreenUnavailableBanner, {})] }));
-}
-// The route still names the locked screen; its breadcrumb must not label what stands in for it.
-// With a stand-in the header is labelled with that screen instead, none if it has no title.
-function LockedScreenHeader({ standInScreenId }) {
-    const { PageHeader } = usePrimitives();
-    const pageHeaderSlotAvailable = usePageHeaderSlotAvailable();
-    if (PageHeader === undefined || !pageHeaderSlotAvailable)
-        return null;
-    return standInScreenId !== undefined ? (_jsx(PageHeader, { hideBreadcrumb: true, breadcrumbScreenId: standInScreenId })) : (_jsx(PageHeader, { hideBreadcrumb: true }));
+    return (_jsxs(_Fragment, { children: [_jsx(LockedHeaderScope, {}), _jsx(ScreenUnavailableBanner, {})] }));
 }
 function ScreenUnavailableBanner() {
     const { Banner } = usePrimitives();
@@ -99,9 +91,9 @@ function FallbackScreen({ featureName, fallback, translate, }) {
     // Also undefined when the user lacks access to the fallback screen, which is
     // not a framework error.
     if (target === undefined) {
-        return (_jsxs(_Fragment, { children: [_jsx(LockedScreenHeader, {}), _jsx(ScreenUnavailableBanner, {})] }));
+        return (_jsxs(_Fragment, { children: [_jsx(LockedHeaderScope, {}), _jsx(ScreenUnavailableBanner, {})] }));
     }
-    return (_jsxs(_Fragment, { children: [_jsx(LockedScreenHeader, { standInScreenId: lastSegment(target.qn) }), _jsx(KumikoScreen, { schema: target.schema, qn: target.qn, translate: translate })] }));
+    return (_jsx(LockedHeaderScope, { standInScreenId: lastSegment(target.qn), children: _jsx(KumikoScreen, { schema: target.schema, qn: target.qn, translate: translate }) }));
 }
 function renderScreenBody({ schema, screen, translate, entityId, onRowClick, onCopyLink, }) {
     switch (screen.type) {

package/dist/app/list-bulk-actions.d.ts

@@ -0,0 +1,18 @@
+import type { ListBulkAction, RowAction } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { DataTableBulk, DataTableBulkAction } from "../data-table-bulk-types.ts";
+import type { Dispatcher, Translate } from "../headless/index.ts";
+/** Resolves each bulk action against its writeHandler row action; one that resolves to nothing is dropped. */
+export declare function buildListBulkActions(options: {
+    readonly bulkActions: readonly ListBulkAction[];
+    readonly rowActions: readonly RowAction[] | undefined;
+    readonly translate: Translate;
+    readonly dispatcher: Dispatcher;
+}): readonly DataTableBulkAction[];
+/** DataTable `bulk` prop of a list screen; undefined without bulk actions or dispatcher. */
+export declare function useListBulk(options: {
+    readonly bulkActions: readonly ListBulkAction[] | undefined;
+    readonly rowActions: readonly RowAction[] | undefined;
+    readonly translate: Translate;
+    readonly dispatcher: Dispatcher | undefined;
+    readonly reload: () => Promise<unknown>;
+}): DataTableBulk | undefined;

package/dist/app/list-bulk-actions.js

@@ -0,0 +1,54 @@
+import { evalFieldCondition } from "@cosmicdrift/kumiko-framework/ui-types";
+import { resolveActionIcon } from "@cosmicdrift/kumiko-types/action-icon";
+import { useMemo } from "react";
+import { isWriteHandlerRowAction, refetchAfterWrite, writeRowAction } from "./row-actions.js";
+import { dispatcherErrorText } from "./write-failed-error.js";
+function asksForConfirm(bulk, rowAction) {
+    return (bulk.confirm !== undefined || rowAction.confirm !== undefined || rowAction.style === "danger");
+}
+function buildBulkAction(bulk, rowAction, translate, dispatcher) {
+    const label = translate(rowAction.label);
+    const visible = rowAction.visible;
+    const confirmKey = bulk.confirm ?? "kumiko.list.bulk.confirm";
+    return {
+        id: bulk.id,
+        label,
+        ...(rowAction.style !== undefined && { style: rowAction.style }),
+        icon: resolveActionIcon(rowAction.id, rowAction.icon),
+        ...(asksForConfirm(bulk, rowAction) && {
+            confirmText: (count) => translate(confirmKey, { count, action: label }),
+        }),
+        ...(rowAction.confirmLabel !== undefined && {
+            confirmLabel: translate(rowAction.confirmLabel),
+        }),
+        appliesTo: (row) => visible === undefined || evalFieldCondition(visible, row.values),
+        writeRow: async (row) => {
+            const result = await writeRowAction(rowAction, row, dispatcher);
+            return result.isSuccess
+                ? { kind: "succeeded" }
+                : { kind: "failed", message: dispatcherErrorText(result.error, translate) };
+        },
+    };
+}
+/** Resolves each bulk action against its writeHandler row action; one that resolves to nothing is dropped. */
+export function buildListBulkActions(options) {
+    const { bulkActions, rowActions, translate, dispatcher } = options;
+    return bulkActions.flatMap((bulk) => {
+        const rowAction = rowActions?.find((action) => action.id === bulk.rowAction);
+        if (rowAction === undefined || !isWriteHandlerRowAction(rowAction))
+            return [];
+        return [buildBulkAction(bulk, rowAction, translate, dispatcher)];
+    });
+}
+/** DataTable `bulk` prop of a list screen; undefined without bulk actions or dispatcher. */
+export function useListBulk(options) {
+    const { bulkActions, rowActions, translate, dispatcher, reload } = options;
+    return useMemo(() => {
+        if (bulkActions === undefined || dispatcher === undefined)
+            return undefined;
+        const actions = buildListBulkActions({ bulkActions, rowActions, translate, dispatcher });
+        if (actions.length === 0)
+            return undefined;
+        return { actions, reload: () => refetchAfterWrite(reload) };
+    }, [bulkActions, rowActions, translate, dispatcher, reload]);
+}

package/dist/app/locked-screen-header.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+/** Screen bodies (and anything embedded in them) are not part of a fallback chain. */
+export declare function StandInChainBoundary({ children }: {
+    readonly children: ReactNode;
+}): ReactNode;
+export declare function LockedHeaderScope({ standInScreenId, children, }: {
+    readonly standInScreenId?: string;
+    readonly children?: ReactNode;
+}): ReactNode;

package/dist/app/locked-screen-header.js

@@ -0,0 +1,33 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from "react";
+import { usePageHeaderSlotAvailable } from "../page-header-slot.js";
+import { usePrimitives } from "../primitives.js";
+// The route still names the locked screen; its breadcrumb must not label what stands in for it.
+// With a stand-in the header is labelled with that screen instead, none if it has no title.
+function LockedScreenHeader({ standInScreenId }) {
+    const { PageHeader } = usePrimitives();
+    const pageHeaderSlotAvailable = usePageHeaderSlotAvailable();
+    if (PageHeader === undefined || !pageHeaderSlotAvailable)
+        return null;
+    return standInScreenId !== undefined ? (_jsx(PageHeader, { hideBreadcrumb: true, breadcrumbScreenId: standInScreenId })) : (_jsx(PageHeader, { hideBreadcrumb: true }));
+}
+// A stand-in can itself be locked and fall back again. The header slot is a single value that
+// every mounted PageHeader overwrites and clears on unmount, so only the outermost scope mounts
+// a header; nested scopes report the screen that finally renders up to it.
+const ReportStandInContext = createContext(undefined);
+/** Screen bodies (and anything embedded in them) are not part of a fallback chain. */
+export function StandInChainBoundary({ children }) {
+    return (_jsx(ReportStandInContext.Provider, { value: undefined, children: children }));
+}
+export function LockedHeaderScope({ standInScreenId, children, }) {
+    const reportToOuter = useContext(ReportStandInContext);
+    const [inner, setInner] = useState(undefined);
+    const effectiveScreenId = inner !== undefined ? inner.screenId : standInScreenId;
+    useEffect(() => {
+        if (reportToOuter === undefined)
+            return;
+        reportToOuter({ screenId: effectiveScreenId });
+        return () => reportToOuter(undefined);
+    }, [reportToOuter, effectiveScreenId]);
+    return (_jsxs(_Fragment, { children: [reportToOuter === undefined && (_jsx(LockedScreenHeader, { ...(effectiveScreenId !== undefined && { standInScreenId: effectiveScreenId }) })), _jsx(ReportStandInContext.Provider, { value: setInner, children: children })] }));
+}