@plumile/backoffice-react 0.1.178 → 0.1.181

package/lib/esm/pages/BackofficeEntityListPage.js

@@ -1,192 +1,181 @@
 import { useBackofficeReactTranslation as e } from "../i18n/useBackofficeReactTranslation.js";
-import { useBackofficePaginationFragment as t } from "../relay/typedRelayHooks.js";
-import { LazyBackofficeEntityActionFormDialog as n } from "../components/backoffice/actions/LazyBackofficeEntityActionFormDialog.js";
-import { buildDataTableColumns as r } from "../components/backoffice/columns/buildDataTableColumns.js";
-import { BackofficeRightPageLayout as i } from "../components/backoffice/layout/breadcrumb/BackofficeRightPageLayout.js";
-import { buildEntityListBreadcrumb as a } from "../components/backoffice/layout/breadcrumb/buildBreadcrumbs.js";
-import { rowFlagsColumnCell as o } from "../components/backoffice/list/RowFlagsCell.css.js";
-import { RowFlagsCell as s } from "../components/backoffice/list/RowFlagsCell.js";
-import { BackofficeLazyEntityCountLabel as c } from "../components/backoffice/refs/BackofficeLazyEntityCount.js";
-import { BackofficeEntityListScaffold as l } from "../components/backoffice/scaffolds/BackofficeEntityListScaffold.js";
-import { useBackofficeListRefetch as u } from "../hooks/useBackofficeListRefetch.js";
-import { useBackofficeListUrlState as d } from "../hooks/useBackofficeListUrlState.js";
-import { useBackofficeLoadMore as f } from "../hooks/useBackofficeLoadMore.js";
-import { buildActionsColumn as p, computeActionsColumnWidthPx as m, computeRowFlagsColumnWidthPx as h, isFormMutationAction as g, isRouteAction as ee, resolveActionVariant as te, resolveLabel as _, resolveTrackBySize as v } from "./BackofficeEntityListPage.helpers.js";
-import { actionTrigger as y, actionsColumnCell as b, headerActions as ne } from "./backofficeEntityListPage.css.js";
-import { useCallback as x, useMemo as S, useState as C } from "react";
-import { jsx as w, jsxs as re } from "react/jsx-runtime";
-import { useTranslation as T } from "react-i18next";
-import { Button as E } from "@plumile/ui/atomic/atoms/button/Button.js";
-import { usePreloadedQuery as D } from "react-relay";
-import { BACKOFFICE_LIST_DEFAULTS as O, BACKOFFICE_LIST_REFETCH_POLICY as ie } from "@plumile/backoffice-core/constants.js";
-import ae from "@plumile/router/routing/Link.js";
-import { LinkButton as oe } from "@plumile/ui/atomic/atoms/button/LinkButton.js";
-import { TableCell as se } from "@plumile/ui/components/data-table/TableCell.js";
-import { EyeSvg as ce } from "@plumile/ui/icons/EyeSvg.js";
+import { LazyBackofficeEntityActionFormDialog as t } from "../components/backoffice/actions/LazyBackofficeEntityActionFormDialog.js";
+import { buildDataTableColumns as n } from "../components/backoffice/columns/buildDataTableColumns.js";
+import { BackofficeRightPageLayout as r } from "../components/backoffice/layout/breadcrumb/BackofficeRightPageLayout.js";
+import { buildEntityListBreadcrumb as i } from "../components/backoffice/layout/breadcrumb/buildBreadcrumbs.js";
+import { rowFlagsColumnCell as a } from "../components/backoffice/list/RowFlagsCell.css.js";
+import { RowFlagsCell as o } from "../components/backoffice/list/RowFlagsCell.js";
+import { BackofficeEntityListScaffold as s } from "../components/backoffice/scaffolds/BackofficeEntityListScaffold.js";
+import { useBackofficeListUrlState as c } from "../hooks/useBackofficeListUrlState.js";
+import { BackofficeEntityListRouteProvider as l } from "./BackofficeEntityListRouteContext.js";
+import { buildActionsColumn as u, computeActionsColumnWidthPx as d, computeRowFlagsColumnWidthPx as f, isFormMutationAction as p, isRouteAction as m, resolveActionVariant as h, resolveLabel as g, resolveTrackBySize as _ } from "./BackofficeEntityListPage.helpers.js";
+import { actionTrigger as v, actionsColumnCell as y, headerActions as b } from "./backofficeEntityListPage.css.js";
+import { Suspense as x, useCallback as S, useMemo as C, useRef as w, useState as T } from "react";
+import { jsx as E, jsxs as D } from "react/jsx-runtime";
+import { useTranslation as O } from "react-i18next";
+import { Button as k } from "@plumile/ui/atomic/atoms/button/Button.js";
+import A from "@plumile/router/routing/Link.js";
+import { LinkButton as j } from "@plumile/ui/atomic/atoms/button/LinkButton.js";
+import { TableCell as M } from "@plumile/ui/components/data-table/TableCell.js";
+import { EyeSvg as N } from "@plumile/ui/icons/EyeSvg.js";
 //#region src/pages/BackofficeEntityListPage.tsx
