@plumile/backoffice-react 0.1.205 → 0.1.206

package/README.md

@@ -91,6 +91,11 @@ without loading the list facet.
 
 ### Relay and mutation helpers
 
+- `useInfiniteConnection` is the required connection lifecycle for generic and
+  application lists. Callers provide a telemetry `surface`, a variable-derived
+  `resetKey`, and adapt Relay `loadNext(count, { onComplete })` through
+  `runLoadMore`; the hook owns deduplication, timeout, incremental error, and
+  retry behavior.
 - `resolveMutationOutcome`
 - `resolveAgentStartOutcome`
 - `requireField`
@@ -112,6 +117,8 @@ only helpers tied to backoffice mutations, connections, and typed data.
   `BackofficeLifecycleTimelineSection` and `BackofficeEntityLink`
 - `EntityIdPickerDialog`, which remains the backoffice picker integration for
   manifests, picker facets, Relay loading, scope, search, and selected IDs.
+  It debounces search, paginates the manifest connection, and observes the
+  modal content scroll root while preserving local incremental retry.
   The reusable picker visuals live in `@plumile/ui` as
   `BackofficePickerShell`, `BackofficePickerList`, and `BackofficePickerRow`.
 

package/lib/esm/components/backoffice/pickers/EntityIdPickerDialog.js

@@ -1,126 +1,179 @@
 import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
 import { BackofficeErrorBoundary as t } from "../errors/BackofficeErrorBoundary.js";
 import { useBackofficePickerEntityLoader as n } from "../../../provider/useBackofficeEntityLoader.js";
