npm - @plumile/backoffice-react - Versions diffs - 0.1.201 → 0.1.206 - Mend

@plumile/backoffice-react 0.1.201 → 0.1.206

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (192) hide show

package/README.md CHANGED Viewed

@@ -91,15 +91,20 @@ without loading the list facet.
 ### Relay and mutation helpers
-- `RelayProvider`
-- `configureRelayEnvironment`
-- `getEnvironment`
-- `resetRelayStore`
+- `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`
 - `requireLinkedRecordId`
+Generic Relay environment, provider, transport, and operation-activity helpers
+are owned by `@plumile/relay`. Import them from that package; this package keeps
+only helpers tied to backoffice mutations, connections, and typed data.
 ### Backoffice-specific UI scaffolds
 - `BackofficeOverviewLayout`
@@ -112,6 +117,8 @@ without loading the list facet.
   `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/auth/login/LoginFlow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LoginFlow.js","names":[],"sources":["../../../../src/auth/login/LoginFlow.tsx"],"sourcesContent":["/* eslint-disable no-ternary */\nimport {\n type JSX,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { AuthLayout } from '@plumile/ui/atomic/templates/auth_layout/AuthLayout.js';\n\nimport type {\n AuthMethod,\n OidcProviderKind,\n} from '../../modules/sharedSchemaTypes.js';\nimport type { UseAuthReturn } from '../../hooks/useAuth.js';\n\nimport { MfaChallengeForm } from './MfaChallengeForm.js';\nimport { PasskeyLoginForm } from './PasskeyLoginForm.js';\nimport { MethodChooser } from './MethodChooser.js';\nimport AuthPanel from './AuthPanel.js';\nimport { EmailCapturePanel } from './EmailCapturePanel.js';\nimport { PasswordLoginPanel } from './PasswordLoginPanel.js';\n\nexport type LoginFlowProps = {\n auth: UseAuthReturn;\n oidcProviders: readonly OidcProviderKind[];\n onLoginSuccess: () => void;\n onForgotPassword: () => void;\n};\n\ntype View = 'email' \| 'passkey' \| 'methods' \| 'password' \| 'mfa';\n\nexport const LoginFlow = ({\n auth,\n oidcProviders,\n onLoginSuccess,\n onForgotPassword,\n}: LoginFlowProps): JSX.Element => {\n const { t } = useBackofficeReactTranslation();\n const [email, setEmail] = useState('');\n const [methods, setMethods] = useState<readonly AuthMethod[]>([]);\n const [lockedUntil, setLockedUntil] = useState<string \| null>(null);\n const [view, setView] = useState<View>('email');\n const [hasTriedPasskey, setHasTriedPasskey] = useState(false);\n const [localError, setLocalError] = useState<string \| null>(null);\n const passkeyAttemptActive = useRef(true);\n\n const loginAdapter = useMemo(() => {\n return {\n ...auth,\n beginAuthentication: async (inputEmail: string) => {\n const result = await auth.beginAuthentication(inputEmail);\n setEmail(inputEmail);\n setMethods(result.methods);\n setLockedUntil(result.lockedUntil);\n return result;\n },\n };\n }, [auth]);\n\n const handleLoginSuccess = useCallback(\n ({ force } = { force: false }) => {\n if (!force && auth.nextStep === 'TOTP') {\n return;\n }\n onLoginSuccess();\n },\n [auth.nextStep, onLoginSuccess],\n );\n\n const isMfaStep = auth.nextStep === 'TOTP' \|\| view === 'mfa';\n const title = isMfaStep\n ? t('auth.loginFlow.title.mfa')\n : t('auth.loginFlow.title.default');\n const subtitle = isMfaStep\n ? t('auth.loginFlow.subtitle.mfa')\n : t('auth.loginFlow.subtitle.default');\n\n const startFlowForEmail = useCallback(\n async (inputEmail: string) => {\n setLocalError(null);\n try {\n const trimmed = inputEmail.trim();\n const result = await auth.beginAuthentication(trimmed);\n setEmail(trimmed);\n setMethods(result.methods);\n setLockedUntil(result.lockedUntil);\n const hasPasskey = result.methods.some((method) => {\n return method === 'PASSKEY';\n });\n\n if (hasPasskey) {\n setView('passkey');\n } else if (result.methods.includes('PASSWORD')) {\n setView('password');\n } else {\n setView('methods');\n }\n } catch {\n setLocalError(t('auth.loginFlow.errors.tryAgain'));\n }\n },\n [auth, t],\n );\n\n useEffect(() => {\n passkeyAttemptActive.current = true;\n const trimmedEmail = email.trim();\n const shouldAttempt =\n view === 'passkey' && !hasTriedPasskey && trimmedEmail !== '';\n\n if (shouldAttempt) {\n setHasTriedPasskey(true);\n const runPasskeyLogin = async () => {\n try {\n const status = await loginAdapter.loginWithPasskey({\n email: trimmedEmail,\n });\n\n if (!passkeyAttemptActive.current) {\n return;\n }\n\n if (status === 'success') {\n handleLoginSuccess();\n return;\n }\n\n if (status === 'mfa-required') {\n setView('mfa');\n return;\n }\n\n setView('methods');\n setLocalError(t('auth.loginFlow.errors.passkeyUnavailable'));\n } catch {\n if (!passkeyAttemptActive.current) {\n return;\n }\n\n setLocalError(t('auth.loginFlow.errors.passkeyUnavailable'));\n setView('methods');\n }\n };\n runPasskeyLogin().catch(() => {\n // Errors are handled inside runPasskeyLogin; ignore any unexpected rethrow.\n });\n }\n\n return () => {\n passkeyAttemptActive.current = false;\n };\n }, [email, handleLoginSuccess, hasTriedPasskey, loginAdapter, t, view]);\n\n let content: JSX.Element;\n\n if (isMfaStep) {\n content = (\n <AuthPanel>\n <MfaChallengeForm\n auth={auth}\n onSuccess={() => {\n handleLoginSuccess({ force: true });\n }}\n onBack={() => {\n auth.reset();\n setView('email');\n }}\n />\n </AuthPanel>\n );\n } else if (view === 'passkey') {\n content = (\n <AuthPanel\n title={t('auth.loginFlow.passkey.title')}\n description={t('auth.loginFlow.passkey.description', { email })}\n >\n <PasskeyLoginForm\n auth={loginAdapter}\n onSuccess={handleLoginSuccess}\n onShowMethods={() => {\n setView('methods');\n }}\n defaultEmail={email}\n isAttemptingPasskey={auth.isLoading}\n />\n </AuthPanel>\n );\n } else if (view === 'methods') {\n content = (\n <AuthPanel title={t('auth.loginFlow.methods.title')}>\n <MethodChooser\n email={email}\n methods={methods}\n lockedUntil={lockedUntil}\n onSelect={(method) => {\n if (method === 'PASSKEY') {\n setView('passkey');\n return;\n }\n if (method === 'PASSWORD') {\n setView('password');\n }\n }}\n onBack={() => {\n setView('email');\n }}\n />\n </AuthPanel>\n );\n } else if (view === 'password') {\n content = (\n <PasswordLoginPanel\n auth={loginAdapter}\n defaultEmail={email}\n onForgotPassword={onForgotPassword}\n onSuccess={handleLoginSuccess}\n providers={oidcProviders}\n />\n );\n } else {\n // email capture only\n content = (\n <EmailCapturePanel\n email={email}\n errorMessage={localError}\n isLoading={auth.isLoading}\n onEmailChange={(value) => {\n setEmail(value);\n setLocalError(null);\n }}\n onContinue={() => {\n const trimmed = email.trim();\n if (trimmed === '') {\n setLocalError(t('auth.loginFlow.errors.emailRequired'));\n return;\n }\n startFlowForEmail(trimmed).catch(() => {\n // startFlowForEmail handles its own errors.\n });\n }}\n onForgotPassword={onForgotPassword}\n />\n );\n }\n\n return (\n <AuthLayout title={title} subtitle={subtitle}>\n {content}\n </AuthLayout>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"LoginFlow.js","names":[],"sources":["../../../../src/auth/login/LoginFlow.tsx"],"sourcesContent":["/* eslint-disable no-ternary */\nimport {\n type JSX,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { AuthLayout } from '@plumile/ui/atomic/templates/auth_layout/AuthLayout.js';\n\nimport type {\n AuthMethod,\n OidcProviderKind,\n} from '../../modules/sharedSchemaTypes.js';\nimport type { UseAuthReturn } from '../../hooks/useAuth.js';\n\nimport { MfaChallengeForm } from './MfaChallengeForm.js';\nimport { PasskeyLoginForm } from './PasskeyLoginForm.js';\nimport { MethodChooser } from './MethodChooser.js';\nimport { AuthPanel } from './AuthPanel.js';\nimport { EmailCapturePanel } from './EmailCapturePanel.js';\nimport { PasswordLoginPanel } from './PasswordLoginPanel.js';\n\nexport type LoginFlowProps = {\n auth: UseAuthReturn;\n oidcProviders: readonly OidcProviderKind[];\n onLoginSuccess: () => void;\n onForgotPassword: () => void;\n};\n\ntype View = 'email' \| 'passkey' \| 'methods' \| 'password' \| 'mfa';\n\nexport const LoginFlow = ({\n auth,\n oidcProviders,\n onLoginSuccess,\n onForgotPassword,\n}: LoginFlowProps): JSX.Element => {\n const { t } = useBackofficeReactTranslation();\n const [email, setEmail] = useState('');\n const [methods, setMethods] = useState<readonly AuthMethod[]>([]);\n const [lockedUntil, setLockedUntil] = useState<string \| null>(null);\n const [view, setView] = useState<View>('email');\n const [hasTriedPasskey, setHasTriedPasskey] = useState(false);\n const [localError, setLocalError] = useState<string \| null>(null);\n const passkeyAttemptActive = useRef(true);\n\n const loginAdapter = useMemo(() => {\n return {\n ...auth,\n beginAuthentication: async (inputEmail: string) => {\n const result = await auth.beginAuthentication(inputEmail);\n setEmail(inputEmail);\n setMethods(result.methods);\n setLockedUntil(result.lockedUntil);\n return result;\n },\n };\n }, [auth]);\n\n const handleLoginSuccess = useCallback(\n ({ force } = { force: false }) => {\n if (!force && auth.nextStep === 'TOTP') {\n return;\n }\n onLoginSuccess();\n },\n [auth.nextStep, onLoginSuccess],\n );\n\n const isMfaStep = auth.nextStep === 'TOTP' \|\| view === 'mfa';\n const title = isMfaStep\n ? t('auth.loginFlow.title.mfa')\n : t('auth.loginFlow.title.default');\n const subtitle = isMfaStep\n ? t('auth.loginFlow.subtitle.mfa')\n : t('auth.loginFlow.subtitle.default');\n\n const startFlowForEmail = useCallback(\n async (inputEmail: string) => {\n setLocalError(null);\n try {\n const trimmed = inputEmail.trim();\n const result = await auth.beginAuthentication(trimmed);\n setEmail(trimmed);\n setMethods(result.methods);\n setLockedUntil(result.lockedUntil);\n const hasPasskey = result.methods.some((method) => {\n return method === 'PASSKEY';\n });\n\n if (hasPasskey) {\n setView('passkey');\n } else if (result.methods.includes('PASSWORD')) {\n setView('password');\n } else {\n setView('methods');\n }\n } catch {\n setLocalError(t('auth.loginFlow.errors.tryAgain'));\n }\n },\n [auth, t],\n );\n\n useEffect(() => {\n passkeyAttemptActive.current = true;\n const trimmedEmail = email.trim();\n const shouldAttempt =\n view === 'passkey' && !hasTriedPasskey && trimmedEmail !== '';\n\n if (shouldAttempt) {\n setHasTriedPasskey(true);\n const runPasskeyLogin = async () => {\n try {\n const status = await loginAdapter.loginWithPasskey({\n email: trimmedEmail,\n });\n\n if (!passkeyAttemptActive.current) {\n return;\n }\n\n if (status === 'success') {\n handleLoginSuccess();\n return;\n }\n\n if (status === 'mfa-required') {\n setView('mfa');\n return;\n }\n\n setView('methods');\n setLocalError(t('auth.loginFlow.errors.passkeyUnavailable'));\n } catch {\n if (!passkeyAttemptActive.current) {\n return;\n }\n\n setLocalError(t('auth.loginFlow.errors.passkeyUnavailable'));\n setView('methods');\n }\n };\n runPasskeyLogin().catch(() => {\n // Errors are handled inside runPasskeyLogin; ignore any unexpected rethrow.\n });\n }\n\n return () => {\n passkeyAttemptActive.current = false;\n };\n }, [email, handleLoginSuccess, hasTriedPasskey, loginAdapter, t, view]);\n\n let content: JSX.Element;\n\n if (isMfaStep) {\n content = (\n <AuthPanel>\n <MfaChallengeForm\n auth={auth}\n onSuccess={() => {\n handleLoginSuccess({ force: true });\n }}\n onBack={() => {\n auth.reset();\n setView('email');\n }}\n />\n </AuthPanel>\n );\n } else if (view === 'passkey') {\n content = (\n <AuthPanel\n title={t('auth.loginFlow.passkey.title')}\n description={t('auth.loginFlow.passkey.description', { email })}\n >\n <PasskeyLoginForm\n auth={loginAdapter}\n onSuccess={handleLoginSuccess}\n onShowMethods={() => {\n setView('methods');\n }}\n defaultEmail={email}\n isAttemptingPasskey={auth.isLoading}\n />\n </AuthPanel>\n );\n } else if (view === 'methods') {\n content = (\n <AuthPanel title={t('auth.loginFlow.methods.title')}>\n <MethodChooser\n email={email}\n methods={methods}\n lockedUntil={lockedUntil}\n onSelect={(method) => {\n if (method === 'PASSKEY') {\n setView('passkey');\n return;\n }\n if (method === 'PASSWORD') {\n setView('password');\n }\n }}\n onBack={() => {\n setView('email');\n }}\n />\n </AuthPanel>\n );\n } else if (view === 'password') {\n content = (\n <PasswordLoginPanel\n auth={loginAdapter}\n defaultEmail={email}\n onForgotPassword={onForgotPassword}\n onSuccess={handleLoginSuccess}\n providers={oidcProviders}\n />\n );\n } else {\n // email capture only\n content = (\n <EmailCapturePanel\n email={email}\n errorMessage={localError}\n isLoading={auth.isLoading}\n onEmailChange={(value) => {\n setEmail(value);\n setLocalError(null);\n }}\n onContinue={() => {\n const trimmed = email.trim();\n if (trimmed === '') {\n setLocalError(t('auth.loginFlow.errors.emailRequired'));\n return;\n }\n startFlowForEmail(trimmed).catch(() => {\n // startFlowForEmail handles its own errors.\n });\n }}\n onForgotPassword={onForgotPassword}\n />\n );\n }\n\n return (\n <AuthLayout title={title} subtitle={subtitle}>\n {content}\n </AuthLayout>\n );\n};\n"],"mappings":"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"}

package/lib/esm/auth/pages/AcceptInvitationScreen.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AcceptInvitationScreen.js","names":[],"sources":["../../../../src/auth/pages/AcceptInvitationScreen.tsx"],"sourcesContent":["/* eslint-disable no-ternary /\nimport {\n useCallback,\n useMemo,\n useState,\n type FormEvent,\n type JSX,\n} from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport { FormError } from '@plumile/ui/atomic/molecules/form_error/FormError.js';\nimport { FormField } from '@plumile/ui/atomic/molecules/form_field/FormField.js';\nimport { Form } from '@plumile/ui/atomic/molecules/form/Form.js';\nimport { AuthLayout } from '@plumile/ui/atomic/templates/auth_layout/AuthLayout.js';\n\nimport type { UseAuthReturn } from '../../hooks/useAuth.js';\nimport { MfaChallengeForm } from '../login/MfaChallengeForm.js';\nimport AuthPanel from '../login/AuthPanel.js';\nimport as styles from '../login/loginPage.css.js';\n\ntype AcceptanceState = 'pending' \| 'mfa' \| 'completed' \| 'error' \| 'idle';\n\ntype Props = {\n auth: UseAuthReturn;\n onSuccessRedirect: () => void;\n onBackToLogin: () => void;\n token?: string;\n};\n\nexport const AcceptInvitationScreen = ({\n auth,\n onSuccessRedirect,\n onBackToLogin,\n token,\n}: Props): JSX.Element => {\n const { t } = useBackofficeReactTranslation();\n const { acceptInvitation } = auth;\n const [status, setStatus] = useState<AcceptanceState>('idle');\n const [password, setPassword] = useState('');\n const [passwordConfirmation, setPasswordConfirmation] = useState('');\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [errorMessage, setErrorMessage] = useState<string \| null>(null);\n\n const resolvedToken = useMemo(() => {\n if (token != null) {\n return token;\n }\n if (typeof window === 'undefined') {\n return '';\n }\n const params = new URLSearchParams(window.location.search);\n return params.get('token') ?? '';\n }, [token]);\n\n const handleSubmit = useCallback(\n (event: FormEvent<HTMLFormElement>) => {\n event.preventDefault();\n if (resolvedToken === '') {\n setErrorMessage(t('auth.acceptInvitation.errors.missingToken'));\n setStatus('error');\n return;\n }\n\n if (password !== passwordConfirmation) {\n setErrorMessage(t('auth.acceptInvitation.errors.passwordMismatch'));\n setStatus('error');\n return;\n }\n\n setStatus('pending');\n setErrorMessage(null);\n setIsSubmitting(true);\n\n // eslint-disable-next-line no-void\n void acceptInvitation({\n token: resolvedToken,\n password,\n passwordConfirmation,\n })\n .then((result) => {\n if (result === 'mfa-required') {\n setStatus('mfa');\n return;\n }\n setStatus('completed');\n onSuccessRedirect();\n })\n .catch(() => {\n setStatus('error');\n setErrorMessage(t('auth.acceptInvitation.errors.default'));\n })\n .finally(() => {\n setIsSubmitting(false);\n });\n },\n [\n acceptInvitation,\n onSuccessRedirect,\n password,\n passwordConfirmation,\n resolvedToken,\n t,\n ],\n );\n\n const handleMfaSuccess = useCallback(() => {\n setStatus('completed');\n onSuccessRedirect();\n }, [onSuccessRedirect]);\n\n const handleRetry = useCallback(() => {\n setStatus('idle');\n setErrorMessage(null);\n setIsSubmitting(false);\n }, []);\n\n if (status === 'mfa') {\n return (\n <AuthLayout\n title={t('auth.acceptInvitation.mfaTitle')}\n subtitle={t('auth.acceptInvitation.mfaSubtitle')}\n >\n <MfaChallengeForm\n auth={auth}\n onSuccess={handleMfaSuccess}\n onBack={() => {\n auth.reset();\n handleRetry();\n }}\n />\n </AuthLayout>\n );\n }\n\n let content: JSX.Element;\n if (status === 'completed') {\n content = (\n <div className={styles.stack}>\n <p className={styles.helper}>\n {t('auth.acceptInvitation.status.success')}\n </p>\n </div>\n );\n } else {\n content = (\n <AuthPanel description={t('auth.acceptInvitation.subtitle')}>\n <Form\n className={styles.formSurface}\n onSubmit={handleSubmit}\n noValidate\n initialFocus=\"first-form-control\"\n >\n {errorMessage != null ? <FormError>{errorMessage}</FormError> : null}\n <FormField\n label={t('auth.acceptInvitation.form.passwordLabel')}\n name=\"password\"\n type=\"password\"\n value={password}\n onChange={(event) => {\n setPassword(event.target.value);\n setErrorMessage(null);\n if (status === 'error') {\n setStatus('idle');\n }\n }}\n placeholder={t('auth.acceptInvitation.form.passwordPlaceholder')}\n autoComplete=\"new-password\"\n required\n />\n <FormField\n label={t('auth.acceptInvitation.form.confirmLabel')}\n name=\"password-confirmation\"\n type=\"password\"\n value={passwordConfirmation}\n onChange={(event) => {\n setPasswordConfirmation(event.target.value);\n setErrorMessage(null);\n if (status === 'error') {\n setStatus('idle');\n }\n }}\n placeholder={t('auth.acceptInvitation.form.confirmPlaceholder')}\n autoComplete=\"new-password\"\n required\n />\n <Button type=\"submit\" isLoading={isSubmitting}>\n {status === 'pending'\n ? t('auth.acceptInvitation.status.workingButton')\n : t('auth.acceptInvitation.form.submit')}\n </Button>\n <Button type=\"button\" variant=\"secondary\" onClick={onBackToLogin}>\n {t('auth.acceptInvitation.actions.backToLogin')}\n </Button>\n </Form>\n </AuthPanel>\n );\n }\n\n return (\n <AuthLayout title={t('auth.acceptInvitation.title')}>{content}</AuthLayout>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"AcceptInvitationScreen.js","names":[],"sources":["../../../../src/auth/pages/AcceptInvitationScreen.tsx"],"sourcesContent":["/* eslint-disable no-ternary /\nimport {\n useCallback,\n useMemo,\n useState,\n type FormEvent,\n type JSX,\n} from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport { FormError } from '@plumile/ui/atomic/molecules/form_error/FormError.js';\nimport { FormField } from '@plumile/ui/atomic/molecules/form_field/FormField.js';\nimport { Form } from '@plumile/ui/atomic/molecules/form/Form.js';\nimport { AuthLayout } from '@plumile/ui/atomic/templates/auth_layout/AuthLayout.js';\n\nimport type { UseAuthReturn } from '../../hooks/useAuth.js';\nimport { MfaChallengeForm } from '../login/MfaChallengeForm.js';\nimport { AuthPanel } from '../login/AuthPanel.js';\nimport as styles from '../login/loginPage.css.js';\n\ntype AcceptanceState = 'pending' \| 'mfa' \| 'completed' \| 'error' \| 'idle';\n\ntype Props = {\n auth: UseAuthReturn;\n onSuccessRedirect: () => void;\n onBackToLogin: () => void;\n token?: string;\n};\n\nexport const AcceptInvitationScreen = ({\n auth,\n onSuccessRedirect,\n onBackToLogin,\n token,\n}: Props): JSX.Element => {\n const { t } = useBackofficeReactTranslation();\n const { acceptInvitation } = auth;\n const [status, setStatus] = useState<AcceptanceState>('idle');\n const [password, setPassword] = useState('');\n const [passwordConfirmation, setPasswordConfirmation] = useState('');\n const [isSubmitting, setIsSubmitting] = useState(false);\n const [errorMessage, setErrorMessage] = useState<string \| null>(null);\n\n const resolvedToken = useMemo(() => {\n if (token != null) {\n return token;\n }\n if (typeof window === 'undefined') {\n return '';\n }\n const params = new URLSearchParams(window.location.search);\n return params.get('token') ?? '';\n }, [token]);\n\n const handleSubmit = useCallback(\n (event: FormEvent<HTMLFormElement>) => {\n event.preventDefault();\n if (resolvedToken === '') {\n setErrorMessage(t('auth.acceptInvitation.errors.missingToken'));\n setStatus('error');\n return;\n }\n\n if (password !== passwordConfirmation) {\n setErrorMessage(t('auth.acceptInvitation.errors.passwordMismatch'));\n setStatus('error');\n return;\n }\n\n setStatus('pending');\n setErrorMessage(null);\n setIsSubmitting(true);\n\n // eslint-disable-next-line no-void\n void acceptInvitation({\n token: resolvedToken,\n password,\n passwordConfirmation,\n })\n .then((result) => {\n if (result === 'mfa-required') {\n setStatus('mfa');\n return;\n }\n setStatus('completed');\n onSuccessRedirect();\n })\n .catch(() => {\n setStatus('error');\n setErrorMessage(t('auth.acceptInvitation.errors.default'));\n })\n .finally(() => {\n setIsSubmitting(false);\n });\n },\n [\n acceptInvitation,\n onSuccessRedirect,\n password,\n passwordConfirmation,\n resolvedToken,\n t,\n ],\n );\n\n const handleMfaSuccess = useCallback(() => {\n setStatus('completed');\n onSuccessRedirect();\n }, [onSuccessRedirect]);\n\n const handleRetry = useCallback(() => {\n setStatus('idle');\n setErrorMessage(null);\n setIsSubmitting(false);\n }, []);\n\n if (status === 'mfa') {\n return (\n <AuthLayout\n title={t('auth.acceptInvitation.mfaTitle')}\n subtitle={t('auth.acceptInvitation.mfaSubtitle')}\n >\n <MfaChallengeForm\n auth={auth}\n onSuccess={handleMfaSuccess}\n onBack={() => {\n auth.reset();\n handleRetry();\n }}\n />\n </AuthLayout>\n );\n }\n\n let content: JSX.Element;\n if (status === 'completed') {\n content = (\n <div className={styles.stack}>\n <p className={styles.helper}>\n {t('auth.acceptInvitation.status.success')}\n </p>\n </div>\n );\n } else {\n content = (\n <AuthPanel description={t('auth.acceptInvitation.subtitle')}>\n <Form\n className={styles.formSurface}\n onSubmit={handleSubmit}\n noValidate\n initialFocus=\"first-form-control\"\n >\n {errorMessage != null ? <FormError>{errorMessage}</FormError> : null}\n <FormField\n label={t('auth.acceptInvitation.form.passwordLabel')}\n name=\"password\"\n type=\"password\"\n value={password}\n onChange={(event) => {\n setPassword(event.target.value);\n setErrorMessage(null);\n if (status === 'error') {\n setStatus('idle');\n }\n }}\n placeholder={t('auth.acceptInvitation.form.passwordPlaceholder')}\n autoComplete=\"new-password\"\n required\n />\n <FormField\n label={t('auth.acceptInvitation.form.confirmLabel')}\n name=\"password-confirmation\"\n type=\"password\"\n value={passwordConfirmation}\n onChange={(event) => {\n setPasswordConfirmation(event.target.value);\n setErrorMessage(null);\n if (status === 'error') {\n setStatus('idle');\n }\n }}\n placeholder={t('auth.acceptInvitation.form.confirmPlaceholder')}\n autoComplete=\"new-password\"\n required\n />\n <Button type=\"submit\" isLoading={isSubmitting}>\n {status === 'pending'\n ? t('auth.acceptInvitation.status.workingButton')\n : t('auth.acceptInvitation.form.submit')}\n </Button>\n <Button type=\"button\" variant=\"secondary\" onClick={onBackToLogin}>\n {t('auth.acceptInvitation.actions.backToLogin')}\n </Button>\n </Form>\n </AuthPanel>\n );\n }\n\n return (\n <AuthLayout title={t('auth.acceptInvitation.title')}>{content}</AuthLayout>\n );\n};\n"],"mappings":"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"}

package/lib/esm/auth/pages/PasswordResetCompleteScreen.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PasswordResetCompleteScreen.js","names":[],"sources":["../../../../src/auth/pages/PasswordResetCompleteScreen.tsx"],"sourcesContent":["/* eslint-disable no-ternary /\nimport {\n useCallback,\n useMemo,\n useState,\n type FormEvent,\n type JSX,\n} from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport { FormError } from '@plumile/ui/atomic/molecules/form_error/FormError.js';\nimport { FormField } from '@plumile/ui/atomic/molecules/form_field/FormField.js';\nimport { Form } from '@plumile/ui/atomic/molecules/form/Form.js';\nimport { AuthLayout } from '@plumile/ui/atomic/templates/auth_layout/AuthLayout.js';\n\nimport as styles from '../login/loginPage.css.js';\nimport AuthPanel from '../login/AuthPanel.js';\n\nconst MIN_PASSWORD_LENGTH = 8;\n\ntype Props = {\n onBackToLogin: () => void;\n onCompletePasswordReset: (input: {\n newPassword: string;\n token: string;\n }) => Promise<boolean>;\n token?: string;\n};\n\nexport const PasswordResetCompleteScreen = ({\n onBackToLogin,\n onCompletePasswordReset,\n token,\n}: Props): JSX.Element => {\n const { t } = useBackofficeReactTranslation();\n const [password, setPassword] = useState('');\n const [passwordConfirm, setPasswordConfirm] = useState('');\n const [status, setStatus] = useState<'idle' \| 'completed'>('idle');\n const [error, setError] = useState<string \| null>(null);\n const [isSubmitting, setIsSubmitting] = useState(false);\n\n const resolvedToken = useMemo(() => {\n if (token != null) {\n return token;\n }\n if (typeof window === 'undefined') {\n return '';\n }\n const params = new URLSearchParams(window.location.search);\n return params.get('token') ?? '';\n }, [token]);\n\n const handleSubmit = useCallback(\n (event: FormEvent<HTMLFormElement>) => {\n event.preventDefault();\n setError(null);\n\n if (resolvedToken === '') {\n setError(t('auth.passwordResetComplete.errors.missingToken'));\n return;\n }\n\n if (password.length < MIN_PASSWORD_LENGTH) {\n setError(\n t('auth.passwordResetComplete.errors.minLength', {\n minLength: MIN_PASSWORD_LENGTH,\n }),\n );\n return;\n }\n\n if (password !== passwordConfirm) {\n setError(t('auth.passwordResetComplete.errors.mismatch'));\n return;\n }\n\n setIsSubmitting(true);\n\n const completePasswordReset = async (): Promise<void> => {\n try {\n const success = await onCompletePasswordReset({\n newPassword: password,\n token: resolvedToken,\n });\n if (success) {\n setStatus('completed');\n } else {\n setError(t('auth.passwordResetComplete.errors.invalid'));\n }\n } catch (mutationError) {\n setError(\n mutationError instanceof Error\n ? mutationError.message\n : t('auth.passwordResetComplete.errors.invalid'),\n );\n } finally {\n setIsSubmitting(false);\n }\n };\n\n completePasswordReset().catch(() => {\n return undefined;\n });\n },\n [onCompletePasswordReset, password, passwordConfirm, resolvedToken, t],\n );\n\n let content: JSX.Element;\n if (status === 'completed') {\n content = (\n <AuthPanel\n title={t('auth.passwordResetComplete.success.title')}\n description={t('auth.passwordResetComplete.success.description')}\n footer={\n <Button\n type=\"button\"\n variant=\"secondary\"\n className={styles.brandGhostButton}\n onClick={onBackToLogin}\n >\n {t('auth.passwordResetComplete.success.action')}\n </Button>\n }\n >\n <p className={styles.helper}>\n {t('auth.passwordResetComplete.success.helper')}\n </p>\n </AuthPanel>\n );\n } else {\n content = (\n <AuthPanel\n title={t('auth.passwordResetComplete.form.title')}\n description={t('auth.passwordResetComplete.form.description')}\n >\n <Form\n className={styles.formSurface}\n onSubmit={handleSubmit}\n noValidate\n initialFocus=\"first-form-control\"\n >\n {error != null ? <FormError>{error}</FormError> : null}\n <FormField\n label={t('auth.passwordResetComplete.form.passwordLabel')}\n name=\"new-password\"\n type=\"password\"\n value={password}\n onChange={(event) => {\n setPassword(event.target.value);\n setError(null);\n }}\n placeholder={t(\n 'auth.passwordResetComplete.form.passwordPlaceholder',\n )}\n autoComplete=\"new-password\"\n required\n />\n <FormField\n label={t('auth.passwordResetComplete.form.confirmLabel')}\n name=\"confirm-password\"\n type=\"password\"\n value={passwordConfirm}\n onChange={(event) => {\n setPasswordConfirm(event.target.value);\n setError(null);\n }}\n placeholder={t(\n 'auth.passwordResetComplete.form.confirmPlaceholder',\n )}\n autoComplete=\"new-password\"\n required\n />\n <Button type=\"submit\" isLoading={isSubmitting}>\n {t('auth.passwordResetComplete.form.submit')}\n </Button>\n </Form>\n </AuthPanel>\n );\n }\n\n return (\n <AuthLayout\n title={t('auth.passwordResetComplete.title')}\n subtitle={t('auth.passwordResetComplete.subtitle')}\n >\n {content}\n </AuthLayout>\n );\n};\n"],"mappings":";;;;;;;;;;;AAmBA,IAAM,IAAsB,GAWf,KAA+B,EAC1C,kBACA,4BACA,eACwB;CACxB,IAAM,EAAE,SAAM,EAA8B,GACtC,CAAC,GAAU,KAAe,EAAS,EAAE,GACrC,CAAC,GAAiB,KAAsB,EAAS,EAAE,GACnD,CAAC,GAAQ,KAAa,EAA+B,MAAM,GAC3D,CAAC,GAAO,KAAY,EAAwB,IAAI,GAChD,CAAC,GAAc,KAAmB,EAAS,EAAK,GAEhD,IAAgB,QAChB,MAGA,OAAO,SAAW,MACb,KAGF,IADY,gBAAgB,OAAO,SAAS,MAC5C,CAAA,CAAO,IAAI,OAAO,KAAK,KAC7B,CAAC,CAAK,CAAC,GAEJ,IAAe,GAClB,MAAsC;EAIrC,IAHA,EAAM,eAAe,GACrB,EAAS,IAAI,GAET,MAAkB,IAAI;GACxB,EAAS,EAAE,gDAAgD,CAAC;GAC5D;EACF;EAEA,IAAI,EAAS,SAAS,GAAqB;GACzC,EACE,EAAE,+CAA+C,EAC/C,WAAW,EACb,CAAC,CACH;GACA;EACF;EAEA,IAAI,MAAa,GAAiB;GAChC,EAAS,EAAE,4CAA4C,CAAC;GACxD;EACF;EA0BA,AAxBA,EAAgB,EAAI,IAwBpB,YAtByD;GACvD,IAAI;IAKF,AAAI,MAJkB,EAAwB;KAC5C,aAAa;KACb,OAAO;IACT,CAAC,IAEC,EAAU,WAAW,IAErB,EAAS,EAAE,2CAA2C,CAAC;GAE3D,SAAS,GAAe;IACtB,EACE,aAAyB,QACrB,EAAc,UACd,EAAE,2CAA2C,CACnD;GACF,UAAU;IACR,EAAgB,EAAK;GACvB;EACF,EAEA,CAAsB,CAAC,CAAC,YAAY,CAEpC,CAAC;CACH,GACA;EAAC;EAAyB;EAAU;EAAiB;EAAe;CAAC,CACvE,GAEI;CAyEJ,OAxEA,AAsBE,IAtBE,MAAW,cAEX,kBAAC,GAAD;EACE,OAAO,EAAE,0CAA0C;EACnD,aAAa,EAAE,gDAAgD;EAC/D,QACE,kBAAC,GAAD;GACE,MAAK;GACL,SAAQ;GACR,WAAW;GACX,SAAS;GAER,UAAA,EAAE,2CAA2C;EACxC,CAAA;EAGV,UAAA,kBAAC,KAAD;GAAG,WAAW;GACX,UAAA,EAAE,2CAA2C;EAC7C,CAAA;CACM,CAAA,IAIX,kBAAC,GAAD;EACE,OAAO,EAAE,uCAAuC;EAChD,aAAa,EAAE,6CAA6C;EAE5D,UAAA,kBAAC,GAAD;GACE,WAAW;GACX,UAAU;GACV,YAAA;GACA,cAAa;GAJf,UAAA;IAMG,KAAS,OAAwC,OAAjC,kBAAC,GAAD,EAAA,UAAY,EAAiB,CAAA;IAC9C,kBAAC,GAAD;KACE,OAAO,EAAE,+CAA+C;KACxD,MAAK;KACL,MAAK;KACL,OAAO;KACP,WAAW,MAAU;MAEnB,AADA,EAAY,EAAM,OAAO,KAAK,GAC9B,EAAS,IAAI;KACf;KACA,aAAa,EACX,qDACF;KACA,cAAa;KACb,UAAA;IACD,CAAA;IACD,kBAAC,GAAD;KACE,OAAO,EAAE,8CAA8C;KACvD,MAAK;KACL,MAAK;KACL,OAAO;KACP,WAAW,MAAU;MAEnB,AADA,EAAmB,EAAM,OAAO,KAAK,GACrC,EAAS,IAAI;KACf;KACA,aAAa,EACX,oDACF;KACA,cAAa;KACb,UAAA;IACD,CAAA;IACD,kBAAC,GAAD;KAAQ,MAAK;KAAS,WAAW;KAC9B,UAAA,EAAE,wCAAwC;IACrC,CAAA;GACJ;;CACG,CAAA,GAKb,kBAAC,GAAD;EACE,OAAO,EAAE,kCAAkC;EAC3C,UAAU,EAAE,qCAAqC;EAEhD,UAAA;CACS,CAAA;AAEhB"}
1	+ {"version":3,"file":"PasswordResetCompleteScreen.js","names":[],"sources":["../../../../src/auth/pages/PasswordResetCompleteScreen.tsx"],"sourcesContent":["/* eslint-disable no-ternary /\nimport {\n useCallback,\n useMemo,\n useState,\n type FormEvent,\n type JSX,\n} from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport { FormError } from '@plumile/ui/atomic/molecules/form_error/FormError.js';\nimport { FormField } from '@plumile/ui/atomic/molecules/form_field/FormField.js';\nimport { Form } from '@plumile/ui/atomic/molecules/form/Form.js';\nimport { AuthLayout } from '@plumile/ui/atomic/templates/auth_layout/AuthLayout.js';\n\nimport as styles from '../login/loginPage.css.js';\nimport { AuthPanel } from '../login/AuthPanel.js';\n\nconst MIN_PASSWORD_LENGTH = 8;\n\ntype Props = {\n onBackToLogin: () => void;\n onCompletePasswordReset: (input: {\n newPassword: string;\n token: string;\n }) => Promise<boolean>;\n token?: string;\n};\n\nexport const PasswordResetCompleteScreen = ({\n onBackToLogin,\n onCompletePasswordReset,\n token,\n}: Props): JSX.Element => {\n const { t } = useBackofficeReactTranslation();\n const [password, setPassword] = useState('');\n const [passwordConfirm, setPasswordConfirm] = useState('');\n const [status, setStatus] = useState<'idle' \| 'completed'>('idle');\n const [error, setError] = useState<string \| null>(null);\n const [isSubmitting, setIsSubmitting] = useState(false);\n\n const resolvedToken = useMemo(() => {\n if (token != null) {\n return token;\n }\n if (typeof window === 'undefined') {\n return '';\n }\n const params = new URLSearchParams(window.location.search);\n return params.get('token') ?? '';\n }, [token]);\n\n const handleSubmit = useCallback(\n (event: FormEvent<HTMLFormElement>) => {\n event.preventDefault();\n setError(null);\n\n if (resolvedToken === '') {\n setError(t('auth.passwordResetComplete.errors.missingToken'));\n return;\n }\n\n if (password.length < MIN_PASSWORD_LENGTH) {\n setError(\n t('auth.passwordResetComplete.errors.minLength', {\n minLength: MIN_PASSWORD_LENGTH,\n }),\n );\n return;\n }\n\n if (password !== passwordConfirm) {\n setError(t('auth.passwordResetComplete.errors.mismatch'));\n return;\n }\n\n setIsSubmitting(true);\n\n const completePasswordReset = async (): Promise<void> => {\n try {\n const success = await onCompletePasswordReset({\n newPassword: password,\n token: resolvedToken,\n });\n if (success) {\n setStatus('completed');\n } else {\n setError(t('auth.passwordResetComplete.errors.invalid'));\n }\n } catch (mutationError) {\n setError(\n mutationError instanceof Error\n ? mutationError.message\n : t('auth.passwordResetComplete.errors.invalid'),\n );\n } finally {\n setIsSubmitting(false);\n }\n };\n\n completePasswordReset().catch(() => {\n return undefined;\n });\n },\n [onCompletePasswordReset, password, passwordConfirm, resolvedToken, t],\n );\n\n let content: JSX.Element;\n if (status === 'completed') {\n content = (\n <AuthPanel\n title={t('auth.passwordResetComplete.success.title')}\n description={t('auth.passwordResetComplete.success.description')}\n footer={\n <Button\n type=\"button\"\n variant=\"secondary\"\n className={styles.brandGhostButton}\n onClick={onBackToLogin}\n >\n {t('auth.passwordResetComplete.success.action')}\n </Button>\n }\n >\n <p className={styles.helper}>\n {t('auth.passwordResetComplete.success.helper')}\n </p>\n </AuthPanel>\n );\n } else {\n content = (\n <AuthPanel\n title={t('auth.passwordResetComplete.form.title')}\n description={t('auth.passwordResetComplete.form.description')}\n >\n <Form\n className={styles.formSurface}\n onSubmit={handleSubmit}\n noValidate\n initialFocus=\"first-form-control\"\n >\n {error != null ? <FormError>{error}</FormError> : null}\n <FormField\n label={t('auth.passwordResetComplete.form.passwordLabel')}\n name=\"new-password\"\n type=\"password\"\n value={password}\n onChange={(event) => {\n setPassword(event.target.value);\n setError(null);\n }}\n placeholder={t(\n 'auth.passwordResetComplete.form.passwordPlaceholder',\n )}\n autoComplete=\"new-password\"\n required\n />\n <FormField\n label={t('auth.passwordResetComplete.form.confirmLabel')}\n name=\"confirm-password\"\n type=\"password\"\n value={passwordConfirm}\n onChange={(event) => {\n setPasswordConfirm(event.target.value);\n setError(null);\n }}\n placeholder={t(\n 'auth.passwordResetComplete.form.confirmPlaceholder',\n )}\n autoComplete=\"new-password\"\n required\n />\n <Button type=\"submit\" isLoading={isSubmitting}>\n {t('auth.passwordResetComplete.form.submit')}\n </Button>\n </Form>\n </AuthPanel>\n );\n }\n\n return (\n <AuthLayout\n title={t('auth.passwordResetComplete.title')}\n subtitle={t('auth.passwordResetComplete.subtitle')}\n >\n {content}\n </AuthLayout>\n );\n};\n"],"mappings":";;;;;;;;;;;AAmBA,IAAM,IAAsB,GAWf,KAA+B,EAC1C,kBACA,4BACA,eACwB;CACxB,IAAM,EAAE,SAAM,EAA8B,GACtC,CAAC,GAAU,KAAe,EAAS,EAAE,GACrC,CAAC,GAAiB,KAAsB,EAAS,EAAE,GACnD,CAAC,GAAQ,KAAa,EAA+B,MAAM,GAC3D,CAAC,GAAO,KAAY,EAAwB,IAAI,GAChD,CAAC,GAAc,KAAmB,EAAS,EAAK,GAEhD,IAAgB,QAChB,MAGA,OAAO,SAAW,MACb,KAGF,IADY,gBAAgB,OAAO,SAAS,MAC5C,CAAA,CAAO,IAAI,OAAO,KAAK,KAC7B,CAAC,CAAK,CAAC,GAEJ,IAAe,GAClB,MAAsC;EAIrC,IAHA,EAAM,eAAe,GACrB,EAAS,IAAI,GAET,MAAkB,IAAI;GACxB,EAAS,EAAE,gDAAgD,CAAC;GAC5D;EACF;EAEA,IAAI,EAAS,SAAS,GAAqB;GACzC,EACE,EAAE,+CAA+C,EAC/C,WAAW,EACb,CAAC,CACH;GACA;EACF;EAEA,IAAI,MAAa,GAAiB;GAChC,EAAS,EAAE,4CAA4C,CAAC;GACxD;EACF;EA0BA,AAxBA,EAAgB,EAAI,IAwBpB,YAtByD;GACvD,IAAI;IAKF,AAAI,MAJkB,EAAwB;KAC5C,aAAa;KACb,OAAO;IACT,CAAC,IAEC,EAAU,WAAW,IAErB,EAAS,EAAE,2CAA2C,CAAC;GAE3D,SAAS,GAAe;IACtB,EACE,aAAyB,QACrB,EAAc,UACd,EAAE,2CAA2C,CACnD;GACF,UAAU;IACR,EAAgB,EAAK;GACvB;EACF,EAEA,CAAsB,CAAC,CAAC,YAAY,CAEpC,CAAC;CACH,GACA;EAAC;EAAyB;EAAU;EAAiB;EAAe;CAAC,CACvE,GAEI;CAyEJ,OAxEA,AAsBE,IAtBE,MAAW,cAEX,kBAAC,GAAD;EACE,OAAO,EAAE,0CAA0C;EACnD,aAAa,EAAE,gDAAgD;EAC/D,QACE,kBAAC,GAAD;GACE,MAAK;GACL,SAAQ;GACR,WAAW;GACX,SAAS;GAER,UAAA,EAAE,2CAA2C;EACxC,CAAA;EAGV,UAAA,kBAAC,KAAD;GAAG,WAAW;GACX,UAAA,EAAE,2CAA2C;EAC7C,CAAA;CACM,CAAA,IAIX,kBAAC,GAAD;EACE,OAAO,EAAE,uCAAuC;EAChD,aAAa,EAAE,6CAA6C;EAE5D,UAAA,kBAAC,GAAD;GACE,WAAW;GACX,UAAU;GACV,YAAA;GACA,cAAa;GAJf,UAAA;IAMG,KAAS,OAAwC,OAAjC,kBAAC,GAAD,EAAA,UAAY,EAAiB,CAAA;IAC9C,kBAAC,GAAD;KACE,OAAO,EAAE,+CAA+C;KACxD,MAAK;KACL,MAAK;KACL,OAAO;KACP,WAAW,MAAU;MAEnB,AADA,EAAY,EAAM,OAAO,KAAK,GAC9B,EAAS,IAAI;KACf;KACA,aAAa,EACX,qDACF;KACA,cAAa;KACb,UAAA;IACD,CAAA;IACD,kBAAC,GAAD;KACE,OAAO,EAAE,8CAA8C;KACvD,MAAK;KACL,MAAK;KACL,OAAO;KACP,WAAW,MAAU;MAEnB,AADA,EAAmB,EAAM,OAAO,KAAK,GACrC,EAAS,IAAI;KACf;KACA,aAAa,EACX,oDACF;KACA,cAAa;KACb,UAAA;IACD,CAAA;IACD,kBAAC,GAAD;KAAQ,MAAK;KAAS,WAAW;KAC9B,UAAA,EAAE,wCAAwC;IACrC,CAAA;GACJ;;CACG,CAAA,GAKb,kBAAC,GAAD;EACE,OAAO,EAAE,kCAAkC;EAC3C,UAAU,EAAE,qCAAqC;EAEhD,UAAA;CACS,CAAA;AAEhB"}

package/lib/esm/auth/pages/PasswordResetRequestScreen.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PasswordResetRequestScreen.js","names":[],"sources":["../../../../src/auth/pages/PasswordResetRequestScreen.tsx"],"sourcesContent":["/* eslint-disable no-ternary /\nimport {\n useCallback,\n useMemo,\n useState,\n type FormEvent,\n type JSX,\n} from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport { FormError } from '@plumile/ui/atomic/molecules/form_error/FormError.js';\nimport { FormField } from '@plumile/ui/atomic/molecules/form_field/FormField.js';\nimport { Form } from '@plumile/ui/atomic/molecules/form/Form.js';\nimport { AuthLayout } from '@plumile/ui/atomic/templates/auth_layout/AuthLayout.js';\n\nimport as styles from '../login/loginPage.css.js';\nimport AuthPanel from '../login/AuthPanel.js';\n\ntype Props = {\n onStartPasswordReset: (input: {\n email: string;\n locale?: string;\n }) => Promise<boolean>;\n};\n\nexport const PasswordResetRequestScreen = ({\n onStartPasswordReset,\n}: Props): JSX.Element => {\n const { i18n, t } = useBackofficeReactTranslation();\n const [email, setEmail] = useState('');\n const [status, setStatus] = useState<'idle' \| 'sent'>('idle');\n const [error, setError] = useState<string \| null>(null);\n const [isSubmitting, setIsSubmitting] = useState(false);\n\n const locale = useMemo(() => {\n const language = i18n.language.trim();\n if (language !== '') {\n return language;\n }\n if (typeof navigator === 'undefined') {\n return undefined;\n }\n return navigator.language;\n }, [i18n.language]);\n\n const handleSubmit = useCallback(\n (event: FormEvent<HTMLFormElement>) => {\n event.preventDefault();\n setError(null);\n\n if (email.trim() === '') {\n setError(t('auth.passwordResetRequest.errors.emailRequired'));\n return;\n }\n\n setIsSubmitting(true);\n onStartPasswordReset({\n email: email.trim(),\n locale,\n })\n .then((success) => {\n if (success) {\n setStatus('sent');\n } else {\n setError(t('auth.passwordResetRequest.errors.startFailed'));\n }\n })\n .catch((mutationError) => {\n setError(\n mutationError instanceof Error\n ? mutationError.message\n : t('auth.passwordResetRequest.errors.startFailed'),\n );\n })\n .finally(() => {\n setIsSubmitting(false);\n });\n },\n [email, locale, onStartPasswordReset, t],\n );\n\n let content: JSX.Element;\n if (status === 'sent') {\n content = (\n <AuthPanel\n title={t('auth.passwordResetRequest.sent.title')}\n description={t('auth.passwordResetRequest.sent.description', { email })}\n footer={\n <Button\n type=\"button\"\n variant=\"secondary\"\n onClick={() => {\n setStatus('idle');\n }}\n >\n {t('auth.passwordResetRequest.sent.action')}\n </Button>\n }\n >\n <p className={styles.helper}>\n {t('auth.passwordResetRequest.sent.helper')}\n </p>\n </AuthPanel>\n );\n } else {\n content = (\n <AuthPanel description={t('auth.passwordResetRequest.form.description')}>\n <Form\n className={styles.formSurface}\n onSubmit={handleSubmit}\n noValidate\n initialFocus=\"first-form-control\"\n >\n {error != null ? <FormError>{error}</FormError> : null}\n <FormField\n label={t('auth.passwordResetRequest.form.emailLabel')}\n name=\"email\"\n type=\"email\"\n value={email}\n onChange={(event) => {\n setEmail(event.target.value);\n setError(null);\n }}\n placeholder={t('auth.passwordResetRequest.form.emailPlaceholder')}\n autoComplete=\"email\"\n required\n />\n <Button type=\"submit\" isLoading={isSubmitting}>\n {t('auth.passwordResetRequest.form.submit')}\n </Button>\n </Form>\n </AuthPanel>\n );\n }\n\n return (\n <AuthLayout title={t('auth.passwordResetRequest.title')}>\n {content}\n </AuthLayout>\n );\n};\n"],"mappings":";;;;;;;;;;;AA0BA,IAAa,KAA8B,EACzC,8BACwB;CACxB,IAAM,EAAE,SAAM,SAAM,EAA8B,GAC5C,CAAC,GAAO,KAAY,EAAS,EAAE,GAC/B,CAAC,GAAQ,KAAa,EAA0B,MAAM,GACtD,CAAC,GAAO,KAAY,EAAwB,IAAI,GAChD,CAAC,GAAc,KAAmB,EAAS,EAAK,GAEhD,IAAS,QAAc;EAC3B,IAAM,IAAW,EAAK,SAAS,KAAK;EACpC,IAAI,MAAa,IACf,OAAO;EAEL,aAAO,YAAc,MAGzB,OAAO,UAAU;CACnB,GAAG,CAAC,EAAK,QAAQ,CAAC,GAEZ,IAAe,GAClB,MAAsC;EAIrC,IAHA,EAAM,eAAe,GACrB,EAAS,IAAI,GAET,EAAM,KAAK,MAAM,IAAI;GACvB,EAAS,EAAE,gDAAgD,CAAC;GAC5D;EACF;EAGA,AADA,EAAgB,EAAI,GACpB,EAAqB;GACnB,OAAO,EAAM,KAAK;GAClB;EACF,CAAC,CAAC,CACC,MAAM,MAAY;GACjB,AAAI,IACF,EAAU,MAAM,IAEhB,EAAS,EAAE,8CAA8C,CAAC;EAE9D,CAAC,CAAC,CACD,OAAO,MAAkB;GACxB,EACE,aAAyB,QACrB,EAAc,UACd,EAAE,8CAA8C,CACtD;EACF,CAAC,CAAC,CACD,cAAc;GACb,EAAgB,EAAK;EACvB,CAAC;CACL,GACA;EAAC;EAAO;EAAQ;EAAsB;CAAC,CACzC,GAEI;CAsDJ,OArDA,AAuBE,IAvBE,MAAW,SAEX,kBAAC,GAAD;EACE,OAAO,EAAE,sCAAsC;EAC/C,aAAa,EAAE,8CAA8C,EAAE,SAAM,CAAC;EACtE,QACE,kBAAC,GAAD;GACE,MAAK;GACL,SAAQ;GACR,eAAe;IACb,EAAU,MAAM;GAClB;GAEC,UAAA,EAAE,uCAAuC;EACpC,CAAA;EAGV,UAAA,kBAAC,KAAD;GAAG,WAAW;GACX,UAAA,EAAE,uCAAuC;EACzC,CAAA;CACM,CAAA,IAIX,kBAAC,GAAD;EAAW,aAAa,EAAE,4CAA4C;EACpE,UAAA,kBAAC,GAAD;GACE,WAAW;GACX,UAAU;GACV,YAAA;GACA,cAAa;GAJf,UAAA;IAMG,KAAS,OAAwC,OAAjC,kBAAC,GAAD,EAAA,UAAY,EAAiB,CAAA;IAC9C,kBAAC,GAAD;KACE,OAAO,EAAE,2CAA2C;KACpD,MAAK;KACL,MAAK;KACL,OAAO;KACP,WAAW,MAAU;MAEnB,AADA,EAAS,EAAM,OAAO,KAAK,GAC3B,EAAS,IAAI;KACf;KACA,aAAa,EAAE,iDAAiD;KAChE,cAAa;KACb,UAAA;IACD,CAAA;IACD,kBAAC,GAAD;KAAQ,MAAK;KAAS,WAAW;KAC9B,UAAA,EAAE,uCAAuC;IACpC,CAAA;GACJ;;CACG,CAAA,GAKb,kBAAC,GAAD;EAAY,OAAO,EAAE,iCAAiC;EACnD,UAAA;CACS,CAAA;AAEhB"}
1	+ {"version":3,"file":"PasswordResetRequestScreen.js","names":[],"sources":["../../../../src/auth/pages/PasswordResetRequestScreen.tsx"],"sourcesContent":["/* eslint-disable no-ternary /\nimport {\n useCallback,\n useMemo,\n useState,\n type FormEvent,\n type JSX,\n} from 'react';\nimport { useBackofficeReactTranslation } from '../../i18n/useBackofficeReactTranslation.js';\n\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport { FormError } from '@plumile/ui/atomic/molecules/form_error/FormError.js';\nimport { FormField } from '@plumile/ui/atomic/molecules/form_field/FormField.js';\nimport { Form } from '@plumile/ui/atomic/molecules/form/Form.js';\nimport { AuthLayout } from '@plumile/ui/atomic/templates/auth_layout/AuthLayout.js';\n\nimport as styles from '../login/loginPage.css.js';\nimport { AuthPanel } from '../login/AuthPanel.js';\n\ntype Props = {\n onStartPasswordReset: (input: {\n email: string;\n locale?: string;\n }) => Promise<boolean>;\n};\n\nexport const PasswordResetRequestScreen = ({\n onStartPasswordReset,\n}: Props): JSX.Element => {\n const { i18n, t } = useBackofficeReactTranslation();\n const [email, setEmail] = useState('');\n const [status, setStatus] = useState<'idle' \| 'sent'>('idle');\n const [error, setError] = useState<string \| null>(null);\n const [isSubmitting, setIsSubmitting] = useState(false);\n\n const locale = useMemo(() => {\n const language = i18n.language.trim();\n if (language !== '') {\n return language;\n }\n if (typeof navigator === 'undefined') {\n return undefined;\n }\n return navigator.language;\n }, [i18n.language]);\n\n const handleSubmit = useCallback(\n (event: FormEvent<HTMLFormElement>) => {\n event.preventDefault();\n setError(null);\n\n if (email.trim() === '') {\n setError(t('auth.passwordResetRequest.errors.emailRequired'));\n return;\n }\n\n setIsSubmitting(true);\n onStartPasswordReset({\n email: email.trim(),\n locale,\n })\n .then((success) => {\n if (success) {\n setStatus('sent');\n } else {\n setError(t('auth.passwordResetRequest.errors.startFailed'));\n }\n })\n .catch((mutationError) => {\n setError(\n mutationError instanceof Error\n ? mutationError.message\n : t('auth.passwordResetRequest.errors.startFailed'),\n );\n })\n .finally(() => {\n setIsSubmitting(false);\n });\n },\n [email, locale, onStartPasswordReset, t],\n );\n\n let content: JSX.Element;\n if (status === 'sent') {\n content = (\n <AuthPanel\n title={t('auth.passwordResetRequest.sent.title')}\n description={t('auth.passwordResetRequest.sent.description', { email })}\n footer={\n <Button\n type=\"button\"\n variant=\"secondary\"\n onClick={() => {\n setStatus('idle');\n }}\n >\n {t('auth.passwordResetRequest.sent.action')}\n </Button>\n }\n >\n <p className={styles.helper}>\n {t('auth.passwordResetRequest.sent.helper')}\n </p>\n </AuthPanel>\n );\n } else {\n content = (\n <AuthPanel description={t('auth.passwordResetRequest.form.description')}>\n <Form\n className={styles.formSurface}\n onSubmit={handleSubmit}\n noValidate\n initialFocus=\"first-form-control\"\n >\n {error != null ? <FormError>{error}</FormError> : null}\n <FormField\n label={t('auth.passwordResetRequest.form.emailLabel')}\n name=\"email\"\n type=\"email\"\n value={email}\n onChange={(event) => {\n setEmail(event.target.value);\n setError(null);\n }}\n placeholder={t('auth.passwordResetRequest.form.emailPlaceholder')}\n autoComplete=\"email\"\n required\n />\n <Button type=\"submit\" isLoading={isSubmitting}>\n {t('auth.passwordResetRequest.form.submit')}\n </Button>\n </Form>\n </AuthPanel>\n );\n }\n\n return (\n <AuthLayout title={t('auth.passwordResetRequest.title')}>\n {content}\n </AuthLayout>\n );\n};\n"],"mappings":";;;;;;;;;;;AA0BA,IAAa,KAA8B,EACzC,8BACwB;CACxB,IAAM,EAAE,SAAM,SAAM,EAA8B,GAC5C,CAAC,GAAO,KAAY,EAAS,EAAE,GAC/B,CAAC,GAAQ,KAAa,EAA0B,MAAM,GACtD,CAAC,GAAO,KAAY,EAAwB,IAAI,GAChD,CAAC,GAAc,KAAmB,EAAS,EAAK,GAEhD,IAAS,QAAc;EAC3B,IAAM,IAAW,EAAK,SAAS,KAAK;EACpC,IAAI,MAAa,IACf,OAAO;EAEL,aAAO,YAAc,MAGzB,OAAO,UAAU;CACnB,GAAG,CAAC,EAAK,QAAQ,CAAC,GAEZ,IAAe,GAClB,MAAsC;EAIrC,IAHA,EAAM,eAAe,GACrB,EAAS,IAAI,GAET,EAAM,KAAK,MAAM,IAAI;GACvB,EAAS,EAAE,gDAAgD,CAAC;GAC5D;EACF;EAGA,AADA,EAAgB,EAAI,GACpB,EAAqB;GACnB,OAAO,EAAM,KAAK;GAClB;EACF,CAAC,CAAC,CACC,MAAM,MAAY;GACjB,AAAI,IACF,EAAU,MAAM,IAEhB,EAAS,EAAE,8CAA8C,CAAC;EAE9D,CAAC,CAAC,CACD,OAAO,MAAkB;GACxB,EACE,aAAyB,QACrB,EAAc,UACd,EAAE,8CAA8C,CACtD;EACF,CAAC,CAAC,CACD,cAAc;GACb,EAAgB,EAAK;EACvB,CAAC;CACL,GACA;EAAC;EAAO;EAAQ;EAAsB;CAAC,CACzC,GAEI;CAsDJ,OArDA,AAuBE,IAvBE,MAAW,SAEX,kBAAC,GAAD;EACE,OAAO,EAAE,sCAAsC;EAC/C,aAAa,EAAE,8CAA8C,EAAE,SAAM,CAAC;EACtE,QACE,kBAAC,GAAD;GACE,MAAK;GACL,SAAQ;GACR,eAAe;IACb,EAAU,MAAM;GAClB;GAEC,UAAA,EAAE,uCAAuC;EACpC,CAAA;EAGV,UAAA,kBAAC,KAAD;GAAG,WAAW;GACX,UAAA,EAAE,uCAAuC;EACzC,CAAA;CACM,CAAA,IAIX,kBAAC,GAAD;EAAW,aAAa,EAAE,4CAA4C;EACpE,UAAA,kBAAC,GAAD;GACE,WAAW;GACX,UAAU;GACV,YAAA;GACA,cAAa;GAJf,UAAA;IAMG,KAAS,OAAwC,OAAjC,kBAAC,GAAD,EAAA,UAAY,EAAiB,CAAA;IAC9C,kBAAC,GAAD;KACE,OAAO,EAAE,2CAA2C;KACpD,MAAK;KACL,MAAK;KACL,OAAO;KACP,WAAW,MAAU;MAEnB,AADA,EAAS,EAAM,OAAO,KAAK,GAC3B,EAAS,IAAI;KACf;KACA,aAAa,EAAE,iDAAiD;KAChE,cAAa;KACb,UAAA;IACD,CAAA;IACD,kBAAC,GAAD;KAAQ,MAAK;KAAS,WAAW;KAC9B,UAAA,EAAE,uCAAuC;IACpC,CAAA;GACJ;;CACG,CAAA,GAKb,kBAAC,GAAD;EAAY,OAAO,EAAE,iCAAiC;EACnD,UAAA;CACS,CAAA;AAEhB"}

package/lib/esm/components/backoffice/detail/BackofficeEntitySummaryHeader.js CHANGED Viewed

@@ -1,12 +1,12 @@
 import { useBackofficeReactTranslation as e } from "../../../i18n/useBackofficeReactTranslation.js";
-import { BackofficeStatusMetaBadge as t } from "./BackofficeStatusMetaBadge.js";
-import { identity as n, root as r, title as i, titleRow as a, top as o } from "./backofficeEntitySummaryHeader.css.js";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Button as l } from "@plumile/ui/atomic/atoms/button/Button.js";
-import { Tag as u } from "@plumile/ui/backoffice/atoms/tag/Tag.js";
-import { CopyableText as d } from "@plumile/ui/backoffice/atoms/copyable_text/CopyableText.js";
+import { identity as t, root as n, title as r, titleRow as i, top as a } from "./backofficeEntitySummaryHeader.css.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Button as c } from "@plumile/ui/atomic/atoms/button/Button.js";
+import { Tag as l } from "@plumile/ui/backoffice/atoms/tag/Tag.js";
+import { CopyableText as u } from "@plumile/ui/backoffice/atoms/copyable_text/CopyableText.js";
+import { BackofficeStatusMetaBadge as d } from "@plumile/ui/backoffice/molecules/backoffice_status_meta_badge/BackofficeStatusMetaBadge.js";
 //#region src/components/backoffice/detail/BackofficeEntitySummaryHeader.tsx
-var f = (e) => e === "danger" ? "danger" : e === "neutral" ? "secondary" : "primary", p = (e) => /* @__PURE__ */ s(l, {
+var f = (e) => e === "danger" ? "danger" : e === "neutral" ? "secondary" : "primary", p = (e) => /* @__PURE__ */ o(c, {
 	type: "button",
 	variant: f(e.tone),
 	size: "small",
@@ -15,51 +15,51 @@ var f = (e) => e === "danger" ? "danger" : e === "neutral" ? "secondary" : "prim
 	isLoading: e.loading,
 	onClick: e.onPress,
 	children: e.label
-}, e.id), m = ({ title: l, entityLabel: f, subtitle: m, status: h, meta: g, primaryActions: _, secondaryActions: v }) => {
+}, e.id), m = ({ title: c, entityLabel: f, subtitle: m, status: h, meta: g, primaryActions: _, secondaryActions: v }) => {
 	let { t: y } = e(), b = [..._ ?? [], ...v ?? []];
-	return /* @__PURE__ */ c("header", {
-		className: r,
-		children: [/* @__PURE__ */ c("div", {
-			className: o,
-			children: [/* @__PURE__ */ c("div", {
-				className: n,
-				children: [/* @__PURE__ */ c("div", {
-					className: a,
+	return /* @__PURE__ */ s("header", {
+		className: n,
+		children: [/* @__PURE__ */ s("div", {
+			className: a,
+			children: [/* @__PURE__ */ s("div", {
+				className: t,
+				children: [/* @__PURE__ */ s("div", {
+					className: i,
 					children: [
-						/* @__PURE__ */ s("h1", {
-							className: i,
-							children: l
+						/* @__PURE__ */ o("h1", {
+							className: r,
+							children: c
 						}),
-						/* @__PURE__ */ s(u, {
+						/* @__PURE__ */ o(l, {
 							tone: "neutral",
 							children: f
 						}),
-						h != null && /* @__PURE__ */ s(t, { status: h })
+						h != null && /* @__PURE__ */ o(d, { status: h })
 					]
-				}), m != null && /* @__PURE__ */ s("div", {
+				}), m != null && /* @__PURE__ */ o("div", {
 					className: "txvbqb9j txvbqb1bgt txvbqbws9",
 					children: m
 				})]
-			}), b.length > 0 && /* @__PURE__ */ s("div", {
+			}), b.length > 0 && /* @__PURE__ */ o("div", {
 				className: "txvbqbfpn txvbqbey txvbqblsh txvbqbhdl txvbqbh7g",
 				children: b.map(p)
 			})]
-		}), g != null && g.length > 0 && /* @__PURE__ */ s("div", {
+		}), g != null && g.length > 0 && /* @__PURE__ */ o("div", {
 			className: "txvbqbfq0 txvbqbhdy txvbqbjcq",
 			children: g.map((e) => {
 				let t = e.value;
-				return e.copyValue != null && e.copyValue !== "" && (t = /* @__PURE__ */ s(d, {
+				return e.copyValue != null && e.copyValue !== "" && (t = /* @__PURE__ */ o(u, {
 					value: e.copyValue,
 					copyValue: e.copyValue,
 					truncate: !1,
 					copyLabel: y("common.actions.copy"),
 					copiedLabel: y("common.actions.copied")
-				})), /* @__PURE__ */ c("div", {
+				})), /* @__PURE__ */ s("div", {
 					className: "txvbqbfpn txvbqbh4x txvbqbhd8 txvbqbv7x",
-					children: [/* @__PURE__ */ s("span", {
+					children: [/* @__PURE__ */ o("span", {
 						className: "txvbqb96 txvbqb6a txvbqbmw7 txvbqb1bgt",
 						children: e.label
-					}), /* @__PURE__ */ s("span", {
+					}), /* @__PURE__ */ o("span", {
 						className: "txvbqb9j txvbqb1bgr txvbqbws9",
 						children: t
 					})]

package/lib/esm/components/backoffice/detail/BackofficeEntitySummaryHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BackofficeEntitySummaryHeader.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeEntitySummaryHeader.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport { CopyableText } from '@plumile/ui/backoffice/atoms/copyable_text/CopyableText.js';\nimport { Tag } from '@plumile/ui/backoffice/atoms/tag/Tag.js';\n\nimport { ~~useBackofficeReactTranslation~~ } from '~~../../../i18n~~/~~useBackofficeReactTranslation~~.js';\nimport {~~\n BackofficeStatusMetaBadge,\n type~~ ~~BackofficeStatusMetaTone,\n~~} from '~~./BackofficeStatusMetaBadge~~.js';\nimport * as styles from './backofficeEntitySummaryHeader.css.js';\n\nexport type BackofficeEntitySummaryHeaderTone = BackofficeStatusMetaTone;\n\nexport type BackofficeEntitySummaryHeaderMetaItem = {\n readonly id: string;\n readonly label: string;\n readonly value: ReactNode;\n readonly copyValue?: string;\n readonly tone?: BackofficeEntitySummaryHeaderTone;\n};\n\nexport type BackofficeEntitySummaryHeaderAction = {\n readonly id: string;\n readonly label: string;\n readonly icon?: ReactNode;\n readonly disabled?: boolean;\n readonly loading?: boolean;\n readonly tone?: 'neutral' \| 'primary' \| 'danger';\n readonly onPress: () => void;\n};\n\nexport type BackofficeEntitySummaryHeaderProps = {\n readonly title: ReactNode;\n readonly entityLabel: string;\n readonly subtitle?: ReactNode;\n readonly status?: {\n readonly label: string;\n readonly tone: BackofficeEntitySummaryHeaderTone;\n };\n readonly meta?: readonly BackofficeEntitySummaryHeaderMetaItem[];\n readonly primaryActions?: readonly BackofficeEntitySummaryHeaderAction[];\n readonly secondaryActions?: readonly BackofficeEntitySummaryHeaderAction[];\n};\n\nconst resolveActionVariant = (\n tone: BackofficeEntitySummaryHeaderAction['tone'],\n): 'primary' \| 'secondary' \| 'danger' => {\n if (tone === 'danger') {\n return 'danger';\n }\n if (tone === 'neutral') {\n return 'secondary';\n }\n return 'primary';\n};\n\nconst renderAction = (\n action: BackofficeEntitySummaryHeaderAction,\n): JSX.Element => {\n return (\n <Button\n key={action.id}\n type=\"button\"\n variant={resolveActionVariant(action.tone)}\n size=\"small\"\n leftIcon={action.icon}\n disabled={action.disabled}\n isLoading={action.loading}\n onClick={action.onPress}\n >\n {action.label}\n </Button>\n );\n};\n\nexport const BackofficeEntitySummaryHeader = ({\n title,\n entityLabel,\n subtitle,\n status,\n meta,\n primaryActions,\n secondaryActions,\n}: BackofficeEntitySummaryHeaderProps): JSX.Element => {\n const { t } = useBackofficeReactTranslation();\n const actions = [...(primaryActions ?? []), ...(secondaryActions ?? [])];\n\n return (\n <header className={styles.root}>\n <div className={styles.top}>\n <div className={styles.identity}>\n <div className={styles.titleRow}>\n <h1 className={styles.title}>{title}</h1>\n <Tag tone=\"neutral\">{entityLabel}</Tag>\n {status != null && <BackofficeStatusMetaBadge status={status} />}\n </div>\n {subtitle != null && (\n <div className={styles.subtitle}>{subtitle}</div>\n )}\n </div>\n {actions.length > 0 && (\n <div className={styles.actions}>{actions.map(renderAction)}</div>\n )}\n </div>\n {meta != null && meta.length > 0 && (\n <div className={styles.meta}>\n {meta.map((item) => {\n let valueNode = item.value;\n if (item.copyValue != null && item.copyValue !== '') {\n valueNode = (\n <CopyableText\n value={item.copyValue}\n copyValue={item.copyValue}\n truncate={false}\n copyLabel={t('common.actions.copy')}\n copiedLabel={t('common.actions.copied')}\n />\n );\n }\n\n return (\n <div key={item.id} className={styles.metaItem}>\n <span className={styles.metaLabel}>{item.label}</span>\n <span className={styles.metaValue}>{valueNode}</span>\n </div>\n );\n })}\n </div>\n )}\n </header>\n );\n};\n\nexport default BackofficeEntitySummaryHeader;\n"],"mappings":";;;;;;;;AA6CA,IAAM,KACJ,MAEI,MAAS,WACJ,WAEL,MAAS,YACJ,cAEF,WAGH,KACJ,MAGE,kBAAC,GAAD;CAEE,MAAK;CACL,SAAS,EAAqB,EAAO,IAAI;CACzC,MAAK;CACL,UAAU,EAAO;CACjB,UAAU,EAAO;CACjB,WAAW,EAAO;CAClB,SAAS,EAAO;CAEf,UAAA,EAAO;AACF,GAVD,EAAO,EAUN,GAIC,KAAiC,EAC5C,OAAA,GACA,gBACA,UAAA,GACA,WACA,MAAA,GACA,mBACA,0BACqD;CACrD,IAAM,EAAE,SAAM,EAA8B,GACtC,IAAU,CAAC,GAAI,KAAkB,CAAC,GAAI,GAAI,KAAoB,CAAC,CAAE;CAEvE,OACE,kBAAC,UAAD;EAAQ,WAAW;EAAnB,UAAA,CACE,kBAAC,OAAD;GAAK,WAAW;GAAhB,UAAA,CACE,kBAAC,OAAD;IAAK,WAAW;IAAhB,UAAA,CACE,kBAAC,OAAD;KAAK,WAAW;KAAhB,UAAA;MACE,kBAAC,MAAD;OAAI,WAAW;OAAe,UAAA;MAAU,CAAA;MACxC,kBAAC,GAAD;OAAK,MAAK;OAAW,UAAA;MAAiB,CAAA;MACrC,KAAU,QAAQ,kBAAC,GAAD,EAAmC,UAAS,CAAA;KAC5D;IACJ,CAAA,GAAA,KAAY,QACX,kBAAC,OAAD;KAAK,WAAW;KAAkB,UAAA;IAAc,CAAA,CAE/C;GACJ,CAAA,GAAA,EAAQ,SAAS,KAChB,kBAAC,OAAD;IAAK,WAAW;IAAiB,UAAA,EAAQ,IAAI,CAAY;GAAO,CAAA,CAE/D;EACJ,CAAA,GAAA,KAAQ,QAAQ,EAAK,SAAS,KAC7B,kBAAC,OAAD;GAAK,WAAW;GACb,UAAA,EAAK,KAAK,MAAS;IAClB,IAAI,IAAY,EAAK;IAarB,OAZI,EAAK,aAAa,QAAQ,EAAK,cAAc,OAC/C,IACE,kBAAC,GAAD;KACE,OAAO,EAAK;KACZ,WAAW,EAAK;KAChB,UAAU;KACV,WAAW,EAAE,qBAAqB;KAClC,aAAa,EAAE,uBAAuB;IACvC,CAAA,IAKH,kBAAC,OAAD;KAAmB,WAAW;KAA9B,UAAA,CACE,kBAAC,QAAD;MAAM,WAAW;MAAmB,UAAA,EAAK;KAAY,CAAA,GACrD,kBAAC,QAAD;MAAM,WAAW;MAAmB,UAAA;KAAgB,CAAA,CACjD;IAHK,GAAA,EAAK,EAGV;GAET,CAAC;EACE,CAAA,CAED;;AAEZ"}
1	+ {"version":3,"file":"BackofficeEntitySummaryHeader.js","names":[],"sources":["../../../../../src/components/backoffice/detail/BackofficeEntitySummaryHeader.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport { Button } from '@plumile/ui/atomic/atoms/button/Button.js';\nimport { CopyableText } from '@plumile/ui/backoffice/atoms/copyable_text/CopyableText.js';\nimport { Tag } from '@plumile/ui/backoffice/atoms/tag/Tag.js';\nimport {\n BackofficeStatusMetaBadge,\n type BackofficeStatusMetaTone,\n} from '@plumile/ui/backoffice/molecules/backoffice_status_meta_badge/BackofficeStatusMetaBadge.js';\n\nimport { useBackofficeReactTranslation } from '../../../i18n/useBackofficeReactTranslation.js';\nimport * as styles from './backofficeEntitySummaryHeader.css.js';\n\nexport type BackofficeEntitySummaryHeaderTone = BackofficeStatusMetaTone;\n\nexport type BackofficeEntitySummaryHeaderMetaItem = {\n readonly id: string;\n readonly label: string;\n readonly value: ReactNode;\n readonly copyValue?: string;\n readonly tone?: BackofficeEntitySummaryHeaderTone;\n};\n\nexport type BackofficeEntitySummaryHeaderAction = {\n readonly id: string;\n readonly label: string;\n readonly icon?: ReactNode;\n readonly disabled?: boolean;\n readonly loading?: boolean;\n readonly tone?: 'neutral' \| 'primary' \| 'danger';\n readonly onPress: () => void;\n};\n\nexport type BackofficeEntitySummaryHeaderProps = {\n readonly title: ReactNode;\n readonly entityLabel: string;\n readonly subtitle?: ReactNode;\n readonly status?: {\n readonly label: string;\n readonly tone: BackofficeEntitySummaryHeaderTone;\n };\n readonly meta?: readonly BackofficeEntitySummaryHeaderMetaItem[];\n readonly primaryActions?: readonly BackofficeEntitySummaryHeaderAction[];\n readonly secondaryActions?: readonly BackofficeEntitySummaryHeaderAction[];\n};\n\nconst resolveActionVariant = (\n tone: BackofficeEntitySummaryHeaderAction['tone'],\n): 'primary' \| 'secondary' \| 'danger' => {\n if (tone === 'danger') {\n return 'danger';\n }\n if (tone === 'neutral') {\n return 'secondary';\n }\n return 'primary';\n};\n\nconst renderAction = (\n action: BackofficeEntitySummaryHeaderAction,\n): JSX.Element => {\n return (\n <Button\n key={action.id}\n type=\"button\"\n variant={resolveActionVariant(action.tone)}\n size=\"small\"\n leftIcon={action.icon}\n disabled={action.disabled}\n isLoading={action.loading}\n onClick={action.onPress}\n >\n {action.label}\n </Button>\n );\n};\n\nexport const BackofficeEntitySummaryHeader = ({\n title,\n entityLabel,\n subtitle,\n status,\n meta,\n primaryActions,\n secondaryActions,\n}: BackofficeEntitySummaryHeaderProps): JSX.Element => {\n const { t } = useBackofficeReactTranslation();\n const actions = [...(primaryActions ?? []), ...(secondaryActions ?? [])];\n\n return (\n <header className={styles.root}>\n <div className={styles.top}>\n <div className={styles.identity}>\n <div className={styles.titleRow}>\n <h1 className={styles.title}>{title}</h1>\n <Tag tone=\"neutral\">{entityLabel}</Tag>\n {status != null && <BackofficeStatusMetaBadge status={status} />}\n </div>\n {subtitle != null && (\n <div className={styles.subtitle}>{subtitle}</div>\n )}\n </div>\n {actions.length > 0 && (\n <div className={styles.actions}>{actions.map(renderAction)}</div>\n )}\n </div>\n {meta != null && meta.length > 0 && (\n <div className={styles.meta}>\n {meta.map((item) => {\n let valueNode = item.value;\n if (item.copyValue != null && item.copyValue !== '') {\n valueNode = (\n <CopyableText\n value={item.copyValue}\n copyValue={item.copyValue}\n truncate={false}\n copyLabel={t('common.actions.copy')}\n copiedLabel={t('common.actions.copied')}\n />\n );\n }\n\n return (\n <div key={item.id} className={styles.metaItem}>\n <span className={styles.metaLabel}>{item.label}</span>\n <span className={styles.metaValue}>{valueNode}</span>\n </div>\n );\n })}\n </div>\n )}\n </header>\n );\n};\n\nexport default BackofficeEntitySummaryHeader;\n"],"mappings":";;;;;;;;AA6CA,IAAM,KACJ,MAEI,MAAS,WACJ,WAEL,MAAS,YACJ,cAEF,WAGH,KACJ,MAGE,kBAAC,GAAD;CAEE,MAAK;CACL,SAAS,EAAqB,EAAO,IAAI;CACzC,MAAK;CACL,UAAU,EAAO;CACjB,UAAU,EAAO;CACjB,WAAW,EAAO;CAClB,SAAS,EAAO;CAEf,UAAA,EAAO;AACF,GAVD,EAAO,EAUN,GAIC,KAAiC,EAC5C,OAAA,GACA,gBACA,UAAA,GACA,WACA,MAAA,GACA,mBACA,0BACqD;CACrD,IAAM,EAAE,SAAM,EAA8B,GACtC,IAAU,CAAC,GAAI,KAAkB,CAAC,GAAI,GAAI,KAAoB,CAAC,CAAE;CAEvE,OACE,kBAAC,UAAD;EAAQ,WAAW;EAAnB,UAAA,CACE,kBAAC,OAAD;GAAK,WAAW;GAAhB,UAAA,CACE,kBAAC,OAAD;IAAK,WAAW;IAAhB,UAAA,CACE,kBAAC,OAAD;KAAK,WAAW;KAAhB,UAAA;MACE,kBAAC,MAAD;OAAI,WAAW;OAAe,UAAA;MAAU,CAAA;MACxC,kBAAC,GAAD;OAAK,MAAK;OAAW,UAAA;MAAiB,CAAA;MACrC,KAAU,QAAQ,kBAAC,GAAD,EAAmC,UAAS,CAAA;KAC5D;IACJ,CAAA,GAAA,KAAY,QACX,kBAAC,OAAD;KAAK,WAAW;KAAkB,UAAA;IAAc,CAAA,CAE/C;GACJ,CAAA,GAAA,EAAQ,SAAS,KAChB,kBAAC,OAAD;IAAK,WAAW;IAAiB,UAAA,EAAQ,IAAI,CAAY;GAAO,CAAA,CAE/D;EACJ,CAAA,GAAA,KAAQ,QAAQ,EAAK,SAAS,KAC7B,kBAAC,OAAD;GAAK,WAAW;GACb,UAAA,EAAK,KAAK,MAAS;IAClB,IAAI,IAAY,EAAK;IAarB,OAZI,EAAK,aAAa,QAAQ,EAAK,cAAc,OAC/C,IACE,kBAAC,GAAD;KACE,OAAO,EAAK;KACZ,WAAW,EAAK;KAChB,UAAU;KACV,WAAW,EAAE,qBAAqB;KAClC,aAAa,EAAE,uBAAuB;IACvC,CAAA,IAKH,kBAAC,OAAD;KAAmB,WAAW;KAA9B,UAAA,CACE,kBAAC,QAAD;MAAM,WAAW;MAAmB,UAAA,EAAK;KAAY,CAAA,GACrD,kBAAC,QAAD;MAAM,WAAW;MAAmB,UAAA;KAAgB,CAAA,CACjD;IAHK,GAAA,EAAK,EAGV;GAET,CAAC;EACE,CAAA,CAED;;AAEZ"}

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

@@ -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