-var le = (e, t, n, r) => {
-	let i = t != null && t.length > 0, a = e;
+var P = (e, t, n, r) => {
+	let i = t != null && t.length > 0, s = e;
 	if (i) {
 		let n = [{
 			id: "__rowFlags",
 			header: "",
-			className: o,
+			className: a,
 			mobileRole: "badge",
-			cell: (e) => /* @__PURE__ */ w(s, {
+			cell: (e) => /* @__PURE__ */ E(o, {
 				row: e,
 				flags: t,
 				tApp: r
 			})
 		}, ...e], i = n.some((e) => e.isPrimary === !0);
-		a = n, i || (a = n.map((e, t) => t === 1 ? {
+		s = n, i || (s = n.map((e, t) => t === 1 ? {
 			...e,
 			isPrimary: !0
 		} : e));
 	}
 	let c = 0;
 	i && (c = t.length);
-	let l = h(c), u = m(n), d = 0;
-	i && (d = 1);
-	let f = a.length - d - 1, p = a.slice(d, d + Math.max(0, f)).map((e) => v(e, "1fr")).join(" "), g = "";
-	return g = i ? `${l}px ${p} ${u}px` : `${p} ${u}px`, {
-		columns: a,
+	let l = f(c), u = d(n), p = 0;
+	i && (p = 1);
+	let m = s.length - p - 1, h = s.slice(p, p + Math.max(0, m)).map((e) => _(e, "1fr")).join(" "), g = "";
+	return g = i ? `${l}px ${h} ${u}px` : `${h} ${u}px`, {
+		columns: s,
 		gridTemplateColumns: g
 	};
-}, k = ({ config: a, prepared: o, breadcrumb: s }) => {
-	let m = a.list, { t: h } = T(), { t: v } = e(), [k, A] = C(null), [ue, j] = C(0), M = D(m.query, o.query), { data: N, loadNext: P, hasNext: F, isLoadingNext: I, refetch: L } = t(m.fragment, M), R = m.getConnection(N), z = S(() => R.edges.map((e) => m.toRow(e.node)), [R.edges, m]), { columns: B, gridTemplateColumns: V } = S(() => {
-		let e = r(m.columns, {
-			tApp: h,
-			t: v
-		}), t = p({
-			ariaLabel: v("actions.view"),
-			fallback: v("common.notAvailable"),
-			className: b,
+}, F = ({ children: i, config: a, breadcrumb: o }) => {
+	let d = a.list, { t: f } = O(), { t: _ } = e(), [F, I] = T(null), [L, R] = T(0), z = w(null), B = S((e) => {
+		z.current = e;
+	}, []), { columns: V, gridTemplateColumns: H } = C(() => {
+		let e = n(d.columns, {
+			tApp: f,
+			t: _
+		}), t = u({
+			ariaLabel: _("actions.view"),
+			fallback: _("common.notAvailable"),
+			className: y,
 			resolveDetailHref: (e) => a.routes.detail(e),
-			renderAction: ({ href: e, ariaLabel: t }) => /* @__PURE__ */ w(se.Actions, { children: /* @__PURE__ */ w(ae, {
+			renderAction: ({ href: e, ariaLabel: t }) => /* @__PURE__ */ E(M.Actions, { children: /* @__PURE__ */ E(A, {
 				to: e,
-				className: y,
+				className: v,
 				"aria-label": t,
 				title: t,
-				preloadOnMouseEnter: !0,
-				children: /* @__PURE__ */ w(ce, {
+				preloadOnHover: "code",
+				children: /* @__PURE__ */ E(N, {
 					width: 16,
 					height: 16
 				})
 			}) })
 		});
-		return le([...e, t], m.rowFlags, 1, h);
+		return P([...e, t], d.rowFlags, 1, f);
 	}, [
 		a.routes,
-		m.columns,
-		m.rowFlags,
-		v,
-		h
-	]), H = x((e) => m.getRowId(e), [m]), { state: U, pushState: de } = d(a), W = a.listDefaults ?? m.defaultState ?? {
-		where: null,
-		sort: null
-	}, G = U.sort ?? W.sort, { pageSize: K } = O, { isRefreshing: fe, onRefresh: q } = u({
-		refetch: L,
-		variables: S(() => ({
-			where: U.where,
-			sort: G,
-			count: K,
-			cursor: null
-		}), [
-			K,
-			G,
-			U.where
-		]),
-		defaults: {
-			where: W.where,
-			sort: W.sort,
-			count: K,
-			cursor: null
-		},
-		fetchPolicy: ie,
-		buildQueryVariables: m.buildQueryVariables
-	}), J = x(() => {
-		j((e) => e + 1), q();
-	}, [q]), Y = f({
-		hasNext: F,
-		isLoadingNext: I,
-		loadNext: P,
-		count: K
-	}), X = S(() => a.listActions ?? [], [a.listActions]), Z = S(() => X.filter((e) => e.isVisible == null ? !0 : e.isVisible(null)), [X]), pe = S(() => {
-		if (Z.length !== 0) return /* @__PURE__ */ w("div", {
-			className: ne,
-			children: Z.map((e, t) => {
-				let { variant: n } = e, r = _(e.label, h), i = r;
-				e.ariaLabel != null && (i = _(e.ariaLabel, h));
-				let a = te(n, t), o = e.size ?? "small", s = e.isDisabled?.(null) === !0;
-				return ee(e) ? /* @__PURE__ */ w(oe, {
+		d.columns,
+		d.rowFlags,
+		_,
+		f
+	]), U = S((e) => d.getRowId(e), [d]), { state: W, pushState: G } = c(a), K = S(() => {
+		R((e) => e + 1), z.current?.();
+	}, []), q = C(() => a.listActions ?? [], [a.listActions]), J = C(() => q.filter((e) => e.isVisible == null ? !0 : e.isVisible(null)), [q]), Y = C(() => {
+		if (J.length !== 0) return /* @__PURE__ */ E("div", {
+			className: b,
+			children: J.map((e, t) => {
+				let { variant: n } = e, r = g(e.label, f), i = r;
+				e.ariaLabel != null && (i = g(e.ariaLabel, f));
+				let a = h(n, t), o = e.size ?? "small", s = e.isDisabled?.(null) === !0;
+				return m(e) ? /* @__PURE__ */ E(j, {
 					to: e.to(null),
 					variant: a,
 					size: o,
 					isDisabled: s,
 					"aria-label": i,
-					preloadOnMouseEnter: !0,
+					preloadOnHover: "code-and-data",
 					children: r
-				}, e.id) : g(e) ? /* @__PURE__ */ w(E, {
+				}, e.id) : p(e) ? /* @__PURE__ */ E(k, {
 					type: "button",
 					variant: a,
 					size: o,
 					disabled: s,
 					onClick: () => {
-						A(e.id);
+						I(e.id);
 					},
 					"aria-label": i,
 					children: r
 				}, e.id) : null;
 			})
 		});
-	}, [h, Z]), Q = X.find((e) => e.id === k), $ = /* @__PURE__ */ w("span", { children: v("common.loading") });
-	return z.length > 0 && ($ = /* @__PURE__ */ w("span", { children: v("list.loaded", { count: z.length }) })), /* @__PURE__ */ re(i, {
-		breadcrumb: s,
-		children: [/* @__PURE__ */ w(l, {
-			config: a,
-			state: U,
-			pushState: de,
-			headerActions: pe,
-			rows: z,
-			columns: B,
-			gridTemplateColumns: V,
-			getRowId: H,
-			hasNextPage: F,
-			isLoadingMore: I,
-			isRefreshing: fe,
-			onLoadMore: Y,
-			onRefresh: J,
-			totalCount: null,
-			loadedCountLabel: /* @__PURE__ */ w(c, {
-				count: m.count,
-				where: U.where,
-				fetchKey: ue,
-				loadingFallback: $,
-				children: (e) => /* @__PURE__ */ w("span", { children: v("list.showing", {
-					shown: z.length,
-					total: e
-				}) })
+	}, [f, J]), X = q.find((e) => e.id === F);
+	return /* @__PURE__ */ D(r, {
+		breadcrumb: o,
+		children: [/* @__PURE__ */ E(l, {
+			value: C(() => ({
+				config: a,
+				state: W,
+				pushState: G,
+				headerActions: Y,
+				columns: V,
+				gridTemplateColumns: H,
+				getRowId: U,
+				countFetchKey: L,
+				bumpCountFetchKey: () => {
+					R((e) => e + 1);
+				},
+				registerRefresh: B
+			}), [
+				V,
+				a,
+				L,
+				U,
+				H,
+				Y,
+				G,
+				B,
+				W
+			]),
+			children: /* @__PURE__ */ E(x, {
+				fallback: /* @__PURE__ */ E(s, {
+					config: a,
+					state: W,
+					pushState: G,
+					headerActions: Y,
+					rows: [],
+					columns: V,
+					gridTemplateColumns: H,
+					getRowId: U,
+					hasNextPage: !1,
+					isLoadingMore: !1,
+					isRefreshing: !1,
+					onLoadMore: () => {},
+					onRefresh: K,
+					totalCount: null,
+					isLoadingInitial: !0
+				}),
+				children: i
 			})
-		}), Q != null && g(Q) && /* @__PURE__ */ w(n, {
+		}), X != null && p(X) && /* @__PURE__ */ E(t, {
 			isOpen: !0,
-			action: Q,
+			action: X,
 			node: null,
 			onClose: () => {
-				A(null);
+				I(null);
 			},
-			onSuccess: J
+			onSuccess: K
 		})]
 	});
-}, A = ({ entityManifest: e, config: t, prepared: n }) => {
-	let { t: r } = T();
-	return /* @__PURE__ */ w(k, {
-		entityManifest: e,
-		config: t,
-		prepared: n,
-		breadcrumb: a(t, r)
+}, I = ({ children: e, entityManifest: t, config: n }) => {
+	let { t: r } = O();
+	return /* @__PURE__ */ E(F, {
+		children: e,
+		entityManifest: t,
+		config: n,
+		breadcrumb: i(n, r)
 	});
 };
 //#endregion
-export { A as BackofficeEntityListPage, A as default };
+export { I as BackofficeEntityListPage, I as default };
 
 //# sourceMappingURL=BackofficeEntityListPage.js.map

package/lib/esm/pages/BackofficeEntityListPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackofficeEntityListPage.js","names":[],"sources":["../../../src/pages/BackofficeEntityListPage.tsx"],"sourcesContent":["import { type JSX, useCallback, useMemo, useState } from 'react';\nimport type { TFunction } from 'i18next';\nimport { useTranslation } from 'react-i18next';\nimport Link from '@plumile/router/routing/Link.js';\nimport { usePreloadedQuery } from 'react-relay';\nimport type { OperationType } from 'relay-runtime';\nimport {\n  BACKOFFICE_LIST_DEFAULTS,\n  BACKOFFICE_LIST_REFETCH_POLICY,\n} from '@plumile/backoffice-core/constants.js';\nimport type {\n  BackofficeEntityManifestItem,\n  BackofficePreparedListRoute,\n  BackofficeRuntimeResolvedListFacetConfig,\n  BackofficeRowFlagSpec,\n} from '@plumile/backoffice-core/types.js';\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport { LinkButton } from '@plumile/ui/atomic/atoms/button/LinkButton.js';\nimport {\n  type DataTableColumn,\n  type GetRowId,\n} from '@plumile/ui/components/data-table/DataTable.js';\nimport { TableCell } from '@plumile/ui/components/data-table/TableCell.js';\nimport { EyeSvg } from '@plumile/ui/icons/EyeSvg.js';\nimport { BackofficeEntityListScaffold } from '../components/backoffice/scaffolds/BackofficeEntityListScaffold.js';\nimport { BackofficeLazyEntityCountLabel } from '../components/backoffice/refs/BackofficeLazyEntityCount.js';\nimport { LazyBackofficeEntityActionFormDialog } from '../components/backoffice/actions/LazyBackofficeEntityActionFormDialog.js';\nimport { buildDataTableColumns } from '../components/backoffice/columns/buildDataTableColumns.js';\nimport { RowFlagsCell } from '../components/backoffice/list/RowFlagsCell.js';\nimport { useBackofficeListUrlState } from '../hooks/useBackofficeListUrlState.js';\nimport { useBackofficeLoadMore } from '../hooks/useBackofficeLoadMore.js';\nimport { useBackofficeListRefetch } from '../hooks/useBackofficeListRefetch.js';\nimport { useBackofficeReactTranslation } from '../i18n/useBackofficeReactTranslation.js';\nimport { useBackofficePaginationFragment } from '../relay/typedRelayHooks.js';\nimport * as pageStyles from './backofficeEntityListPage.css.js';\nimport { rowFlagsColumnCell } from '../components/backoffice/list/RowFlagsCell.css.js';\nimport { BackofficeRightPageLayout } from '../components/backoffice/layout/breadcrumb/BackofficeRightPageLayout.js';\nimport { buildEntityListBreadcrumb } from '../components/backoffice/layout/breadcrumb/buildBreadcrumbs.js';\nimport {\n  buildActionsColumn,\n  computeActionsColumnWidthPx,\n  computeRowFlagsColumnWidthPx,\n  isFormMutationAction,\n  isRouteAction,\n  resolveLabel,\n  resolveActionVariant,\n  resolveTrackBySize,\n  type ConnectionListConfig,\n} from './BackofficeEntityListPage.helpers.js';\n\nexport type BackofficeEntityListPageProps = {\n  entityManifest: BackofficeEntityManifestItem;\n  config: BackofficeRuntimeResolvedListFacetConfig;\n  prepared: BackofficePreparedListRoute;\n};\n\nconst applyListEdgeColumns = <Row,>(\n  inputColumns: readonly DataTableColumn<Row>[],\n  rowFlags: readonly BackofficeRowFlagSpec<Row>[] | undefined,\n  actionCount: number,\n  tApp: TFunction,\n): {\n  columns: readonly DataTableColumn<Row>[];\n  gridTemplateColumns?: string;\n} => {\n  const hasFlags = rowFlags != null && rowFlags.length > 0;\n\n  let columns = inputColumns;\n  if (hasFlags) {\n    const flagsColumn: DataTableColumn<Row> = {\n      id: '__rowFlags',\n      header: '',\n      className: rowFlagsColumnCell,\n      mobileRole: 'badge',\n      cell: (row) => {\n        return <RowFlagsCell row={row} flags={rowFlags} tApp={tApp} />;\n      },\n    };\n\n    // Ensure we never pick the flags column as \"primary\".\n    const withFlags = [flagsColumn, ...inputColumns];\n    const hasPrimary = withFlags.some((col) => {\n      return col.isPrimary === true;\n    });\n\n    columns = withFlags;\n    if (!hasPrimary) {\n      columns = withFlags.map((col, index) => {\n        if (index === 1) {\n          return { ...col, isPrimary: true };\n        }\n        return col;\n      });\n    }\n  }\n\n  let flagCount = 0;\n  if (hasFlags) {\n    flagCount = rowFlags.length;\n  }\n  const flagsWidthPx = computeRowFlagsColumnWidthPx(flagCount);\n  const actionsWidthPx = computeActionsColumnWidthPx(actionCount);\n\n  // We always include the right-side \"actions\" column in list pages.\n  let leftColumnCount = 0;\n  if (hasFlags) {\n    leftColumnCount = 1;\n  }\n  const middleCount = columns.length - leftColumnCount - 1;\n\n  const middleTracks = columns\n    .slice(leftColumnCount, leftColumnCount + Math.max(0, middleCount))\n    .map((column) => {\n      return resolveTrackBySize(column as DataTableColumn<unknown>, '1fr');\n    })\n    .join(' ');\n\n  let gridTemplateColumns = '';\n  if (hasFlags) {\n    gridTemplateColumns = `${flagsWidthPx}px ${middleTracks} ${actionsWidthPx}px`;\n  } else {\n    gridTemplateColumns = `${middleTracks} ${actionsWidthPx}px`;\n  }\n\n  return { columns, gridTemplateColumns };\n};\n\nconst BackofficeEntityConnectionListPage = ({\n  config,\n  prepared,\n  breadcrumb,\n}: Omit<BackofficeEntityListPageProps, 'config'> & {\n  config: ConnectionListConfig;\n  breadcrumb: ReturnType<typeof buildEntityListBreadcrumb>;\n}): JSX.Element | null => {\n  const listConfig = config.list;\n\n  const { t: tApp } = useTranslation();\n  const { t } = useBackofficeReactTranslation();\n  const [activeFormActionId, setActiveFormActionId] = useState<string | null>(\n    null,\n  );\n  const [countFetchKey, setCountFetchKey] = useState(0);\n\n  const queryData = usePreloadedQuery(listConfig.query, prepared.query);\n  const {\n    data: fragmentData,\n    loadNext,\n    hasNext,\n    isLoadingNext,\n    refetch,\n  } = useBackofficePaginationFragment<OperationType, unknown, unknown>(\n    listConfig.fragment,\n    queryData,\n  );\n\n  const connection = listConfig.getConnection(fragmentData);\n\n  const rows = useMemo(() => {\n    return connection.edges.map((edge) => {\n      return listConfig.toRow(edge.node);\n    });\n  }, [connection.edges, listConfig]);\n\n  const { columns, gridTemplateColumns } = useMemo((): {\n    columns: readonly DataTableColumn<unknown>[];\n    gridTemplateColumns?: string;\n  } => {\n    const baseColumns = buildDataTableColumns(listConfig.columns, {\n      tApp,\n      t,\n    });\n    const actionsColumn = buildActionsColumn({\n      ariaLabel: t('actions.view'),\n      fallback: t('common.notAvailable'),\n      className: pageStyles.actionsColumnCell,\n      resolveDetailHref: (id) => {\n        return config.routes.detail(id);\n      },\n      renderAction: ({ href, ariaLabel }) => {\n        return (\n          <TableCell.Actions>\n            <Link\n              to={href}\n              className={pageStyles.actionTrigger}\n              aria-label={ariaLabel}\n              title={ariaLabel}\n              preloadOnMouseEnter\n            >\n              <EyeSvg width={16} height={16} />\n            </Link>\n          </TableCell.Actions>\n        );\n      },\n    });\n    const allColumns = [...baseColumns, actionsColumn];\n    return applyListEdgeColumns(allColumns, listConfig.rowFlags, 1, tApp);\n  }, [config.routes, listConfig.columns, listConfig.rowFlags, t, tApp]);\n\n  const getRowId = useCallback<GetRowId<unknown>>(\n    (row) => {\n      return listConfig.getRowId(row);\n    },\n    [listConfig],\n  );\n\n  const { state, pushState } = useBackofficeListUrlState(config);\n  const listDefaults = config.listDefaults ??\n    listConfig.defaultState ?? { where: null, sort: null };\n  const resolvedSort = state.sort ?? listDefaults.sort;\n  const { pageSize } = BACKOFFICE_LIST_DEFAULTS;\n\n  const baseVariables = useMemo(() => {\n    return {\n      where: state.where,\n      sort: resolvedSort,\n      count: pageSize,\n      cursor: null,\n    };\n  }, [pageSize, resolvedSort, state.where]);\n\n  const { isRefreshing, onRefresh } = useBackofficeListRefetch({\n    refetch,\n    variables: baseVariables,\n    defaults: {\n      where: listDefaults.where,\n      sort: listDefaults.sort,\n      count: pageSize,\n      cursor: null,\n    },\n    fetchPolicy: BACKOFFICE_LIST_REFETCH_POLICY,\n    buildQueryVariables: listConfig.buildQueryVariables,\n  });\n\n  const handleRefresh = useCallback(() => {\n    setCountFetchKey((current) => {\n      return current + 1;\n    });\n    onRefresh();\n  }, [onRefresh]);\n\n  const handleLoadMore = useBackofficeLoadMore({\n    hasNext,\n    isLoadingNext,\n    loadNext,\n    count: pageSize,\n  });\n\n  const listActions = useMemo(() => {\n    return config.listActions ?? [];\n  }, [config.listActions]);\n  const visibleActions = useMemo(() => {\n    return listActions.filter((action) => {\n      if (action.isVisible == null) {\n        return true;\n      }\n      return action.isVisible(null);\n    });\n  }, [listActions]);\n\n  const headerActions = useMemo(() => {\n    if (visibleActions.length === 0) {\n      return undefined;\n    }\n    return (\n      <div className={pageStyles.headerActions}>\n        {visibleActions.map((action, index) => {\n          const { variant: actionVariant } = action;\n          const label = resolveLabel(action.label, tApp);\n          let ariaLabel = label;\n          if (action.ariaLabel != null) {\n            ariaLabel = resolveLabel(action.ariaLabel, tApp);\n          }\n          const variant = resolveActionVariant(actionVariant, index);\n          const size = action.size ?? 'small';\n          const isDisabled = action.isDisabled?.(null) === true;\n\n          if (isRouteAction(action)) {\n            const href = action.to(null);\n            return (\n              <LinkButton\n                key={action.id}\n                to={href}\n                variant={variant}\n                size={size}\n                isDisabled={isDisabled}\n                aria-label={ariaLabel}\n                preloadOnMouseEnter\n              >\n                {label}\n              </LinkButton>\n            );\n          }\n\n          if (isFormMutationAction(action)) {\n            return (\n              <Button\n                key={action.id}\n                type=\"button\"\n                variant={variant}\n                size={size}\n                disabled={isDisabled}\n                onClick={() => {\n                  setActiveFormActionId(action.id);\n                }}\n                aria-label={ariaLabel}\n              >\n                {label}\n              </Button>\n            );\n          }\n\n          return null;\n        })}\n      </div>\n    );\n  }, [tApp, visibleActions]);\n\n  const activeFormAction = listActions.find((action) => {\n    return action.id === activeFormActionId;\n  });\n\n  let loadedCountFallback: JSX.Element = <span>{t('common.loading')}</span>;\n  if (rows.length > 0) {\n    loadedCountFallback = (\n      <span>\n        {t('list.loaded', {\n          count: rows.length,\n        })}\n      </span>\n    );\n  }\n  const loadedCountLabel = (\n    <BackofficeLazyEntityCountLabel\n      count={listConfig.count}\n      where={state.where}\n      fetchKey={countFetchKey}\n      loadingFallback={loadedCountFallback}\n    >\n      {(totalCount) => {\n        return (\n          <span>\n            {t('list.showing', {\n              shown: rows.length,\n              total: totalCount,\n            })}\n          </span>\n        );\n      }}\n    </BackofficeLazyEntityCountLabel>\n  );\n\n  return (\n    <BackofficeRightPageLayout breadcrumb={breadcrumb}>\n      <BackofficeEntityListScaffold\n        config={config}\n        state={state}\n        pushState={pushState}\n        headerActions={headerActions}\n        rows={rows}\n        columns={columns}\n        gridTemplateColumns={gridTemplateColumns}\n        getRowId={getRowId}\n        hasNextPage={hasNext}\n        isLoadingMore={isLoadingNext}\n        isRefreshing={isRefreshing}\n        onLoadMore={handleLoadMore}\n        onRefresh={handleRefresh}\n        totalCount={null}\n        loadedCountLabel={loadedCountLabel}\n      />\n      {activeFormAction != null && isFormMutationAction(activeFormAction) && (\n        <LazyBackofficeEntityActionFormDialog\n          isOpen\n          action={activeFormAction}\n          node={null}\n          onClose={() => {\n            setActiveFormActionId(null);\n          }}\n          onSuccess={handleRefresh}\n        />\n      )}\n    </BackofficeRightPageLayout>\n  );\n};\n\nexport const BackofficeEntityListPage = ({\n  entityManifest,\n  config,\n  prepared,\n}: BackofficeEntityListPageProps): JSX.Element | null => {\n  const { t: tApp } = useTranslation();\n  const breadcrumb = buildEntityListBreadcrumb(config, tApp);\n\n  return (\n    <BackofficeEntityConnectionListPage\n      entityManifest={entityManifest}\n      config={config}\n      prepared={prepared}\n      breadcrumb={breadcrumb}\n    />\n  );\n};\n\nexport default BackofficeEntityListPage;\n"],"mappings":"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"}
+{"version":3,"file":"BackofficeEntityListPage.js","names":[],"sources":["../../../src/pages/BackofficeEntityListPage.tsx"],"sourcesContent":["import {\n  Suspense,\n  type JSX,\n  type ReactNode,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport type { TFunction } from 'i18next';\nimport { useTranslation } from 'react-i18next';\nimport Link from '@plumile/router/routing/Link.js';\nimport type {\n  BackofficeEntityManifestItem,\n  BackofficePreparedListLayoutRoute,\n  BackofficeRuntimeResolvedListFacetConfig,\n  BackofficeRowFlagSpec,\n} from '@plumile/backoffice-core/types.js';\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport { LinkButton } from '@plumile/ui/atomic/atoms/button/LinkButton.js';\nimport {\n  type DataTableColumn,\n  type GetRowId,\n} from '@plumile/ui/components/data-table/DataTable.js';\nimport { TableCell } from '@plumile/ui/components/data-table/TableCell.js';\nimport { EyeSvg } from '@plumile/ui/icons/EyeSvg.js';\nimport { BackofficeEntityListScaffold } from '../components/backoffice/scaffolds/BackofficeEntityListScaffold.js';\nimport { LazyBackofficeEntityActionFormDialog } from '../components/backoffice/actions/LazyBackofficeEntityActionFormDialog.js';\nimport { buildDataTableColumns } from '../components/backoffice/columns/buildDataTableColumns.js';\nimport { RowFlagsCell } from '../components/backoffice/list/RowFlagsCell.js';\nimport { useBackofficeListUrlState } from '../hooks/useBackofficeListUrlState.js';\nimport { useBackofficeReactTranslation } from '../i18n/useBackofficeReactTranslation.js';\nimport * as pageStyles from './backofficeEntityListPage.css.js';\nimport { rowFlagsColumnCell } from '../components/backoffice/list/RowFlagsCell.css.js';\nimport { BackofficeRightPageLayout } from '../components/backoffice/layout/breadcrumb/BackofficeRightPageLayout.js';\nimport { buildEntityListBreadcrumb } from '../components/backoffice/layout/breadcrumb/buildBreadcrumbs.js';\nimport { BackofficeEntityListRouteProvider } from './BackofficeEntityListRouteContext.js';\nimport {\n  buildActionsColumn,\n  computeActionsColumnWidthPx,\n  computeRowFlagsColumnWidthPx,\n  isFormMutationAction,\n  isRouteAction,\n  resolveLabel,\n  resolveActionVariant,\n  resolveTrackBySize,\n  type ConnectionListConfig,\n} from './BackofficeEntityListPage.helpers.js';\n\nexport type BackofficeEntityListPageProps = {\n  children?: ReactNode;\n  entityManifest: BackofficeEntityManifestItem;\n  config: BackofficeRuntimeResolvedListFacetConfig;\n  prepared: BackofficePreparedListLayoutRoute;\n};\n\nconst applyListEdgeColumns = <Row,>(\n  inputColumns: readonly DataTableColumn<Row>[],\n  rowFlags: readonly BackofficeRowFlagSpec<Row>[] | undefined,\n  actionCount: number,\n  tApp: TFunction,\n): {\n  columns: readonly DataTableColumn<Row>[];\n  gridTemplateColumns?: string;\n} => {\n  const hasFlags = rowFlags != null && rowFlags.length > 0;\n\n  let columns = inputColumns;\n  if (hasFlags) {\n    const flagsColumn: DataTableColumn<Row> = {\n      id: '__rowFlags',\n      header: '',\n      className: rowFlagsColumnCell,\n      mobileRole: 'badge',\n      cell: (row) => {\n        return <RowFlagsCell row={row} flags={rowFlags} tApp={tApp} />;\n      },\n    };\n\n    // Ensure we never pick the flags column as \"primary\".\n    const withFlags = [flagsColumn, ...inputColumns];\n    const hasPrimary = withFlags.some((col) => {\n      return col.isPrimary === true;\n    });\n\n    columns = withFlags;\n    if (!hasPrimary) {\n      columns = withFlags.map((col, index) => {\n        if (index === 1) {\n          return { ...col, isPrimary: true };\n        }\n        return col;\n      });\n    }\n  }\n\n  let flagCount = 0;\n  if (hasFlags) {\n    flagCount = rowFlags.length;\n  }\n  const flagsWidthPx = computeRowFlagsColumnWidthPx(flagCount);\n  const actionsWidthPx = computeActionsColumnWidthPx(actionCount);\n\n  // We always include the right-side \"actions\" column in list pages.\n  let leftColumnCount = 0;\n  if (hasFlags) {\n    leftColumnCount = 1;\n  }\n  const middleCount = columns.length - leftColumnCount - 1;\n\n  const middleTracks = columns\n    .slice(leftColumnCount, leftColumnCount + Math.max(0, middleCount))\n    .map((column) => {\n      return resolveTrackBySize(column as DataTableColumn<unknown>, '1fr');\n    })\n    .join(' ');\n\n  let gridTemplateColumns = '';\n  if (hasFlags) {\n    gridTemplateColumns = `${flagsWidthPx}px ${middleTracks} ${actionsWidthPx}px`;\n  } else {\n    gridTemplateColumns = `${middleTracks} ${actionsWidthPx}px`;\n  }\n\n  return { columns, gridTemplateColumns };\n};\n\nconst BackofficeEntityConnectionListPage = ({\n  children,\n  config,\n  breadcrumb,\n}: Omit<BackofficeEntityListPageProps, 'config' | 'prepared'> & {\n  config: ConnectionListConfig;\n  breadcrumb: ReturnType<typeof buildEntityListBreadcrumb>;\n}): JSX.Element | null => {\n  const listConfig = config.list;\n\n  const { t: tApp } = useTranslation();\n  const { t } = useBackofficeReactTranslation();\n  const [activeFormActionId, setActiveFormActionId] = useState<string | null>(\n    null,\n  );\n  const [countFetchKey, setCountFetchKey] = useState(0);\n  const refreshRef = useRef<(() => void) | null>(null);\n\n  const registerRefresh = useCallback((refresh: (() => void) | null) => {\n    refreshRef.current = refresh;\n  }, []);\n\n  const { columns, gridTemplateColumns } = useMemo((): {\n    columns: readonly DataTableColumn<unknown>[];\n    gridTemplateColumns?: string;\n  } => {\n    const baseColumns = buildDataTableColumns(listConfig.columns, {\n      tApp,\n      t,\n    });\n    const actionsColumn = buildActionsColumn({\n      ariaLabel: t('actions.view'),\n      fallback: t('common.notAvailable'),\n      className: pageStyles.actionsColumnCell,\n      resolveDetailHref: (id) => {\n        return config.routes.detail(id);\n      },\n      renderAction: ({ href, ariaLabel }) => {\n        return (\n          <TableCell.Actions>\n            <Link\n              to={href}\n              className={pageStyles.actionTrigger}\n              aria-label={ariaLabel}\n              title={ariaLabel}\n              preloadOnHover=\"code\"\n            >\n              <EyeSvg width={16} height={16} />\n            </Link>\n          </TableCell.Actions>\n        );\n      },\n    });\n    const allColumns = [...baseColumns, actionsColumn];\n    return applyListEdgeColumns(allColumns, listConfig.rowFlags, 1, tApp);\n  }, [config.routes, listConfig.columns, listConfig.rowFlags, t, tApp]);\n\n  const getRowId = useCallback<GetRowId<unknown>>(\n    (row) => {\n      return listConfig.getRowId(row);\n    },\n    [listConfig],\n  );\n\n  const { state, pushState } = useBackofficeListUrlState(config);\n\n  const handleRefreshRequest = useCallback(() => {\n    setCountFetchKey((current) => {\n      return current + 1;\n    });\n    refreshRef.current?.();\n  }, []);\n\n  const listActions = useMemo(() => {\n    return config.listActions ?? [];\n  }, [config.listActions]);\n  const visibleActions = useMemo(() => {\n    return listActions.filter((action) => {\n      if (action.isVisible == null) {\n        return true;\n      }\n      return action.isVisible(null);\n    });\n  }, [listActions]);\n\n  const headerActions = useMemo(() => {\n    if (visibleActions.length === 0) {\n      return undefined;\n    }\n    return (\n      <div className={pageStyles.headerActions}>\n        {visibleActions.map((action, index) => {\n          const { variant: actionVariant } = action;\n          const label = resolveLabel(action.label, tApp);\n          let ariaLabel = label;\n          if (action.ariaLabel != null) {\n            ariaLabel = resolveLabel(action.ariaLabel, tApp);\n          }\n          const variant = resolveActionVariant(actionVariant, index);\n          const size = action.size ?? 'small';\n          const isDisabled = action.isDisabled?.(null) === true;\n\n          if (isRouteAction(action)) {\n            const href = action.to(null);\n            return (\n              <LinkButton\n                key={action.id}\n                to={href}\n                variant={variant}\n                size={size}\n                isDisabled={isDisabled}\n                aria-label={ariaLabel}\n                preloadOnHover=\"code-and-data\"\n              >\n                {label}\n              </LinkButton>\n            );\n          }\n\n          if (isFormMutationAction(action)) {\n            return (\n              <Button\n                key={action.id}\n                type=\"button\"\n                variant={variant}\n                size={size}\n                disabled={isDisabled}\n                onClick={() => {\n                  setActiveFormActionId(action.id);\n                }}\n                aria-label={ariaLabel}\n              >\n                {label}\n              </Button>\n            );\n          }\n\n          return null;\n        })}\n      </div>\n    );\n  }, [tApp, visibleActions]);\n\n  const activeFormAction = listActions.find((action) => {\n    return action.id === activeFormActionId;\n  });\n\n  const renderLoadingScaffold = () => {\n    return (\n      <BackofficeEntityListScaffold\n        config={config}\n        state={state}\n        pushState={pushState}\n        headerActions={headerActions}\n        rows={[]}\n        columns={columns}\n        gridTemplateColumns={gridTemplateColumns}\n        getRowId={getRowId}\n        hasNextPage={false}\n        isLoadingMore={false}\n        isRefreshing={false}\n        onLoadMore={() => {}}\n        onRefresh={handleRefreshRequest}\n        totalCount={null}\n        isLoadingInitial\n      />\n    );\n  };\n\n  const contextValue = useMemo(() => {\n    return {\n      config,\n      state,\n      pushState,\n      headerActions,\n      columns,\n      gridTemplateColumns,\n      getRowId,\n      countFetchKey,\n      bumpCountFetchKey: () => {\n        setCountFetchKey((current) => {\n          return current + 1;\n        });\n      },\n      registerRefresh,\n    };\n  }, [\n    columns,\n    config,\n    countFetchKey,\n    getRowId,\n    gridTemplateColumns,\n    headerActions,\n    pushState,\n    registerRefresh,\n    state,\n  ]);\n\n  return (\n    <BackofficeRightPageLayout breadcrumb={breadcrumb}>\n      <BackofficeEntityListRouteProvider value={contextValue}>\n        <Suspense fallback={renderLoadingScaffold()}>{children}</Suspense>\n      </BackofficeEntityListRouteProvider>\n      {activeFormAction != null && isFormMutationAction(activeFormAction) && (\n        <LazyBackofficeEntityActionFormDialog\n          isOpen\n          action={activeFormAction}\n          node={null}\n          onClose={() => {\n            setActiveFormActionId(null);\n          }}\n          onSuccess={handleRefreshRequest}\n        />\n      )}\n    </BackofficeRightPageLayout>\n  );\n};\n\nexport const BackofficeEntityListPage = ({\n  children,\n  entityManifest,\n  config,\n}: BackofficeEntityListPageProps): JSX.Element | null => {\n  const { t: tApp } = useTranslation();\n  const breadcrumb = buildEntityListBreadcrumb(config, tApp);\n\n  return (\n    <BackofficeEntityConnectionListPage\n      children={children}\n      entityManifest={entityManifest}\n      config={config}\n      breadcrumb={breadcrumb}\n    />\n  );\n};\n\nexport default BackofficeEntityListPage;\n"],"mappings":"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"}

package/lib/esm/pages/BackofficeEntityListRouteContext.js

@@ -0,0 +1,15 @@
+import { createContext as e, useContext as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/pages/BackofficeEntityListRouteContext.tsx
+var r = e(null), i = ({ children: e, value: t }) => /* @__PURE__ */ n(r.Provider, {
+	value: t,
+	children: e
+}), a = () => {
+	let e = t(r);
+	if (e == null) throw Error("BackofficeEntityListRouteContext is missing.");
+	return e;
+};
+//#endregion
+export { i as BackofficeEntityListRouteProvider, a as useBackofficeEntityListRouteContext };
+
+//# sourceMappingURL=BackofficeEntityListRouteContext.js.map

package/lib/esm/pages/BackofficeEntityListRouteContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeEntityListRouteContext.js","names":[],"sources":["../../../src/pages/BackofficeEntityListRouteContext.tsx"],"sourcesContent":["import { createContext, useContext, type JSX } from 'react';\nimport {\n  type DataTableColumn,\n  type GetRowId,\n} from '@plumile/ui/components/data-table/DataTable.js';\n\nimport type { useBackofficeListUrlState } from '../hooks/useBackofficeListUrlState.js';\nimport type { ConnectionListConfig } from './BackofficeEntityListPage.helpers.js';\n\nexport type BackofficeEntityListRouteContextValue = {\n  config: ConnectionListConfig;\n  state: ReturnType<typeof useBackofficeListUrlState>['state'];\n  pushState: ReturnType<typeof useBackofficeListUrlState>['pushState'];\n  headerActions: JSX.Element | undefined;\n  columns: readonly DataTableColumn<unknown>[];\n  gridTemplateColumns?: string;\n  getRowId: GetRowId<unknown>;\n  countFetchKey: number;\n  bumpCountFetchKey: () => void;\n  registerRefresh: (refresh: (() => void) | null) => void;\n};\n\nconst BackofficeEntityListRouteContext =\n  createContext<BackofficeEntityListRouteContextValue | null>(null);\n\nexport const BackofficeEntityListRouteProvider = ({\n  children,\n  value,\n}: {\n  children: JSX.Element;\n  value: BackofficeEntityListRouteContextValue;\n}): JSX.Element => {\n  return (\n    <BackofficeEntityListRouteContext.Provider value={value}>\n      {children}\n    </BackofficeEntityListRouteContext.Provider>\n  );\n};\n\nexport const useBackofficeEntityListRouteContext =\n  (): BackofficeEntityListRouteContextValue => {\n    const value = useContext(BackofficeEntityListRouteContext);\n    if (value == null) {\n      throw new Error('BackofficeEntityListRouteContext is missing.');\n    }\n    return value;\n  };\n"],"mappings":";;;AAsBA,IAAM,IACJ,EAA4D,IAAI,GAErD,KAAqC,EAChD,aACA,eAME,kBAAC,EAAiC,UAAlC;CAAkD;CAC/C;AACwC,CAAA,GAIlC,UACkC;CAC3C,IAAM,IAAQ,EAAW,CAAgC;CACzD,IAAI,KAAS,MACX,MAAU,MAAM,8CAA8C;CAEhE,OAAO;AACT"}

package/lib/esm/pages/detail/buildTabsItems.js

@@ -2,7 +2,7 @@
 var e = (e) => e.pages.map((t) => ({
 	id: t.id,
 	label: t.label(e.tApp),
-	preloadOnMouseEnter: !0,
+	preloadOnHover: "code-and-data",
 	to: e.detailPageHref(e.id, t.id)
 }));
 //#endregion

package/lib/esm/pages/detail/buildTabsItems.js.map

@@ -1 +1 @@
-{"version":3,"file":"buildTabsItems.js","names":[],"sources":["../../../../src/pages/detail/buildTabsItems.ts"],"sourcesContent":["import type { BackofficeDetailPageRouteSpec } from '@plumile/backoffice-core/types.js';\nimport type { TabItem } from '@plumile/ui/atomic/molecules/tabs/Tabs.js';\nimport type { TFunction } from 'i18next';\n\ntype DetailRoutePage<Node> = BackofficeDetailPageRouteSpec<Node>;\n\nexport const buildTabsItems = <Node>(input: {\n  pages: readonly DetailRoutePage<Node>[];\n  id: string;\n  tApp: TFunction;\n  detailPageHref: (id: string, pageId: string) => string;\n}): readonly TabItem[] => {\n  return input.pages.map((page) => {\n    return {\n      id: page.id,\n      label: page.label(input.tApp),\n      preloadOnMouseEnter: true,\n      to: input.detailPageHref(input.id, page.id),\n    };\n  });\n};\n"],"mappings":";AAMA,IAAa,KAAwB,MAM5B,EAAM,MAAM,KAAK,OACf;CACL,IAAI,EAAK;CACT,OAAO,EAAK,MAAM,EAAM,IAAI;CAC5B,qBAAqB;CACrB,IAAI,EAAM,eAAe,EAAM,IAAI,EAAK,EAAE;AAC5C,EACD"}
+{"version":3,"file":"buildTabsItems.js","names":[],"sources":["../../../../src/pages/detail/buildTabsItems.ts"],"sourcesContent":["import type { BackofficeDetailPageRouteSpec } from '@plumile/backoffice-core/types.js';\nimport type { TabItem } from '@plumile/ui/atomic/molecules/tabs/Tabs.js';\nimport type { TFunction } from 'i18next';\n\ntype DetailRoutePage<Node> = BackofficeDetailPageRouteSpec<Node>;\n\nexport const buildTabsItems = <Node>(input: {\n  pages: readonly DetailRoutePage<Node>[];\n  id: string;\n  tApp: TFunction;\n  detailPageHref: (id: string, pageId: string) => string;\n}): readonly TabItem[] => {\n  return input.pages.map((page) => {\n    return {\n      id: page.id,\n      label: page.label(input.tApp),\n      preloadOnHover: 'code-and-data',\n      to: input.detailPageHref(input.id, page.id),\n    };\n  });\n};\n"],"mappings":";AAMA,IAAa,KAAwB,MAM5B,EAAM,MAAM,KAAK,OACf;CACL,IAAI,EAAK;CACT,OAAO,EAAK,MAAM,EAAM,IAAI;CAC5B,gBAAgB;CAChB,IAAI,EAAM,eAAe,EAAM,IAAI,EAAK,EAAE;AAC5C,EACD"}