@plumile/backoffice-react 0.1.188 → 0.1.190

package/lib/esm/pages/BackofficeEntityListDataPage.js

@@ -13,80 +13,86 @@ import { jsx as h } from "react/jsx-runtime";
 import { Button as g } from "@plumile/ui/atomic/atoms/button/Button.js";
 import { loadQuery as _, usePreloadedQuery as v } from "react-relay";
 import { BACKOFFICE_LIST_DEFAULTS as y, BACKOFFICE_LIST_REFETCH_POLICY as b } from "@plumile/backoffice-core/constants.js";
+import { stableListVariablesKey as x } from "@plumile/backoffice-core/state/stableKey.js";
 //#region src/pages/BackofficeEntityListDataPage.tsx
-function x({ queryRef: t }) {
-	let { config: a, state: f, pushState: p, headerActions: m, columns: g, gridTemplateColumns: _, getRowId: x, countFetchKey: S, bumpCountFetchKey: C, registerRefresh: w } = c(), T = a.list, { t: E } = e(), D = v(T.query, t), { data: O, loadNext: k, hasNext: A, isLoadingNext: j, refetch: M } = n(T.fragment, D), N = T.getConnection(O), P = d(() => N.edges.map((e) => T.toRow(e.node)), [N.edges, T]), F = a.listDefaults ?? T.defaultState ?? {
+function S({ queryRef: t }) {
+	let { config: a, state: p, pushState: m, headerActions: g, columns: _, gridTemplateColumns: S, getRowId: C, countFetchKey: w, bumpCountFetchKey: T, filterDrawerState: E, registerRefresh: D } = c(), O = a.list, { t: k } = e(), A = v(O.query, t), { data: j, loadNext: M, hasNext: N, isLoadingNext: P, refetch: F } = n(O.fragment, A), I = O.getConnection(j), L = d(() => I.edges.map((e) => O.toRow(e.node)), [I.edges, O]), R = a.listDefaults ?? O.defaultState ?? {
 		where: null,
 		sort: null
-	}, I = f.sort ?? F.sort, { pageSize: L } = y, { isRefreshing: R, onRefresh: z } = o({
-		refetch: M,
-		variables: d(() => ({
-			where: f.where,
-			sort: I,
-			count: L,
-			cursor: null
-		}), [
-			L,
-			I,
-			f.where
-		]),
+	}, z = p.sort ?? R.sort, { pageSize: B } = y, V = d(() => ({
+		where: p.where,
+		sort: z,
+		count: B,
+		cursor: null
+	}), [
+		B,
+		z,
+		p.where
+	]), H = d(() => x(V), [V]), U = f(H), { isRefreshing: W, onRefresh: G } = o({
+		refetch: F,
+		variables: V,
 		defaults: {
-			where: F.where,
-			sort: F.sort,
-			count: L,
+			where: R.where,
+			sort: R.sort,
+			count: B,
 			cursor: null
 		},
 		fetchPolicy: b,
-		buildQueryVariables: T.buildQueryVariables
-	}), B = l(() => {
-		C(), z();
-	}, [C, z]);
-	u(() => (w(B), () => {
-		w(null);
-	}), [B, w]);
-	let V = s({
-		hasNext: A,
-		isLoadingNext: j,
-		loadNext: k,
-		count: L
-	}), H = /* @__PURE__ */ h("span", { children: E("common.loading") });
-	return P.length > 0 && (H = /* @__PURE__ */ h("span", { children: E("list.loaded", { count: P.length }) })), /* @__PURE__ */ h(i, {
+		buildQueryVariables: O.buildQueryVariables
+	});
+	u(() => {
+		U.current !== H && (U.current = H, T());
+	}, [T, H]);
+	let K = l(() => {
+		T(), G();
+	}, [T, G]);
+	u(() => (D(K), () => {
+		D(null);
+	}), [K, D]);
+	let q = s({
+		hasNext: N,
+		isLoadingNext: P,
+		loadNext: M,
+		count: B
+	}), J = /* @__PURE__ */ h("span", { children: k("common.loading") });
+	return L.length > 0 && (J = /* @__PURE__ */ h("span", { children: k("list.loaded", { count: L.length }) })), /* @__PURE__ */ h(i, {
 		config: a,
-		state: f,
-		pushState: p,
-		headerActions: m,
-		rows: P,
-		columns: g,
-		gridTemplateColumns: _,
-		getRowId: x,
-		hasNextPage: A,
-		isLoadingMore: j,
-		isRefreshing: R,
-		onLoadMore: V,
-		onRefresh: B,
+		state: p,
+		pushState: m,
+		headerActions: g,
+		rows: L,
+		columns: _,
+		gridTemplateColumns: S,
+		getRowId: C,
+		hasNextPage: N,
+		isLoadingMore: P,
+		isRefreshing: W,
+		onLoadMore: q,
+		onRefresh: K,
 		totalCount: null,
 		loadedCountLabel: /* @__PURE__ */ h(r, {
-			count: T.count,
-			where: f.where,
-			fetchKey: S,
-			loadingFallback: H,
-			children: (e) => /* @__PURE__ */ h("span", { children: E("list.showing", {
-				shown: P.length,
+			count: O.count,
+			where: p.where,
+			fetchKey: w,
+			loadingFallback: J,
+			children: (e) => /* @__PURE__ */ h("span", { children: k("list.showing", {
+				shown: L.length,
 				total: e
 			}) })
-		})
+		}),
+		filterDrawerState: E
 	});
 }
-var S = ({ prepared: n }) => {
-	let { config: r, state: o, pushState: s, headerActions: d, columns: v, gridTemplateColumns: b, getRowId: S } = c(), C = a(), { t: w } = e(), [T, E] = p(() => n.query), D = f(null), O = l(() => {
-		D.current?.dispose(), D.current = null;
+var C = ({ prepared: n }) => {
+	let { config: r, state: o, pushState: s, headerActions: d, columns: v, gridTemplateColumns: b, getRowId: x, filterDrawerState: C } = c(), w = a(), { t: T } = e(), [E, D] = p(() => n.query), O = f(null), k = l(() => {
+		O.current?.dispose(), O.current = null;
 	}, []);
 	u(() => {
-		O(), E(n.query);
-	}, [O, n.query]), u(() => () => {
-		O();
-	}, [O]);
-	let k = l(() => {
+		k(), D(n.query);
+	}, [k, n.query]), u(() => () => {
+		k();
+	}, [k]);
+	let A = l(() => {
 		let e = r.list, t = r.listDefaults ?? e.defaultState ?? {
 			where: null,
 			sort: null
@@ -95,12 +101,12 @@ var S = ({ prepared: n }) => {
 			sort: o.sort ?? t.sort,
 			count: n,
 			cursor: null
-		}, a = e.buildQueryVariables(i), s = _(C, e.query, a, { fetchPolicy: "network-only" });
-		O(), D.current = s, E(s);
+		}, a = e.buildQueryVariables(i), s = _(w, e.query, a, { fetchPolicy: "network-only" });
+		k(), O.current = s, D(s);
 	}, [
 		r,
-		O,
-		C,
+		k,
+		w,
 		o.sort,
 		o.where
 	]);
@@ -113,34 +119,35 @@ var S = ({ prepared: n }) => {
 			rows: [],
 			columns: v,
 			gridTemplateColumns: b,
-			getRowId: S,
+			getRowId: x,
 			hasNextPage: !1,
 			isLoadingMore: !1,
 			isRefreshing: !1,
 			onLoadMore: () => {},
 			onRefresh: () => {
-				e(), k();
+				e(), A();
 			},
 			totalCount: null,
+			filterDrawerState: C,
 			emptyState: /* @__PURE__ */ h(m, {
 				tone: "danger",
-				title: w("list.errors.title"),
+				title: T("list.errors.title"),
 				actions: /* @__PURE__ */ h(g, {
 					type: "button",
 					variant: "secondary",
 					size: "small",
 					onClick: () => {
-						e(), k();
+						e(), A();
 					},
-					children: w("list.actions.retry")
+					children: T("list.actions.retry")
 				}),
-				children: w("list.errors.tableFailed")
+				children: T("list.errors.tableFailed")
 			})
 		}),
-		children: /* @__PURE__ */ h(x, { queryRef: T })
+		children: /* @__PURE__ */ h(S, { queryRef: E })
 	});
 };
 //#endregion
-export { S as BackofficeEntityListDataPage, S as default };
+export { C as BackofficeEntityListDataPage, C as default };
 
 //# sourceMappingURL=BackofficeEntityListDataPage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BackofficeEntityListDataPage.js","names":[],"sources":["../../../src/pages/BackofficeEntityListDataPage.tsx"],"sourcesContent":["import {\n  type JSX,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { loadQuery, 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 { BackofficePreparedListDataRoute } from '@plumile/backoffice-core/types.js';\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport { InlineBanner } from '@plumile/ui/components/feedback/InlineBanner.js';\n\nimport { BackofficeErrorBoundary } from '../components/backoffice/errors/BackofficeErrorBoundary.js';\nimport { BackofficeEntityListScaffold } from '../components/backoffice/scaffolds/BackofficeEntityListScaffold.js';\nimport { BackofficeLazyEntityCountLabel } from '../components/backoffice/refs/BackofficeLazyEntityCount.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 { useRelayEnvironment } from '../relay/useRelayEnvironment.js';\nimport { useBackofficeEntityListRouteContext } from './BackofficeEntityListRouteContext.js';\n\nexport type BackofficeEntityListDataPageProps = {\n  prepared: BackofficePreparedListDataRoute;\n};\n\ntype BackofficeEntityConnectionListDataProps = {\n  queryRef: BackofficePreparedListDataRoute['query'];\n};\n\n/**\n * Renders the Relay-backed row data under the list layout route boundary.\n */\nfunction BackofficeEntityConnectionListData({\n  queryRef,\n}: BackofficeEntityConnectionListDataProps): JSX.Element | null {\n  const {\n    config,\n    state,\n    pushState,\n    headerActions,\n    columns,\n    gridTemplateColumns,\n    getRowId,\n    countFetchKey,\n    bumpCountFetchKey,\n    registerRefresh,\n  } = useBackofficeEntityListRouteContext();\n  const listConfig = config.list;\n  const { t } = useBackofficeReactTranslation();\n\n  const queryData = usePreloadedQuery(listConfig.query, queryRef);\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 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    bumpCountFetchKey();\n    onRefresh();\n  }, [bumpCountFetchKey, onRefresh]);\n\n  useEffect(() => {\n    registerRefresh(handleRefresh);\n    return () => {\n      registerRefresh(null);\n    };\n  }, [handleRefresh, registerRefresh]);\n\n  const handleLoadMore = useBackofficeLoadMore({\n    hasNext,\n    isLoadingNext,\n    loadNext,\n    count: pageSize,\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    <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  );\n}\n\nexport const BackofficeEntityListDataPage = ({\n  prepared,\n}: BackofficeEntityListDataPageProps): JSX.Element | null => {\n  const {\n    config,\n    state,\n    pushState,\n    headerActions,\n    columns,\n    gridTemplateColumns,\n    getRowId,\n  } = useBackofficeEntityListRouteContext();\n  const relayEnvironment = useRelayEnvironment();\n  const { t } = useBackofficeReactTranslation();\n  const [queryRef, setQueryRef] = useState(() => {\n    return prepared.query;\n  });\n  const ownedQueryRef = useRef<BackofficePreparedListDataRoute['query'] | null>(\n    null,\n  );\n\n  const disposeOwnedQueryRef = useCallback(() => {\n    ownedQueryRef.current?.dispose();\n    ownedQueryRef.current = null;\n  }, []);\n\n  useEffect(() => {\n    disposeOwnedQueryRef();\n    setQueryRef(prepared.query);\n  }, [disposeOwnedQueryRef, prepared.query]);\n\n  useEffect(() => {\n    return () => {\n      disposeOwnedQueryRef();\n    };\n  }, [disposeOwnedQueryRef]);\n\n  const reloadInitialQuery = useCallback(() => {\n    const listConfig = config.list;\n    const listDefaults = config.listDefaults ??\n      listConfig.defaultState ?? { where: null, sort: null };\n    const { pageSize } = BACKOFFICE_LIST_DEFAULTS;\n    const variablesBase = {\n      where: state.where,\n      sort: state.sort ?? listDefaults.sort,\n      count: pageSize,\n      cursor: null,\n    };\n    const variables = listConfig.buildQueryVariables(variablesBase);\n    const nextQueryRef = loadQuery<OperationType>(\n      relayEnvironment,\n      listConfig.query,\n      variables,\n      {\n        fetchPolicy: 'network-only',\n      },\n    );\n    disposeOwnedQueryRef();\n    ownedQueryRef.current = nextQueryRef;\n    setQueryRef(nextQueryRef);\n  }, [config, disposeOwnedQueryRef, relayEnvironment, state.sort, state.where]);\n\n  return (\n    <BackofficeErrorBoundary\n      fallback={({ reset }) => {\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={() => {\n              reset();\n              reloadInitialQuery();\n            }}\n            totalCount={null}\n            emptyState={\n              <InlineBanner\n                tone=\"danger\"\n                title={t('list.errors.title')}\n                actions={\n                  <Button\n                    type=\"button\"\n                    variant=\"secondary\"\n                    size=\"small\"\n                    onClick={() => {\n                      reset();\n                      reloadInitialQuery();\n                    }}\n                  >\n                    {t('list.actions.retry')}\n                  </Button>\n                }\n              >\n                {t('list.errors.tableFailed')}\n              </InlineBanner>\n            }\n          />\n        );\n      }}\n    >\n      <BackofficeEntityConnectionListData queryRef={queryRef} />\n    </BackofficeErrorBoundary>\n  );\n};\n\nexport default BackofficeEntityListDataPage;\n"],"mappings":"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"}
+{"version":3,"file":"BackofficeEntityListDataPage.js","names":[],"sources":["../../../src/pages/BackofficeEntityListDataPage.tsx"],"sourcesContent":["import {\n  type JSX,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { loadQuery, 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 { stableListVariablesKey } from '@plumile/backoffice-core/state/stableKey.js';\nimport type { BackofficePreparedListDataRoute } from '@plumile/backoffice-core/types.js';\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport { InlineBanner } from '@plumile/ui/components/feedback/InlineBanner.js';\n\nimport { BackofficeErrorBoundary } from '../components/backoffice/errors/BackofficeErrorBoundary.js';\nimport { BackofficeEntityListScaffold } from '../components/backoffice/scaffolds/BackofficeEntityListScaffold.js';\nimport { BackofficeLazyEntityCountLabel } from '../components/backoffice/refs/BackofficeLazyEntityCount.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 { useRelayEnvironment } from '../relay/useRelayEnvironment.js';\nimport { useBackofficeEntityListRouteContext } from './BackofficeEntityListRouteContext.js';\n\nexport type BackofficeEntityListDataPageProps = {\n  prepared: BackofficePreparedListDataRoute;\n};\n\ntype BackofficeEntityConnectionListDataProps = {\n  queryRef: BackofficePreparedListDataRoute['query'];\n};\n\n/**\n * Renders the Relay-backed row data under the list layout route boundary.\n */\nfunction BackofficeEntityConnectionListData({\n  queryRef,\n}: BackofficeEntityConnectionListDataProps): JSX.Element | null {\n  const {\n    config,\n    state,\n    pushState,\n    headerActions,\n    columns,\n    gridTemplateColumns,\n    getRowId,\n    countFetchKey,\n    bumpCountFetchKey,\n    filterDrawerState,\n    registerRefresh,\n  } = useBackofficeEntityListRouteContext();\n  const listConfig = config.list;\n  const { t } = useBackofficeReactTranslation();\n\n  const queryData = usePreloadedQuery(listConfig.query, queryRef);\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 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  const countVariablesKey = useMemo(() => {\n    return stableListVariablesKey(baseVariables);\n  }, [baseVariables]);\n  const previousCountVariablesKeyRef = useRef(countVariablesKey);\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  useEffect(() => {\n    if (previousCountVariablesKeyRef.current === countVariablesKey) {\n      return;\n    }\n    previousCountVariablesKeyRef.current = countVariablesKey;\n    bumpCountFetchKey();\n  }, [bumpCountFetchKey, countVariablesKey]);\n\n  const handleRefresh = useCallback(() => {\n    bumpCountFetchKey();\n    onRefresh();\n  }, [bumpCountFetchKey, onRefresh]);\n\n  useEffect(() => {\n    registerRefresh(handleRefresh);\n    return () => {\n      registerRefresh(null);\n    };\n  }, [handleRefresh, registerRefresh]);\n\n  const handleLoadMore = useBackofficeLoadMore({\n    hasNext,\n    isLoadingNext,\n    loadNext,\n    count: pageSize,\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    <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      filterDrawerState={filterDrawerState}\n    />\n  );\n}\n\nexport const BackofficeEntityListDataPage = ({\n  prepared,\n}: BackofficeEntityListDataPageProps): JSX.Element | null => {\n  const {\n    config,\n    state,\n    pushState,\n    headerActions,\n    columns,\n    gridTemplateColumns,\n    getRowId,\n    filterDrawerState,\n  } = useBackofficeEntityListRouteContext();\n  const relayEnvironment = useRelayEnvironment();\n  const { t } = useBackofficeReactTranslation();\n  const [queryRef, setQueryRef] = useState(() => {\n    return prepared.query;\n  });\n  const ownedQueryRef = useRef<BackofficePreparedListDataRoute['query'] | null>(\n    null,\n  );\n\n  const disposeOwnedQueryRef = useCallback(() => {\n    ownedQueryRef.current?.dispose();\n    ownedQueryRef.current = null;\n  }, []);\n\n  useEffect(() => {\n    disposeOwnedQueryRef();\n    setQueryRef(prepared.query);\n  }, [disposeOwnedQueryRef, prepared.query]);\n\n  useEffect(() => {\n    return () => {\n      disposeOwnedQueryRef();\n    };\n  }, [disposeOwnedQueryRef]);\n\n  const reloadInitialQuery = useCallback(() => {\n    const listConfig = config.list;\n    const listDefaults = config.listDefaults ??\n      listConfig.defaultState ?? { where: null, sort: null };\n    const { pageSize } = BACKOFFICE_LIST_DEFAULTS;\n    const variablesBase = {\n      where: state.where,\n      sort: state.sort ?? listDefaults.sort,\n      count: pageSize,\n      cursor: null,\n    };\n    const variables = listConfig.buildQueryVariables(variablesBase);\n    const nextQueryRef = loadQuery<OperationType>(\n      relayEnvironment,\n      listConfig.query,\n      variables,\n      {\n        fetchPolicy: 'network-only',\n      },\n    );\n    disposeOwnedQueryRef();\n    ownedQueryRef.current = nextQueryRef;\n    setQueryRef(nextQueryRef);\n  }, [config, disposeOwnedQueryRef, relayEnvironment, state.sort, state.where]);\n\n  return (\n    <BackofficeErrorBoundary\n      fallback={({ reset }) => {\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={() => {\n              reset();\n              reloadInitialQuery();\n            }}\n            totalCount={null}\n            filterDrawerState={filterDrawerState}\n            emptyState={\n              <InlineBanner\n                tone=\"danger\"\n                title={t('list.errors.title')}\n                actions={\n                  <Button\n                    type=\"button\"\n                    variant=\"secondary\"\n                    size=\"small\"\n                    onClick={() => {\n                      reset();\n                      reloadInitialQuery();\n                    }}\n                  >\n                    {t('list.actions.retry')}\n                  </Button>\n                }\n              >\n                {t('list.errors.tableFailed')}\n              </InlineBanner>\n            }\n          />\n        );\n      }}\n    >\n      <BackofficeEntityConnectionListData queryRef={queryRef} />\n    </BackofficeErrorBoundary>\n  );\n};\n\nexport default BackofficeEntityListDataPage;\n"],"mappings":";;;;;;;;;;;;;;;;;AAwCA,SAAS,EAAmC,EAC1C,eAC8D;CAC9D,IAAM,EACJ,WACA,UACA,cACA,kBACA,YACA,wBACA,aACA,kBACA,sBACA,sBACA,uBACE,EAAoC,GAClC,IAAa,EAAO,MACpB,EAAE,SAAM,EAA8B,GAEtC,IAAY,EAAkB,EAAW,OAAO,CAAQ,GACxD,EACJ,MAAM,GACN,aACA,YACA,kBACA,eACE,EACF,EAAW,UACX,CACF,GAEM,IAAa,EAAW,cAAc,CAAY,GAElD,IAAO,QACJ,EAAW,MAAM,KAAK,MACpB,EAAW,MAAM,EAAK,IAAI,CAClC,GACA,CAAC,EAAW,OAAO,CAAU,CAAC,GAE3B,IAAe,EAAO,gBAC1B,EAAW,gBAAgB;EAAE,OAAO;EAAM,MAAM;CAAK,GACjD,IAAe,EAAM,QAAQ,EAAa,MAC1C,EAAE,gBAAa,GAEf,IAAgB,SACb;EACL,OAAO,EAAM;EACb,MAAM;EACN,OAAO;EACP,QAAQ;CACV,IACC;EAAC;EAAU;EAAc,EAAM;CAAK,CAAC,GAClC,IAAoB,QACjB,EAAuB,CAAa,GAC1C,CAAC,CAAa,CAAC,GACZ,IAA+B,EAAO,CAAiB,GAEvD,EAAE,iBAAc,iBAAc,EAAyB;EAC3D;EACA,WAAW;EACX,UAAU;GACR,OAAO,EAAa;GACpB,MAAM,EAAa;GACnB,OAAO;GACP,QAAQ;EACV;EACA,aAAa;EACb,qBAAqB,EAAW;CAClC,CAAC;CAED,QAAgB;EACV,EAA6B,YAAY,MAG7C,EAA6B,UAAU,GACvC,EAAkB;CACpB,GAAG,CAAC,GAAmB,CAAiB,CAAC;CAEzC,IAAM,IAAgB,QAAkB;EAEtC,AADA,EAAkB,GAClB,EAAU;CACZ,GAAG,CAAC,GAAmB,CAAS,CAAC;CAEjC,SACE,EAAgB,CAAa,SAChB;EACX,EAAgB,IAAI;CACtB,IACC,CAAC,GAAe,CAAe,CAAC;CAEnC,IAAM,IAAiB,EAAsB;EAC3C;EACA;EACA;EACA,OAAO;CACT,CAAC,GAEG,IAAmC,kBAAC,QAAD,EAAA,UAAO,EAAE,gBAAgB,EAAQ,CAAA;CA8BxE,OA7BI,EAAK,SAAS,MAChB,IACE,kBAAC,QAAD,EAAA,UACG,EAAE,eAAe,EAChB,OAAO,EAAK,OACd,CAAC,EACG,CAAA,IAwBR,kBAAC,GAAD;EACU;EACD;EACI;EACI;EACT;EACG;EACY;EACX;EACV,aAAa;EACb,eAAe;EACD;EACd,YAAY;EACZ,WAAW;EACX,YAAY;EACM,kBAnCpB,kBAAC,GAAD;GACE,OAAO,EAAW;GAClB,OAAO,EAAM;GACb,UAAU;GACV,iBAAiB;cAEf,MAEE,kBAAC,QAAD,EAAA,UACG,EAAE,gBAAgB;IACjB,OAAO,EAAK;IACZ,OAAO;GACT,CAAC,EACG,CAAA;EAGoB,CAmBZ;EACC;CACpB,CAAA;AAEL;AAEA,IAAa,KAAgC,EAC3C,kBAC2D;CAC3D,IAAM,EACJ,WACA,UACA,cACA,kBACA,YACA,wBACA,aACA,yBACE,EAAoC,GAClC,IAAmB,EAAoB,GACvC,EAAE,SAAM,EAA8B,GACtC,CAAC,GAAU,KAAe,QACvB,EAAS,KACjB,GACK,IAAgB,EACpB,IACF,GAEM,IAAuB,QAAkB;EAE7C,AADA,EAAc,SAAS,QAAQ,GAC/B,EAAc,UAAU;CAC1B,GAAG,CAAC,CAAC;CAOL,AALA,QAAgB;EAEd,AADA,EAAqB,GACrB,EAAY,EAAS,KAAK;CAC5B,GAAG,CAAC,GAAsB,EAAS,KAAK,CAAC,GAEzC,cACe;EACX,EAAqB;CACvB,GACC,CAAC,CAAoB,CAAC;CAEzB,IAAM,IAAqB,QAAkB;EAC3C,IAAM,IAAa,EAAO,MACpB,IAAe,EAAO,gBAC1B,EAAW,gBAAgB;GAAE,OAAO;GAAM,MAAM;EAAK,GACjD,EAAE,gBAAa,GACf,IAAgB;GACpB,OAAO,EAAM;GACb,MAAM,EAAM,QAAQ,EAAa;GACjC,OAAO;GACP,QAAQ;EACV,GACM,IAAY,EAAW,oBAAoB,CAAa,GACxD,IAAe,EACnB,GACA,EAAW,OACX,GACA,EACE,aAAa,eACf,CACF;EAGA,AAFA,EAAqB,GACrB,EAAc,UAAU,GACxB,EAAY,CAAY;CAC1B,GAAG;EAAC;EAAQ;EAAsB;EAAkB,EAAM;EAAM,EAAM;CAAK,CAAC;CAE5E,OACE,kBAAC,GAAD;EACE,WAAW,EAAE,eAET,kBAAC,GAAD;GACU;GACD;GACI;GACI;GACf,MAAM,CAAC;GACE;GACY;GACX;GACV,aAAa;GACb,eAAe;GACf,cAAc;GACd,kBAAkB,CAAC;GACnB,iBAAiB;IAEf,AADA,EAAM,GACN,EAAmB;GACrB;GACA,YAAY;GACO;GACnB,YACE,kBAAC,GAAD;IACE,MAAK;IACL,OAAO,EAAE,mBAAmB;IAC5B,SACE,kBAAC,GAAD;KACE,MAAK;KACL,SAAQ;KACR,MAAK;KACL,eAAe;MAEb,AADA,EAAM,GACN,EAAmB;KACrB;eAEC,EAAE,oBAAoB;IACjB,CAAA;cAGT,EAAE,yBAAyB;GAChB,CAAA;EAEjB,CAAA;YAIL,kBAAC,GAAD,EAA8C,YAAW,CAAA;CAClC,CAAA;AAE7B"}

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

@@ -1,5 +1,5 @@
 //#region src/pages/BackofficeEntityListPage.helpers.tsx
-var e = 24, t = 6, n = 4, r = 32, i = 8, a = {
+var e = {
 	xs: "minmax(3.5rem, 7rem)",
 	s: "minmax(5rem, 10rem)",
 	statusAction: "minmax(7rem, 12rem)",
@@ -7,13 +7,13 @@ var e = 24, t = 6, n = 4, r = 32, i = 8, a = {
 	l: "minmax(9rem, 18rem)",
 	xl: "minmax(11rem, 24rem)",
 	fluid: "minmax(0, 1fr)"
-}, o = (r) => r <= 0 ? 0 : n * 2 + e * r + t * Math.max(0, r - 1), s = (e) => e <= 0 ? 0 : 28 + r * e + i * Math.max(0, e - 1), c = (e, t) => e.mobileRole === "action" ? "60px" : e.isPrimary === !0 ? "minmax(0, 1.4fr)" : "size" in e && typeof e.size == "string" ? a[e.size] : t, l = (e) => e.kind === "route", u = (e) => e.kind === "formMutation", d = (e, t) => e ?? (t === 0 ? "primary" : "secondary"), f = (e) => {
+}, t = (e) => e <= 0 ? 0 : 8 + 24 * e + 6 * Math.max(0, e - 1), n = (e) => e <= 0 ? 0 : 28 + 32 * e + 8 * Math.max(0, e - 1), r = (t, n) => t.mobileRole === "action" ? "60px" : t.isPrimary === !0 ? "minmax(0, 1.4fr)" : "size" in t && typeof t.size == "string" ? e[t.size] : n, i = (e) => e.kind === "route", a = (e) => e.kind === "formMutation", o = (e, t) => e ?? (t === 0 ? "primary" : "secondary"), s = (e) => {
 	if (typeof e != "object" || !e || !("id" in e)) return null;
 	let t = e.id;
 	if (typeof t != "string") return null;
 	let n = t.trim();
 	return n === "" ? null : n;
-}, p = (e, t) => e(t), m = (e) => {
+}, c = (e, t) => e(t), l = (e) => {
 	let { ariaLabel: t, fallback: n, resolveDetailHref: r, className: i, renderAction: a } = e;
 	return {
 		id: "actions",
@@ -21,7 +21,7 @@ var e = 24, t = 6, n = 4, r = 32, i = 8, a = {
 		className: i,
 		mobileRole: "action",
 		cell: (e) => {
-			let i = f(e);
+			let i = s(e);
 			if (i == null) return n;
 			let o = r(i);
 			return o == null ? n : a({
@@ -32,6 +32,6 @@ var e = 24, t = 6, n = 4, r = 32, i = 8, a = {
 	};
 };
 //#endregion
-export { m as buildActionsColumn, s as computeActionsColumnWidthPx, o as computeRowFlagsColumnWidthPx, u as isFormMutationAction, l as isRouteAction, d as resolveActionVariant, p as resolveLabel, f as resolveRowId, c as resolveTrackBySize };
+export { l as buildActionsColumn, n as computeActionsColumnWidthPx, t as computeRowFlagsColumnWidthPx, a as isFormMutationAction, i as isRouteAction, o as resolveActionVariant, c as resolveLabel, s as resolveRowId, r as resolveTrackBySize };
 
 //# sourceMappingURL=BackofficeEntityListPage.helpers.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BackofficeEntityListPage.helpers.js","names":[],"sources":["../../../src/pages/BackofficeEntityListPage.helpers.tsx"],"sourcesContent":["import type { ComponentProps, JSX } from 'react';\n\nimport type {\n  BackofficeEntityFormMutationActionSpec,\n  BackofficeEntityRouteActionSpec,\n  BackofficeListActionSpec,\n  BackofficeRuntimeConnectionListConfig,\n  BackofficeRuntimeResolvedListFacetConfig,\n  I18nLabel,\n} from '@plumile/backoffice-core/types.js';\nimport type { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport type { DataTableColumn } from '@plumile/ui/components/data-table/DataTable.js';\nimport type { TFunction } from 'i18next';\n\nimport type { BackofficeSizedDataTableColumn } from '../components/backoffice/columns/buildDataTableColumns.js';\n\ntype ButtonVariant = ComponentProps<typeof Button>['variant'];\n\nconst ROW_FLAGS_SLOT_PX = 24;\nconst ROW_FLAGS_GAP_PX = 6;\nconst ROW_FLAGS_PADDING_X_PX = 4;\n\nconst ACTIONS_SLOT_PX = 32;\nconst ACTIONS_GAP_PX = 8;\nconst ACTIONS_PADDING_X_PX = 12;\nconst ACTIONS_SAFETY_PX = 4;\n\nconst listColumnTrackBySize: Record<\n  BackofficeSizedDataTableColumn<unknown>['size'],\n  string\n> = {\n  xs: 'minmax(3.5rem, 7rem)',\n  s: 'minmax(5rem, 10rem)',\n  statusAction: 'minmax(7rem, 12rem)',\n  m: 'minmax(7rem, 14rem)',\n  l: 'minmax(9rem, 18rem)',\n  xl: 'minmax(11rem, 24rem)',\n  fluid: 'minmax(0, 1fr)',\n};\n\nexport const computeRowFlagsColumnWidthPx = (flagCount: number): number => {\n  if (flagCount <= 0) {\n    return 0;\n  }\n  return (\n    ROW_FLAGS_PADDING_X_PX * 2 +\n    ROW_FLAGS_SLOT_PX * flagCount +\n    ROW_FLAGS_GAP_PX * Math.max(0, flagCount - 1)\n  );\n};\n\nexport const computeActionsColumnWidthPx = (actionCount: number): number => {\n  if (actionCount <= 0) {\n    return 0;\n  }\n  return (\n    ACTIONS_SAFETY_PX +\n    ACTIONS_PADDING_X_PX * 2 +\n    ACTIONS_SLOT_PX * actionCount +\n    ACTIONS_GAP_PX * Math.max(0, actionCount - 1)\n  );\n};\n\nexport const resolveTrackBySize = (\n  column: DataTableColumn<unknown>,\n  fallback: string,\n): string => {\n  if (column.mobileRole === 'action') {\n    return '60px';\n  }\n  if (column.isPrimary === true) {\n    return 'minmax(0, 1.4fr)';\n  }\n  if ('size' in column && typeof column.size === 'string') {\n    return listColumnTrackBySize[\n      column.size as BackofficeSizedDataTableColumn<unknown>['size']\n    ];\n  }\n  return fallback;\n};\n\nexport const isRouteAction = (\n  action: BackofficeListActionSpec,\n): action is BackofficeEntityRouteActionSpec<null> => {\n  return action.kind === 'route';\n};\n\nexport const isFormMutationAction = (\n  action: BackofficeListActionSpec,\n): action is BackofficeEntityFormMutationActionSpec<null, any, any, any> => {\n  return action.kind === 'formMutation';\n};\n\nexport const resolveActionVariant = (\n  actionVariant: ButtonVariant | undefined,\n  index: number,\n): Exclude<ButtonVariant, undefined> => {\n  if (actionVariant != null) {\n    return actionVariant;\n  }\n  if (index === 0) {\n    return 'primary';\n  }\n  return 'secondary';\n};\n\nexport const resolveRowId = (row: unknown): string | null => {\n  if (row == null || typeof row !== 'object') {\n    return null;\n  }\n  if (!('id' in row)) {\n    return null;\n  }\n  const value = (row as { id?: unknown }).id;\n  if (typeof value !== 'string') {\n    return null;\n  }\n  const trimmed = value.trim();\n  if (trimmed === '') {\n    return null;\n  }\n  return trimmed;\n};\n\nexport type ConnectionListConfig = BackofficeRuntimeResolvedListFacetConfig & {\n  list: BackofficeRuntimeConnectionListConfig;\n};\n\nexport const resolveLabel = (label: I18nLabel, tApp: TFunction): string => {\n  return label(tApp);\n};\n\nexport const buildActionsColumn = (options: {\n  ariaLabel: string;\n  fallback: string;\n  resolveDetailHref: (id: string) => string | null;\n  className?: string;\n  renderAction: (input: { href: string; ariaLabel: string }) => JSX.Element;\n}): DataTableColumn<unknown> => {\n  const { ariaLabel, fallback, resolveDetailHref, className, renderAction } =\n    options;\n\n  return {\n    id: 'actions',\n    header: '',\n    className,\n    mobileRole: 'action',\n    cell: (row) => {\n      const id = resolveRowId(row);\n      if (id == null) {\n        return fallback;\n      }\n      const href = resolveDetailHref(id);\n      if (href == null) {\n        return fallback;\n      }\n      return renderAction({ href, ariaLabel });\n    },\n  };\n};\n"],"mappings":";AAkBA,IAAM,IAAoB,IACpB,IAAmB,GACnB,IAAyB,GAEzB,IAAkB,IAClB,IAAiB,GAIjB,IAGF;CACF,IAAI;CACJ,GAAG;CACH,cAAc;CACd,GAAG;CACH,GAAG;CACH,IAAI;CACJ,OAAO;AACT,GAEa,KAAgC,MACvC,KAAa,IACR,IAGP,IAAyB,IACzB,IAAoB,IACpB,IAAmB,KAAK,IAAI,GAAG,IAAY,CAAC,GAInC,KAA+B,MACtC,KAAe,IACV,IAGP,KAEA,IAAkB,IAClB,IAAiB,KAAK,IAAI,GAAG,IAAc,CAAC,GAInC,KACX,GACA,MAEI,EAAO,eAAe,WACjB,SAEL,EAAO,cAAc,KAChB,qBAEL,UAAU,KAAU,OAAO,EAAO,QAAS,WACtC,EACL,EAAO,QAGJ,GAGI,KACX,MAEO,EAAO,SAAS,SAGZ,KACX,MAEO,EAAO,SAAS,gBAGZ,KACX,GACA,MAEI,MAGA,MAAU,IACL,YAEF,cAGI,KAAgB,MAAgC;CAI3D,IAHmB,OAAO,KAAQ,aAA9B,KAGA,EAAE,QAAQ,IACZ,OAAO;CAET,IAAM,IAAS,EAAyB;CACxC,IAAI,OAAO,KAAU,UACnB,OAAO;CAET,IAAM,IAAU,EAAM,KAAK;CAI3B,OAHI,MAAY,KACP,OAEF;AACT,GAMa,KAAgB,GAAkB,MACtC,EAAM,CAAI,GAGN,KAAsB,MAMH;CAC9B,IAAM,EAAE,cAAW,aAAU,sBAAmB,cAAW,oBACzD;CAEF,OAAO;EACL,IAAI;EACJ,QAAQ;EACR;EACA,YAAY;EACZ,OAAO,MAAQ;GACb,IAAM,IAAK,EAAa,CAAG;GAC3B,IAAI,KAAM,MACR,OAAO;GAET,IAAM,IAAO,EAAkB,CAAE;GAIjC,OAHI,KAAQ,OACH,IAEF,EAAa;IAAE;IAAM;GAAU,CAAC;EACzC;CACF;AACF"}
+{"version":3,"file":"BackofficeEntityListPage.helpers.js","names":[],"sources":["../../../src/pages/BackofficeEntityListPage.helpers.tsx"],"sourcesContent":["import type { ComponentProps, JSX } from 'react';\n\nimport type {\n  BackofficeEntityFormMutationActionSpec,\n  BackofficeEntityRouteActionSpec,\n  BackofficeListActionSpec,\n  BackofficeRuntimeConnectionListConfig,\n  BackofficeRuntimeResolvedListFacetConfig,\n  I18nLabel,\n} from '@plumile/backoffice-core/types.js';\nimport type { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport type { DataTableColumn } from '@plumile/ui/components/data-table/DataTable.js';\nimport type { TFunction } from 'i18next';\n\nimport type { BackofficeSizedDataTableColumn } from '../components/backoffice/columns/buildDataTableColumns.js';\n\ntype ButtonVariant = ComponentProps<typeof Button>['variant'];\n\nconst ROW_FLAGS_SLOT_PX = 24;\nconst ROW_FLAGS_GAP_PX = 6;\nconst ROW_FLAGS_PADDING_X_PX = 4;\n\nconst ACTIONS_SLOT_PX = 32;\nconst ACTIONS_GAP_PX = 8;\nconst ACTIONS_PADDING_X_PX = 12;\nconst ACTIONS_SAFETY_PX = 4;\n\nconst listColumnTrackBySize: Record<\n  BackofficeSizedDataTableColumn<unknown>['size'],\n  string\n> = {\n  xs: 'minmax(3.5rem, 7rem)',\n  s: 'minmax(5rem, 10rem)',\n  statusAction: 'minmax(7rem, 12rem)',\n  m: 'minmax(7rem, 14rem)',\n  l: 'minmax(9rem, 18rem)',\n  xl: 'minmax(11rem, 24rem)',\n  fluid: 'minmax(0, 1fr)',\n};\n\nexport const computeRowFlagsColumnWidthPx = (flagCount: number): number => {\n  if (flagCount <= 0) {\n    return 0;\n  }\n  return (\n    ROW_FLAGS_PADDING_X_PX * 2 +\n    ROW_FLAGS_SLOT_PX * flagCount +\n    ROW_FLAGS_GAP_PX * Math.max(0, flagCount - 1)\n  );\n};\n\nexport const computeActionsColumnWidthPx = (actionCount: number): number => {\n  if (actionCount <= 0) {\n    return 0;\n  }\n  return (\n    ACTIONS_SAFETY_PX +\n    ACTIONS_PADDING_X_PX * 2 +\n    ACTIONS_SLOT_PX * actionCount +\n    ACTIONS_GAP_PX * Math.max(0, actionCount - 1)\n  );\n};\n\nexport const resolveTrackBySize = (\n  column: DataTableColumn<unknown>,\n  fallback: string,\n): string => {\n  if (column.mobileRole === 'action') {\n    return '60px';\n  }\n  if (column.isPrimary === true) {\n    return 'minmax(0, 1.4fr)';\n  }\n  if ('size' in column && typeof column.size === 'string') {\n    return listColumnTrackBySize[\n      column.size as BackofficeSizedDataTableColumn<unknown>['size']\n    ];\n  }\n  return fallback;\n};\n\nexport const isRouteAction = (\n  action: BackofficeListActionSpec,\n): action is BackofficeEntityRouteActionSpec<null> => {\n  return action.kind === 'route';\n};\n\nexport const isFormMutationAction = (\n  action: BackofficeListActionSpec,\n): action is BackofficeEntityFormMutationActionSpec<null, any, any, any> => {\n  return action.kind === 'formMutation';\n};\n\nexport const resolveActionVariant = (\n  actionVariant: ButtonVariant | undefined,\n  index: number,\n): Exclude<ButtonVariant, undefined> => {\n  if (actionVariant != null) {\n    return actionVariant;\n  }\n  if (index === 0) {\n    return 'primary';\n  }\n  return 'secondary';\n};\n\nexport const resolveRowId = (row: unknown): string | null => {\n  if (row == null || typeof row !== 'object') {\n    return null;\n  }\n  if (!('id' in row)) {\n    return null;\n  }\n  const value = (row as { id?: unknown }).id;\n  if (typeof value !== 'string') {\n    return null;\n  }\n  const trimmed = value.trim();\n  if (trimmed === '') {\n    return null;\n  }\n  return trimmed;\n};\n\nexport type ConnectionListConfig = BackofficeRuntimeResolvedListFacetConfig & {\n  list: BackofficeRuntimeConnectionListConfig;\n};\n\nexport const resolveLabel = (label: I18nLabel, tApp: TFunction): string => {\n  return label(tApp);\n};\n\nexport const buildActionsColumn = (options: {\n  ariaLabel: string;\n  fallback: string;\n  resolveDetailHref: (id: string) => string | null;\n  className?: string;\n  renderAction: (input: { href: string; ariaLabel: string }) => JSX.Element;\n}): DataTableColumn<unknown> => {\n  const { ariaLabel, fallback, resolveDetailHref, className, renderAction } =\n    options;\n\n  return {\n    id: 'actions',\n    header: '',\n    className,\n    mobileRole: 'action',\n    cell: (row) => {\n      const id = resolveRowId(row);\n      if (id == null) {\n        return fallback;\n      }\n      const href = resolveDetailHref(id);\n      if (href == null) {\n        return fallback;\n      }\n      return renderAction({ href, ariaLabel });\n    },\n  };\n};\n"],"mappings":";AAkBA,IASM,IAGF;CACF,IAAI;CACJ,GAAG;CACH,cAAc;CACd,GAAG;CACH,GAAG;CACH,IAAI;CACJ,OAAO;AACT,GAEa,KAAgC,MACvC,KAAa,IACR,IAGP,IACA,KAAoB,IACpB,IAAmB,KAAK,IAAI,GAAG,IAAY,CAAC,GAInC,KAA+B,MACtC,KAAe,IACV,IAGP,KAEA,KAAkB,IAClB,IAAiB,KAAK,IAAI,GAAG,IAAc,CAAC,GAInC,KACX,GACA,MAEI,EAAO,eAAe,WACjB,SAEL,EAAO,cAAc,KAChB,qBAEL,UAAU,KAAU,OAAO,EAAO,QAAS,WACtC,EACL,EAAO,QAGJ,GAGI,KACX,MAEO,EAAO,SAAS,SAGZ,KACX,MAEO,EAAO,SAAS,gBAGZ,KACX,GACA,MAEI,MAGA,MAAU,IACL,YAEF,cAGI,KAAgB,MAAgC;CAI3D,IAHmB,OAAO,KAAQ,aAA9B,KAGA,EAAE,QAAQ,IACZ,OAAO;CAET,IAAM,IAAS,EAAyB;CACxC,IAAI,OAAO,KAAU,UACnB,OAAO;CAET,IAAM,IAAU,EAAM,KAAK;CAI3B,OAHI,MAAY,KACP,OAEF;AACT,GAMa,KAAgB,GAAkB,MACtC,EAAM,CAAI,GAGN,KAAsB,MAMH;CAC9B,IAAM,EAAE,cAAW,aAAU,sBAAmB,cAAW,oBACzD;CAEF,OAAO;EACL,IAAI;EACJ,QAAQ;EACR;EACA,YAAY;EACZ,OAAO,MAAQ;GACb,IAAM,IAAK,EAAa,CAAG;GAC3B,IAAI,KAAM,MACR,OAAO;GAET,IAAM,IAAO,EAAkB,CAAE;GAIjC,OAHI,KAAQ,OACH,IAEF,EAAa;IAAE;IAAM;GAAU,CAAC;EACzC;CACF;AACF"}

package/lib/esm/pages/BackofficeEntityListPage.js

@@ -7,19 +7,20 @@ import { rowFlagsColumnCell as a } from "../components/backoffice/list/RowFlagsC
 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";
+import { createBackofficeEntityListUiStateKey as l, useBackofficeListFilterDrawerState as u } from "../provider/BackofficeListUiStateContext.js";
+import { BackofficeEntityListRouteProvider as d } from "./BackofficeEntityListRouteContext.js";
+import { buildActionsColumn as f, computeActionsColumnWidthPx as p, computeRowFlagsColumnWidthPx as m, isFormMutationAction as h, isRouteAction as g, resolveActionVariant as _, resolveLabel as v, resolveTrackBySize as y } from "./BackofficeEntityListPage.helpers.js";
+import { actionTrigger as b, actionsColumnCell as x, headerActions as S } from "./backofficeEntityListPage.css.js";
+import { Suspense as C, useCallback as w, useMemo as T, useRef as E, useState as D } from "react";
+import { jsx as O, jsxs as k } from "react/jsx-runtime";
+import { useTranslation as A } from "react-i18next";
+import { Button as j } from "@plumile/ui/atomic/atoms/button/Button.js";
+import M from "@plumile/router/routing/Link.js";
+import { LinkButton as N } from "@plumile/ui/atomic/atoms/button/LinkButton.js";
+import { TableCell as P } from "@plumile/ui/components/data-table/TableCell.js";
+import { EyeSvg as F } from "@plumile/ui/icons/EyeSvg.js";
 //#region src/pages/BackofficeEntityListPage.tsx
-var P = (e, t, n, r) => {
+var I = (e, t, n, r) => {
 	let i = t != null && t.length > 0, s = e;
 	if (i) {
 		let n = [{
@@ -27,7 +28,7 @@ var P = (e, t, n, r) => {
 			header: "",
 			className: a,
 			mobileRole: "badge",
-			cell: (e) => /* @__PURE__ */ E(o, {
+			cell: (e) => /* @__PURE__ */ O(o, {
 				row: e,
 				flags: t,
 				tApp: r
@@ -40,54 +41,54 @@ var P = (e, t, n, r) => {
 	}
 	let c = 0;
 	i && (c = t.length);
-	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 = "";
+	let l = m(c), u = p(n), d = 0;
+	i && (d = 1);
+	let f = s.length - d - 1, h = s.slice(d, d + Math.max(0, f)).map((e) => y(e, "1fr")).join(" "), g = "";
 	return g = i ? `${l}px ${h} ${u}px` : `${h} ${u}px`, {
 		columns: s,
 		gridTemplateColumns: g
 	};
-}, 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,
+}, L = ({ children: i, config: a, breadcrumb: o }) => {
+	let p = a.list, { t: m } = A(), { t: y } = e(), [L, R] = D(null), [z, B] = D(0), V = E(null), H = w((e) => {
+		V.current = e;
+	}, []), { columns: U, gridTemplateColumns: W } = T(() => {
+		let e = n(p.columns, {
+			tApp: m,
+			t: y
+		}), t = f({
+			ariaLabel: y("actions.view"),
+			fallback: y("common.notAvailable"),
+			className: x,
 			resolveDetailHref: (e) => a.routes.detail(e),
-			renderAction: ({ href: e, ariaLabel: t }) => /* @__PURE__ */ E(M.Actions, { children: /* @__PURE__ */ E(A, {
+			renderAction: ({ href: e, ariaLabel: t }) => /* @__PURE__ */ O(P.Actions, { children: /* @__PURE__ */ O(M, {
 				to: e,
-				className: v,
+				className: b,
 				"aria-label": t,
 				title: t,
 				preloadOnHover: "code",
-				children: /* @__PURE__ */ E(N, {
+				children: /* @__PURE__ */ O(F, {
 					width: 16,
 					height: 16
 				})
 			}) })
 		});
-		return P([...e, t], d.rowFlags, 1, f);
+		return I([...e, t], p.rowFlags, 1, m);
 	}, [
 		a.routes,
-		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, {
+		p.columns,
+		p.rowFlags,
+		y,
+		m
+	]), G = w((e) => p.getRowId(e), [p]), { state: K, pushState: q } = c(a), J = u(T(() => l(a.id), [a.id])), Y = w(() => {
+		B((e) => e + 1), V.current?.();
+	}, []), X = T(() => a.listActions ?? [], [a.listActions]), Z = T(() => X.filter((e) => e.isVisible == null ? !0 : e.isVisible(null)), [X]), Q = T(() => {
+		if (Z.length !== 0) return /* @__PURE__ */ O("div", {
+			className: S,
+			children: Z.map((e, t) => {
+				let { variant: n } = e, r = v(e.label, m), i = r;
+				e.ariaLabel != null && (i = v(e.ariaLabel, m));
+				let a = _(n, t), o = e.size ?? "small", s = e.isDisabled?.(null) === !0;
+				return g(e) ? /* @__PURE__ */ O(N, {
 					to: e.to(null),
 					variant: a,
 					size: o,
@@ -95,80 +96,83 @@ var P = (e, t, n, r) => {
 					"aria-label": i,
 					preloadOnHover: "code-and-data",
 					children: r
-				}, e.id) : p(e) ? /* @__PURE__ */ E(k, {
+				}, e.id) : h(e) ? /* @__PURE__ */ O(j, {
 					type: "button",
 					variant: a,
 					size: o,
 					disabled: s,
 					onClick: () => {
-						I(e.id);
+						R(e.id);
 					},
 					"aria-label": i,
 					children: r
 				}, e.id) : null;
 			})
 		});
-	}, [f, J]), X = q.find((e) => e.id === F);
-	return /* @__PURE__ */ D(r, {
+	}, [m, Z]), $ = X.find((e) => e.id === L);
+	return /* @__PURE__ */ k(r, {
 		breadcrumb: o,
-		children: [/* @__PURE__ */ E(l, {
-			value: C(() => ({
+		children: [/* @__PURE__ */ O(d, {
+			value: T(() => ({
 				config: a,
-				state: W,
-				pushState: G,
-				headerActions: Y,
-				columns: V,
-				gridTemplateColumns: H,
-				getRowId: U,
-				countFetchKey: L,
+				state: K,
+				pushState: q,
+				headerActions: Q,
+				columns: U,
+				gridTemplateColumns: W,
+				getRowId: G,
+				countFetchKey: z,
+				filterDrawerState: J,
 				bumpCountFetchKey: () => {
-					R((e) => e + 1);
+					B((e) => e + 1);
 				},
-				registerRefresh: B
+				registerRefresh: H
 			}), [
-				V,
-				a,
-				L,
 				U,
-				H,
-				Y,
+				a,
+				z,
+				J,
 				G,
-				B,
-				W
+				W,
+				Q,
+				q,
+				H,
+				K
 			]),
-			children: /* @__PURE__ */ E(x, {
-				fallback: /* @__PURE__ */ E(s, {
+			children: /* @__PURE__ */ O(C, {
+				fallback: /* @__PURE__ */ O(s, {
 					config: a,
-					state: W,
-					pushState: G,
-					headerActions: Y,
+					state: K,
+					pushState: q,
+					headerActions: Q,
 					rows: [],
-					columns: V,
-					gridTemplateColumns: H,
-					getRowId: U,
+					columns: U,
+					gridTemplateColumns: W,
+					getRowId: G,
 					hasNextPage: !1,
 					isLoadingMore: !1,
 					isRefreshing: !1,
 					onLoadMore: () => {},
-					onRefresh: K,
+					onRefresh: Y,
 					totalCount: null,
-					isLoadingInitial: !0
+					isLoadingInitial: !0,
+					filterDrawerState: J
 				}),
 				children: i
 			})
-		}), X != null && p(X) && /* @__PURE__ */ E(t, {
+		}), $ != null && h($) && /* @__PURE__ */ O(t, {
 			isOpen: !0,
-			action: X,
+			action: $,
 			node: null,
 			onClose: () => {
-				I(null);
+				R(null);
 			},
-			onSuccess: K
+			onSuccess: Y
 		})]
 	});
-}, I = ({ children: e, entityManifest: t, config: n }) => {
-	let { t: r } = O();
-	return /* @__PURE__ */ E(F, {
+}, R = ({ children: e, entityManifest: t, config: n }) => {
+	let { t: r } = A();
+	return /* @__PURE__ */ O(L, {
 		children: e,
 		entityManifest: t,
 		config: n,
@@ -176,6 +180,6 @@ var P = (e, t, n, r) => {
 	});
 };
 //#endregion
-export { I as BackofficeEntityListPage, I as default };
+export { R as BackofficeEntityListPage, R as default };
 
 //# sourceMappingURL=BackofficeEntityListPage.js.map