-import { useBackofficeRuntimeFragment as r } from "../../../relay/typedRelayHooks.js";
-import { loadingLabel as i, loadingState as a } from "./entityIdPickerDialog.css.js";
-import { Suspense as o, useCallback as s, useEffect as c, useMemo as l, useState as u } from "react";
-import { InlineBanner as d } from "@plumile/ui/components/feedback/InlineBanner.js";
-import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
-import { useTranslation as h } from "react-i18next";
-import { Button as g } from "@plumile/ui/atomic/atoms/button/Button.js";
-import * as _ from "react-relay";
-import { Modal as v } from "@plumile/ui/atomic/atoms/modal/Modal.js";
-import { Spinner as y } from "@plumile/ui/backoffice/atoms/spinner/Spinner.js";
-import { BackofficeEmptyState as b } from "@plumile/ui/backoffice/molecules/backoffice_empty_state/BackofficeEmptyState.js";
-import { BackofficePickerList as x, BackofficePickerShell as S } from "@plumile/ui/backoffice/molecules/backoffice_picker/BackofficePicker.js";
+import r from "../../../hooks/useInfiniteConnection.js";
+import { useBackofficeRuntimePaginationFragment as i } from "../../../relay/typedRelayHooks.js";
+import { loadingLabel as a, loadingState as o } from "./entityIdPickerDialog.css.js";
+import { Suspense as s, useCallback as c, useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
+import { InlineBanner as p } from "@plumile/ui/components/feedback/InlineBanner.js";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { useTranslation as _ } from "react-i18next";
+import { Button as v } from "@plumile/ui/atomic/atoms/button/Button.js";
+import * as y from "react-relay";
+import { Modal as b } from "@plumile/ui/atomic/atoms/modal/Modal.js";
+import { Spinner as x } from "@plumile/ui/backoffice/atoms/spinner/Spinner.js";
+import { BackofficeEmptyState as S } from "@plumile/ui/backoffice/molecules/backoffice_empty_state/BackofficeEmptyState.js";
+import { BackofficePickerList as C, BackofficePickerShell as w } from "@plumile/ui/backoffice/molecules/backoffice_picker/BackofficePicker.js";
+import { InfiniteScrollTrigger as T } from "@plumile/ui/components/infinite/InfiniteScrollTrigger.js";
 //#region src/components/backoffice/pickers/EntityIdPickerDialog.tsx
-var { useLazyLoadQuery: C } = _, w = "store-and-network", T = (e, t) => e(t), E = ({ config: e, search: t, scope: n, fetchKey: i, onSelectId: a }) => {
-	let o = l(() => {
-		let r = t.trim();
+var { useLazyLoadQuery: E } = y, D = "store-and-network", O = (e, t) => e(t), k = ({ config: e, entity: t, search: n, scope: a, fetchKey: o, resetKey: s, scrollRootRef: l, labels: d, onSelectId: f }) => {
+	let _ = u(() => {
+		let t = n.trim();
 		return e.buildQueryVariables({
-			search: r,
-			scope: n
+			search: t,
+			scope: a
 		});
 	}, [
 		e,
-		n,
-		t
-	]), s = C(e.query, o, {
-		fetchPolicy: w,
-		fetchKey: i
-	}), c = r(e.fragment, s), u = e.getConnection(c), d = l(() => u.edges.map((t) => {
+		a,
+		n
+	]), y = E(e.query, _, {
+		fetchPolicy: D,
+		fetchKey: o
+	}), { data: b, loadNext: x, hasNext: S, isLoadingNext: w } = i(e.fragment, y), O = e.getConnection(b), k = u(() => O.edges.map((t) => {
 		let n = e.toRow(t.node);
 		return {
 			id: e.getRowId(n),
 			title: n.title,
 			subtitle: n.subtitle
 		};
-	}), [e, u.edges]);
-	return /* @__PURE__ */ p(x, {
-		items: d,
-		onSelectItem: (e) => {
-			a(e.id);
-		}
+	}), [e, O.edges]), A = c((e) => {
+		x(20, { onComplete: e });
+	}, [x]), j = r({
+		nodes: k,
+		hasNext: S,
+		isLoadingNext: w,
+		runLoadMore: A,
+		surface: `backoffice.entity-picker.${t}`,
+		resetKey: s
 	});
-}, D = (e, t) => /* @__PURE__ */ p(f, { children: /* @__PURE__ */ p(g, {
+	return /* @__PURE__ */ g(m, { children: [
+		/* @__PURE__ */ h(C, {
+			items: j.nodes,
+			onSelectItem: (e) => {
+				f(e.id);
+			}
+		}),
+		/* @__PURE__ */ h(T, {
+			disabled: j.incrementalError != null,
+			hasNext: j.hasNext,
+			isLoading: j.isLoadingNext,
+			onLoadMore: j.loadMoreSafe,
+			scrollRootRef: l,
+			labels: {
+				loadMore: d.loadMore,
+				loading: d.loading,
+				end: d.end
+			}
+		}),
+		j.incrementalError != null && /* @__PURE__ */ h(p, {
+			tone: "danger",
+			title: j.incrementalError.message,
+			actions: /* @__PURE__ */ h(v, {
+				type: "button",
+				variant: "secondary",
+				onClick: j.retryLoadMore,
+				children: d.retry
+			}),
+			children: null
+		})
+	] });
+}, A = (e, t) => /* @__PURE__ */ h(m, { children: /* @__PURE__ */ h(v, {
 	type: "button",
 	variant: "secondary",
 	onClick: e,
 	children: t
-}) }), O = ({ message: e }) => /* @__PURE__ */ p(d, {
+}) }), j = ({ message: e }) => /* @__PURE__ */ h(p, {
 	tone: "warning",
 	title: e,
 	children: null
-}), k = ({ label: e }) => /* @__PURE__ */ m("div", {
-	className: a,
+}), M = ({ label: e }) => /* @__PURE__ */ g("div", {
+	className: o,
 	role: "status",
 	"aria-live": "polite",
-	children: [/* @__PURE__ */ p(y, {
+	children: [/* @__PURE__ */ h(x, {
 		size: 18,
 		ariaLabel: e
-	}), /* @__PURE__ */ p("span", {
-		className: i,
+	}), /* @__PURE__ */ h("span", {
+		className: a,
 		children: e
 	})]
-}), A = ({ isOpen: r, entity: i, title: a, scope: f, onClose: m, onSelectId: _ }) => {
-	let { t: y } = h(), { t: x } = e(), [C, w] = u(""), [A, j] = u(0), M = n(i, { enabled: r }), N;
-	M.status === "loaded" && (N = M.module.config.picker), c(() => {
-		r && (w(""), j((e) => e + 1));
-	}, [r]);
-	let P = l(() => D(m, x("common.actions.close")), [m, x]), F = s((e) => {
-		w(e), j((e) => e + 1);
-	}, []), I = s((e) => {
-		_(e), m();
-	}, [m, _]);
+}), N = ({ isOpen: r, entity: i, title: a, scope: o, onClose: m, onSelectId: g }) => {
+	let { t: y } = _(), { t: x } = e(), [C, T] = f(""), [E, D] = f(""), [N, P] = f(0), F = d(null), I = n(i, { enabled: r }), L;
+	I.status === "loaded" && (L = I.module.config.picker), l(() => {
+		r && (T(""), D(""), P((e) => e + 1));
+	}, [r]), l(() => {
+		let e = setTimeout(() => {
+			D(C);
+		}, 250);
+		return () => {
+			clearTimeout(e);
+		};
+	}, [C]);
+	let R = u(() => A(m, x("common.actions.close")), [m, x]), z = c((e) => {
+		T(e);
+	}, []), B = c((e) => {
+		g(e), m();
+	}, [m, g]);
 	if (!r) return null;
-	let L;
-	N?.searchPlaceholder != null && (L = T(N.searchPlaceholder, y));
-	let R = C.trim(), z = N?.searchRequired === !0, B;
-	return B = M.status === "loading" ? /* @__PURE__ */ p(k, { label: x("common.loading") }) : N == null ? /* @__PURE__ */ p(O, { message: x("picker.unavailable", { entity: i }) }) : z && R === "" ? /* @__PURE__ */ p(b, { title: x("picker.searchRequired") }) : /* @__PURE__ */ p(E, {
-		config: N,
-		search: C,
-		scope: f,
-		fetchKey: A,
-		onSelectId: I
-	}), /* @__PURE__ */ p(v, {
+	let V;
+	L?.searchPlaceholder != null && (V = O(L.searchPlaceholder, y));
+	let H = E.trim(), U = L?.searchRequired === !0, W;
+	return W = I.status === "loading" ? /* @__PURE__ */ h(M, { label: x("common.loading") }) : L == null ? /* @__PURE__ */ h(j, { message: x("picker.unavailable", { entity: i }) }) : U && H === "" ? /* @__PURE__ */ h(S, { title: x("picker.searchRequired") }) : /* @__PURE__ */ h(k, {
+		config: L,
+		entity: i,
+		search: E,
+		scope: o,
+		fetchKey: N,
+		resetKey: `${i}:${H}:${JSON.stringify(o ?? {})}:${N}`,
+		scrollRootRef: F,
+		labels: {
+			loadMore: x("list.loadMore.action"),
+			loading: x("list.loadMore.loading"),
+			end: x("list.loadMore.end"),
+			retry: x("common.actions.retry")
+		},
+		onSelectId: B
+	}), /* @__PURE__ */ h(b, {
 		isOpen: r,
 		onClose: m,
 		title: a,
-		footer: P,
+		footer: R,
 		initialFocus: "first-form-control",
-		children: /* @__PURE__ */ p(S, {
+		scrollRootRef: F,
+		children: /* @__PURE__ */ h(w, {
 			searchValue: C,
-			onSearchChange: F,
-			searchPlaceholder: L,
-			searchAriaLabel: L,
+			onSearchChange: z,
+			searchPlaceholder: V,
+			searchAriaLabel: V,
 			searchName: "backoffice-entity-picker-search",
-			searchEnabled: N?.searchEnabled ?? !0,
-			children: /* @__PURE__ */ p(t, {
+			searchEnabled: L?.searchEnabled ?? !0,
+			children: /* @__PURE__ */ h(t, {
 				fallback: (e) => {
 					let { reset: t } = e;
-					return /* @__PURE__ */ p(d, {
+					return /* @__PURE__ */ h(p, {
 						tone: "danger",
 						title: x("picker.errors.loadFailed"),
-						actions: /* @__PURE__ */ p(g, {
+						actions: /* @__PURE__ */ h(v, {
 							type: "button",
 							variant: "secondary",
 							onClick: () => {
-								t(), j((e) => e + 1);
+								t(), P((e) => e + 1);
 							},
 							children: x("common.actions.retry")
 						}),
 						children: null
 					});
 				},
-				children: /* @__PURE__ */ p(o, {
-					fallback: /* @__PURE__ */ p(k, { label: x("common.loading") }),
-					children: B
+				children: /* @__PURE__ */ h(s, {
+					fallback: /* @__PURE__ */ h(M, { label: x("common.loading") }),
+					children: W
 				})
 			})
 		})
 	});
 };
 //#endregion
-export { A as EntityIdPickerDialog, A as default };
+export { N as EntityIdPickerDialog, N as default };
 
 //# sourceMappingURL=EntityIdPickerDialog.js.map

package/lib/esm/components/backoffice/pickers/EntityIdPickerDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntityIdPickerDialog.js","names":[],"sources":["../../../../../src/components/backoffice/pickers/EntityIdPickerDialog.tsx"],"sourcesContent":["import {\n  Suspense,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n  type JSX,\n} from 'react';\nimport type { TFunction } from 'i18next';\nimport { useTranslation } from 'react-i18next';\nimport * as ReactRelay from 'react-relay';\n\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport { Modal } from '@plumile/ui/atomic/atoms/modal/Modal.js';\nimport { Spinner } from '@plumile/ui/backoffice/atoms/spinner/Spinner.js';\nimport { BackofficeEmptyState } from '@plumile/ui/backoffice/molecules/backoffice_empty_state/BackofficeEmptyState.js';\nimport {\n  BackofficePickerList,\n  BackofficePickerShell,\n  type BackofficePickerItem,\n} from '@plumile/ui/backoffice/molecules/backoffice_picker/BackofficePicker.js';\nimport { InlineBanner } from '@plumile/ui/components/feedback/InlineBanner.js';\nimport type {\n  BackofficePickerScope,\n  BackofficeRuntimeEntityPickerConfig,\n  I18nLabel,\n} from '@plumile/backoffice-core/types.js';\n\nimport { BackofficeErrorBoundary } from '../errors/BackofficeErrorBoundary.js';\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport { useBackofficePickerEntityLoader } from '../../../provider/useBackofficeEntityLoader.js';\nimport { useBackofficeRuntimeFragment } from '../../../relay/typedRelayHooks.js';\n\nimport * as styles from './entityIdPickerDialog.css.js';\n\nconst { useLazyLoadQuery } = ReactRelay;\n\nexport type EntityIdPickerDialogProps = {\n  isOpen: boolean;\n  entity: string;\n  title: string;\n  scope?: BackofficePickerScope<Record<string, string>>;\n  onClose: () => void;\n  onSelectId: (id: string) => void;\n};\n\nconst PICKER_FETCH_POLICY = 'store-and-network' as const;\n\nconst resolveLabel = (label: I18nLabel, tApp: TFunction): string => {\n  return label(tApp);\n};\n\ntype PickerBodyProps = {\n  config: BackofficeRuntimeEntityPickerConfig;\n  search: string;\n  scope?: BackofficePickerScope<Record<string, string>>;\n  fetchKey: number;\n  onSelectId: (id: string) => void;\n};\n\ntype RuntimePickerRow = {\n  title: string;\n  subtitle?: string | null | undefined;\n};\n\nconst PickerBody = ({\n  config,\n  search,\n  scope,\n  fetchKey,\n  onSelectId,\n}: PickerBodyProps): JSX.Element => {\n  const variables = useMemo(() => {\n    const trimmed = search.trim();\n    return config.buildQueryVariables({ search: trimmed, scope });\n  }, [config, scope, search]);\n\n  const queryData = useLazyLoadQuery(config.query, variables, {\n    fetchPolicy: PICKER_FETCH_POLICY,\n    fetchKey,\n  });\n\n  const fragmentData = useBackofficeRuntimeFragment(config.fragment, queryData);\n\n  const connection = config.getConnection(fragmentData);\n\n  const items = useMemo<readonly BackofficePickerItem[]>(() => {\n    return connection.edges.map((edge) => {\n      const row = config.toRow(edge.node) as RuntimePickerRow;\n      const id = config.getRowId(row);\n      return {\n        id,\n        title: row.title,\n        subtitle: row.subtitle,\n      };\n    });\n  }, [config, connection.edges]);\n\n  return (\n    <BackofficePickerList\n      items={items}\n      onSelectItem={(item) => {\n        onSelectId(item.id);\n      }}\n    />\n  );\n};\n\nconst buildFooter = (onClose: () => void, closeLabel: string): JSX.Element => {\n  return (\n    <>\n      <Button type=\"button\" variant=\"secondary\" onClick={onClose}>\n        {closeLabel}\n      </Button>\n    </>\n  );\n};\n\nconst PickerUnavailable = ({ message }: { message: string }) => {\n  return (\n    <InlineBanner tone=\"warning\" title={message}>\n      {null}\n    </InlineBanner>\n  );\n};\n\nconst PickerLoading = ({ label }: { label: string }): JSX.Element => {\n  return (\n    <div className={styles.loadingState} role=\"status\" aria-live=\"polite\">\n      <Spinner size={18} ariaLabel={label} />\n      <span className={styles.loadingLabel}>{label}</span>\n    </div>\n  );\n};\n\nexport const EntityIdPickerDialog = ({\n  isOpen,\n  entity,\n  title,\n  scope,\n  onClose,\n  onSelectId,\n}: EntityIdPickerDialogProps): JSX.Element | null => {\n  const { t: tApp } = useTranslation();\n  const { t } = useBackofficeReactTranslation();\n  const [search, setSearch] = useState('');\n  const [fetchKey, setFetchKey] = useState(0);\n  const entityState = useBackofficePickerEntityLoader(entity, {\n    enabled: isOpen,\n  });\n\n  let pickerConfig: BackofficeRuntimeEntityPickerConfig | undefined;\n  if (entityState.status === 'loaded') {\n    pickerConfig = entityState.module.config.picker as\n      BackofficeRuntimeEntityPickerConfig | undefined;\n  }\n\n  useEffect(() => {\n    if (isOpen) {\n      setSearch('');\n      setFetchKey((value) => {\n        return value + 1;\n      });\n    }\n  }, [isOpen]);\n\n  const footer = useMemo(() => {\n    return buildFooter(onClose, t('common.actions.close'));\n  }, [onClose, t]);\n\n  const handleSearchChange = useCallback((next: string) => {\n    setSearch(next);\n    setFetchKey((value) => {\n      return value + 1;\n    });\n  }, []);\n\n  const handleSelectId = useCallback(\n    (id: string) => {\n      onSelectId(id);\n      onClose();\n    },\n    [onClose, onSelectId],\n  );\n\n  if (!isOpen) {\n    return null;\n  }\n\n  let resolvedSearchPlaceholder: string | undefined;\n  if (pickerConfig?.searchPlaceholder != null) {\n    resolvedSearchPlaceholder = resolveLabel(\n      pickerConfig.searchPlaceholder,\n      tApp,\n    );\n  }\n\n  const trimmedSearch = search.trim();\n  const isSearchRequired = pickerConfig?.searchRequired === true;\n\n  let pickerNode: JSX.Element;\n  if (entityState.status === 'loading') {\n    pickerNode = <PickerLoading label={t('common.loading')} />;\n  } else if (pickerConfig != null) {\n    if (isSearchRequired && trimmedSearch === '') {\n      pickerNode = <BackofficeEmptyState title={t('picker.searchRequired')} />;\n    } else {\n      pickerNode = (\n        <PickerBody\n          config={pickerConfig}\n          search={search}\n          scope={scope}\n          fetchKey={fetchKey}\n          onSelectId={handleSelectId}\n        />\n      );\n    }\n  } else {\n    pickerNode = (\n      <PickerUnavailable message={t('picker.unavailable', { entity })} />\n    );\n  }\n\n  return (\n    <Modal\n      isOpen={isOpen}\n      onClose={onClose}\n      title={title}\n      footer={footer}\n      initialFocus=\"first-form-control\"\n    >\n      <BackofficePickerShell\n        searchValue={search}\n        onSearchChange={handleSearchChange}\n        searchPlaceholder={resolvedSearchPlaceholder}\n        searchAriaLabel={resolvedSearchPlaceholder}\n        searchName=\"backoffice-entity-picker-search\"\n        searchEnabled={pickerConfig?.searchEnabled ?? true}\n      >\n        <BackofficeErrorBoundary\n          fallback={(args: { error: unknown; reset: () => void }) => {\n            const { reset } = args;\n            return (\n              <InlineBanner\n                tone=\"danger\"\n                title={t('picker.errors.loadFailed')}\n                actions={\n                  <Button\n                    type=\"button\"\n                    variant=\"secondary\"\n                    onClick={() => {\n                      reset();\n                      setFetchKey((value) => {\n                        return value + 1;\n                      });\n                    }}\n                  >\n                    {t('common.actions.retry')}\n                  </Button>\n                }\n              >\n                {null}\n              </InlineBanner>\n            );\n          }}\n        >\n          <Suspense fallback={<PickerLoading label={t('common.loading')} />}>\n            {pickerNode}\n          </Suspense>\n        </BackofficeErrorBoundary>\n      </BackofficePickerShell>\n    </Modal>\n  );\n};\n\nexport type { BackofficePickerScope } from '@plumile/backoffice-core/types.js';\n\nexport default EntityIdPickerDialog;\n"],"mappings":"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"}
+{"version":3,"file":"EntityIdPickerDialog.js","names":[],"sources":["../../../../../src/components/backoffice/pickers/EntityIdPickerDialog.tsx"],"sourcesContent":["import {\n  Suspense,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type JSX,\n  type RefObject,\n} from 'react';\nimport type { TFunction } from 'i18next';\nimport { useTranslation } from 'react-i18next';\nimport * as ReactRelay from 'react-relay';\n\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport { Modal } from '@plumile/ui/atomic/atoms/modal/Modal.js';\nimport { Spinner } from '@plumile/ui/backoffice/atoms/spinner/Spinner.js';\nimport { BackofficeEmptyState } from '@plumile/ui/backoffice/molecules/backoffice_empty_state/BackofficeEmptyState.js';\nimport {\n  BackofficePickerList,\n  BackofficePickerShell,\n  type BackofficePickerItem,\n} from '@plumile/ui/backoffice/molecules/backoffice_picker/BackofficePicker.js';\nimport { InlineBanner } from '@plumile/ui/components/feedback/InlineBanner.js';\nimport { InfiniteScrollTrigger } from '@plumile/ui/components/infinite/InfiniteScrollTrigger.js';\nimport type {\n  BackofficePickerScope,\n  BackofficeRuntimeEntityPickerConfig,\n  I18nLabel,\n} from '@plumile/backoffice-core/types.js';\n\nimport { BackofficeErrorBoundary } from '../errors/BackofficeErrorBoundary.js';\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport { useBackofficePickerEntityLoader } from '../../../provider/useBackofficeEntityLoader.js';\nimport { useInfiniteConnection } from '../../../hooks/useInfiniteConnection.js';\nimport { useBackofficeRuntimePaginationFragment } from '../../../relay/typedRelayHooks.js';\n\nimport * as styles from './entityIdPickerDialog.css.js';\n\nconst { useLazyLoadQuery } = ReactRelay;\n\nexport type EntityIdPickerDialogProps = {\n  isOpen: boolean;\n  entity: string;\n  title: string;\n  scope?: BackofficePickerScope<Record<string, string>>;\n  onClose: () => void;\n  onSelectId: (id: string) => void;\n};\n\nconst PICKER_FETCH_POLICY = 'store-and-network' as const;\n\nconst resolveLabel = (label: I18nLabel, tApp: TFunction): string => {\n  return label(tApp);\n};\n\ntype PickerBodyProps = {\n  config: BackofficeRuntimeEntityPickerConfig;\n  entity: string;\n  search: string;\n  scope?: BackofficePickerScope<Record<string, string>>;\n  fetchKey: number;\n  resetKey: string;\n  scrollRootRef: RefObject<Element | null>;\n  labels: {\n    loadMore: string;\n    loading: string;\n    end: string;\n    retry: string;\n  };\n  onSelectId: (id: string) => void;\n};\n\ntype RuntimePickerRow = {\n  title: string;\n  subtitle?: string | null | undefined;\n};\n\nconst PickerBody = ({\n  config,\n  entity,\n  search,\n  scope,\n  fetchKey,\n  resetKey,\n  scrollRootRef,\n  labels,\n  onSelectId,\n}: PickerBodyProps): JSX.Element => {\n  const variables = useMemo(() => {\n    const trimmed = search.trim();\n    return config.buildQueryVariables({ search: trimmed, scope });\n  }, [config, scope, search]);\n\n  const queryData = useLazyLoadQuery(config.query, variables, {\n    fetchPolicy: PICKER_FETCH_POLICY,\n    fetchKey,\n  });\n\n  const {\n    data: fragmentData,\n    loadNext,\n    hasNext,\n    isLoadingNext,\n  } = useBackofficeRuntimePaginationFragment(config.fragment, queryData);\n\n  const connection = config.getConnection(fragmentData);\n\n  const items = useMemo<readonly BackofficePickerItem[]>(() => {\n    return connection.edges.map((edge) => {\n      const row = config.toRow(edge.node) as RuntimePickerRow;\n      const id = config.getRowId(row);\n      return {\n        id,\n        title: row.title,\n        subtitle: row.subtitle,\n      };\n    });\n  }, [config, connection.edges]);\n\n  const runLoadMore = useCallback(\n    (onComplete: (error: Error | null) => void) => {\n      loadNext(20, { onComplete });\n    },\n    [loadNext],\n  );\n  const pagination = useInfiniteConnection({\n    nodes: items,\n    hasNext,\n    isLoadingNext,\n    runLoadMore,\n    surface: `backoffice.entity-picker.${entity}`,\n    resetKey,\n  });\n\n  return (\n    <>\n      <BackofficePickerList\n        items={pagination.nodes}\n        onSelectItem={(item) => {\n          onSelectId(item.id);\n        }}\n      />\n      <InfiniteScrollTrigger\n        disabled={pagination.incrementalError != null}\n        hasNext={pagination.hasNext}\n        isLoading={pagination.isLoadingNext}\n        onLoadMore={pagination.loadMoreSafe}\n        scrollRootRef={scrollRootRef}\n        labels={{\n          loadMore: labels.loadMore,\n          loading: labels.loading,\n          end: labels.end,\n        }}\n      />\n      {pagination.incrementalError != null && (\n        <InlineBanner\n          tone=\"danger\"\n          title={pagination.incrementalError.message}\n          actions={\n            <Button\n              type=\"button\"\n              variant=\"secondary\"\n              onClick={pagination.retryLoadMore}\n            >\n              {labels.retry}\n            </Button>\n          }\n        >\n          {null}\n        </InlineBanner>\n      )}\n    </>\n  );\n};\n\nconst buildFooter = (onClose: () => void, closeLabel: string): JSX.Element => {\n  return (\n    <>\n      <Button type=\"button\" variant=\"secondary\" onClick={onClose}>\n        {closeLabel}\n      </Button>\n    </>\n  );\n};\n\nconst PickerUnavailable = ({ message }: { message: string }) => {\n  return (\n    <InlineBanner tone=\"warning\" title={message}>\n      {null}\n    </InlineBanner>\n  );\n};\n\nconst PickerLoading = ({ label }: { label: string }): JSX.Element => {\n  return (\n    <div className={styles.loadingState} role=\"status\" aria-live=\"polite\">\n      <Spinner size={18} ariaLabel={label} />\n      <span className={styles.loadingLabel}>{label}</span>\n    </div>\n  );\n};\n\nexport const EntityIdPickerDialog = ({\n  isOpen,\n  entity,\n  title,\n  scope,\n  onClose,\n  onSelectId,\n}: EntityIdPickerDialogProps): JSX.Element | null => {\n  const { t: tApp } = useTranslation();\n  const { t } = useBackofficeReactTranslation();\n  const [search, setSearch] = useState('');\n  const [executedSearch, setExecutedSearch] = useState('');\n  const [fetchKey, setFetchKey] = useState(0);\n  const scrollRootRef = useRef<HTMLDivElement | null>(null);\n  const entityState = useBackofficePickerEntityLoader(entity, {\n    enabled: isOpen,\n  });\n\n  let pickerConfig: BackofficeRuntimeEntityPickerConfig | undefined;\n  if (entityState.status === 'loaded') {\n    pickerConfig = entityState.module.config.picker as\n      BackofficeRuntimeEntityPickerConfig | undefined;\n  }\n\n  useEffect(() => {\n    if (isOpen) {\n      setSearch('');\n      setExecutedSearch('');\n      setFetchKey((value) => {\n        return value + 1;\n      });\n    }\n  }, [isOpen]);\n\n  useEffect(() => {\n    const timeout = setTimeout(() => {\n      setExecutedSearch(search);\n    }, 250);\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [search]);\n\n  const footer = useMemo(() => {\n    return buildFooter(onClose, t('common.actions.close'));\n  }, [onClose, t]);\n\n  const handleSearchChange = useCallback((next: string) => {\n    setSearch(next);\n  }, []);\n\n  const handleSelectId = useCallback(\n    (id: string) => {\n      onSelectId(id);\n      onClose();\n    },\n    [onClose, onSelectId],\n  );\n\n  if (!isOpen) {\n    return null;\n  }\n\n  let resolvedSearchPlaceholder: string | undefined;\n  if (pickerConfig?.searchPlaceholder != null) {\n    resolvedSearchPlaceholder = resolveLabel(\n      pickerConfig.searchPlaceholder,\n      tApp,\n    );\n  }\n\n  const trimmedSearch = executedSearch.trim();\n  const isSearchRequired = pickerConfig?.searchRequired === true;\n\n  let pickerNode: JSX.Element;\n  if (entityState.status === 'loading') {\n    pickerNode = <PickerLoading label={t('common.loading')} />;\n  } else if (pickerConfig != null) {\n    if (isSearchRequired && trimmedSearch === '') {\n      pickerNode = <BackofficeEmptyState title={t('picker.searchRequired')} />;\n    } else {\n      pickerNode = (\n        <PickerBody\n          config={pickerConfig}\n          entity={entity}\n          search={executedSearch}\n          scope={scope}\n          fetchKey={fetchKey}\n          resetKey={`${entity}:${trimmedSearch}:${JSON.stringify(scope ?? {})}:${fetchKey}`}\n          scrollRootRef={scrollRootRef}\n          labels={{\n            loadMore: t('list.loadMore.action'),\n            loading: t('list.loadMore.loading'),\n            end: t('list.loadMore.end'),\n            retry: t('common.actions.retry'),\n          }}\n          onSelectId={handleSelectId}\n        />\n      );\n    }\n  } else {\n    pickerNode = (\n      <PickerUnavailable message={t('picker.unavailable', { entity })} />\n    );\n  }\n\n  return (\n    <Modal\n      isOpen={isOpen}\n      onClose={onClose}\n      title={title}\n      footer={footer}\n      initialFocus=\"first-form-control\"\n      scrollRootRef={scrollRootRef}\n    >\n      <BackofficePickerShell\n        searchValue={search}\n        onSearchChange={handleSearchChange}\n        searchPlaceholder={resolvedSearchPlaceholder}\n        searchAriaLabel={resolvedSearchPlaceholder}\n        searchName=\"backoffice-entity-picker-search\"\n        searchEnabled={pickerConfig?.searchEnabled ?? true}\n      >\n        <BackofficeErrorBoundary\n          fallback={(args: { error: unknown; reset: () => void }) => {\n            const { reset } = args;\n            return (\n              <InlineBanner\n                tone=\"danger\"\n                title={t('picker.errors.loadFailed')}\n                actions={\n                  <Button\n                    type=\"button\"\n                    variant=\"secondary\"\n                    onClick={() => {\n                      reset();\n                      setFetchKey((value) => {\n                        return value + 1;\n                      });\n                    }}\n                  >\n                    {t('common.actions.retry')}\n                  </Button>\n                }\n              >\n                {null}\n              </InlineBanner>\n            );\n          }}\n        >\n          <Suspense fallback={<PickerLoading label={t('common.loading')} />}>\n            {pickerNode}\n          </Suspense>\n        </BackofficeErrorBoundary>\n      </BackofficePickerShell>\n    </Modal>\n  );\n};\n\nexport type { BackofficePickerScope } from '@plumile/backoffice-core/types.js';\n\nexport default EntityIdPickerDialog;\n"],"mappings":"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"}