@salesforce/ui-bundle-template-feature-react-authentication 12.6.3 → 12.7.0

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 (24) hide show
  1. package/dist/CHANGELOG.md +9 -0
  2. package/dist/README.md +6 -0
  3. package/dist/force-app/main/default/uiBundles/feature-react-authentication/package.json +6 -6
  4. package/dist/force-app/main/default/uiBundles/feature-react-authentication/src/components/ui/button.tsx +2 -2
  5. package/dist/force-app/main/default/uiBundles/feature-react-authentication/src/components/ui/checkbox.tsx +1 -1
  6. package/dist/force-app/main/default/uiBundles/feature-react-authentication/src/components/ui/input.tsx +1 -1
  7. package/dist/force-app/main/default/uiBundles/feature-react-authentication/src/components/ui/select.tsx +1 -1
  8. package/dist/force-app/main/default/uiBundles/feature-react-authentication/src/features/authentication/forms/auth-form.tsx +13 -2
  9. package/dist/force-app/main/default/uiBundles/feature-react-authentication/src/features/authentication/hooks/form.tsx +12 -3
  10. package/dist/force-app/main/default/uiBundles/feature-react-authentication/src/features/authentication/layouts/privateRouteLayout.tsx +1 -1
  11. package/dist/force-app/main/default/uiBundles/feature-react-authentication/src/features/authentication/menu/AuthMenu.tsx +43 -5
  12. package/dist/force-app/main/default/uiBundles/feature-react-authentication/src/features/authentication/pages/ChangePassword.tsx +1 -1
  13. package/dist/force-app/main/default/uiBundles/feature-react-authentication/src/features/authentication/pages/ForgotPassword.tsx +8 -4
  14. package/dist/force-app/main/default/uiBundles/feature-react-authentication/src/features/authentication/pages/Login.tsx +1 -1
  15. package/dist/force-app/main/default/uiBundles/feature-react-authentication/src/features/authentication/pages/Register.tsx +1 -1
  16. package/dist/force-app/main/default/uiBundles/feature-react-authentication/src/features/authentication/pages/ResetPassword.tsx +2 -1
  17. package/dist/force-app/main/default/uiBundles/feature-react-authentication/src/features/authentication/sessionTimeout/SessionTimeoutValidator.tsx +30 -7
  18. package/dist/force-app/main/default/uiBundles/feature-react-authentication/src/styles/global.css +2 -2
  19. package/dist/package-lock.json +2 -2
  20. package/dist/package.json +1 -1
  21. package/dist/scripts/network-senders.mjs +84 -0
  22. package/dist/scripts/org-setup-xml.mjs +11 -6
  23. package/dist/scripts/org-setup.mjs +13 -5
  24. package/package.json +2 -2
package/dist/CHANGELOG.md CHANGED
@@ -3,6 +3,15 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [12.7.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v12.6.3...v12.7.0) (2026-09-22)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **template-sfdx-project:** preserve target network sender addresses @W-24209513@ ([#993](https://github.com/salesforce-experience-platform-emu/webapps/issues/993)) ([fddbfdd](https://github.com/salesforce-experience-platform-emu/webapps/commit/fddbfddcb41270720372b0fd4c486f043d9ba8c5))
12
+
13
+
14
+
6
15
  ## [12.6.3](https://github.com/salesforce-experience-platform-emu/webapps/compare/v12.6.2...v12.6.3) (2026-09-14)
7
16
 
8
17
  **Note:** Version bump only for package @salesforce/ui-bundle-template-base-sfdx-project
package/dist/README.md CHANGED
@@ -24,6 +24,12 @@ default org or, in an interactive terminal, prompts you to pick one.
24
24
  npm run setup -- --target-org <alias> # or omit --target-org to use the default / pick
25
25
  ```
26
26
 
27
+ Before each Network deployment, setup reads the target org's existing sender
28
+ address and preserves it in the local metadata. Sender changes must be made in
29
+ the site's Administration settings. For a direct `sf project deploy` command,
30
+ first run `node scripts/network-senders.mjs --target-org <alias>` after generating
31
+ the project.
32
+
27
33
  Setup does **not** start the dev server. Once the org is set up, use `dev:preview` to
28
34
  refresh the GraphQL types against the org and launch the Vite dev server on its own:
29
35
 
@@ -19,8 +19,8 @@
19
19
  "graphql:schema": "node scripts/get-graphql-schema.mjs"
20
20
  },
21
21
  "dependencies": {
22
- "@salesforce/platform-sdk": "^12.6.3",
23
- "@salesforce/ui-bundle": "^12.6.3",
22
+ "@salesforce/platform-sdk": "^12.7.0",
23
+ "@salesforce/ui-bundle": "^12.7.0",
24
24
  "@tailwindcss/vite": "^4.1.17",
25
25
  "class-variance-authority": "^0.7.1",
26
26
  "clsx": "^2.1.1",
@@ -47,8 +47,8 @@
47
47
  "@graphql-eslint/eslint-plugin": "^4.1.0",
48
48
  "@graphql-tools/utils": "^11.0.0",
49
49
  "@playwright/test": "^1.49.0",
50
- "@salesforce/graphiti": "^12.6.3",
51
- "@salesforce/vite-plugin-ui-bundle": "^12.6.3",
50
+ "@salesforce/graphiti": "^12.7.0",
51
+ "@salesforce/vite-plugin-ui-bundle": "^12.7.0",
52
52
  "@testing-library/jest-dom": "^6.6.3",
53
53
  "@testing-library/react": "^16.1.0",
54
54
  "@testing-library/user-event": "^14.5.2",
@@ -56,7 +56,7 @@
56
56
  "@types/react": "^19.2.5",
57
57
  "@types/react-dom": "^19.2.3",
58
58
  "@vitejs/plugin-react": "^5.1.1",
59
- "@vitest/ui": "^4.1.0",
59
+ "@vitest/ui": "^4.1.11",
60
60
  "eslint": "^9.39.1",
61
61
  "eslint-plugin-react": "^7.37.2",
62
62
  "eslint-plugin-react-hooks": "^7.0.1",
@@ -71,7 +71,7 @@
71
71
  "typescript-eslint": "^8.46.4",
72
72
  "vite": "^7.2.4",
73
73
  "vite-plugin-graphql-codegen": "^3.6.3",
74
- "vitest": "^4.1.0"
74
+ "vitest": "^4.1.11"
75
75
  },
76
76
  "overrides": {
77
77
  "lodash": "^4.18.1",
@@ -5,7 +5,7 @@ import { Slot } from 'radix-ui';
5
5
  import { cn } from '../../lib/utils';
6
6
 
7
7
  const buttonVariants = cva(
8
- "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
8
+ "focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
9
9
  {
10
10
  variants: {
11
11
  variant: {
@@ -17,7 +17,7 @@ const buttonVariants = cva(
17
17
  ghost:
18
18
  'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
19
19
  destructive:
20
- 'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-red-700 dark:text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
20
+ 'bg-destructive/10 hover:bg-destructive/20 dark:bg-destructive/20 text-red-700 dark:text-destructive dark:hover:bg-destructive/30',
21
21
  link: 'text-primary underline-offset-4 hover:underline',
22
22
  },
23
23
  size: {
@@ -14,7 +14,7 @@ function Checkbox({
14
14
  <CheckboxPrimitive.Root
15
15
  data-slot="checkbox"
16
16
  className={cn(
17
- 'border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50',
17
+ 'border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50',
18
18
  className
19
19
  )}
20
20
  {...props}
@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
8
8
  type={type}
9
9
  data-slot="input"
10
10
  className={cn(
11
- 'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground/70 placeholder:italic w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
11
+ 'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground placeholder:italic w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
12
12
  className
13
13
  )}
14
14
  {...props}
@@ -42,7 +42,7 @@ function SelectTrigger({
42
42
  data-slot="select-trigger"
43
43
  data-size={size}
44
44
  className={cn(
45
- "border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
45
+ "border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
46
46
  className
47
47
  )}
48
48
  {...props}
@@ -72,10 +72,21 @@ export function AuthForm({
72
72
 
73
73
  <form
74
74
  id={id}
75
- onSubmit={(e) => {
75
+ onSubmit={async (e) => {
76
76
  e.preventDefault();
77
77
  e.stopPropagation();
78
- form.handleSubmit();
78
+ const formElement = e.currentTarget;
79
+ const previousFocus = document.activeElement;
80
+ await form.handleSubmit();
81
+ if (!form.state.isValid) {
82
+ requestAnimationFrame(() => {
83
+ if (formElement.isConnected && document.activeElement === previousFocus) {
84
+ formElement
85
+ .querySelector<HTMLElement>('[aria-invalid="true"]:not(:disabled)')
86
+ ?.focus();
87
+ }
88
+ });
89
+ }
79
90
  }}
80
91
  {...props}
81
92
  >
@@ -1,5 +1,5 @@
1
1
  import { useId } from "react";
2
- import { createFormHookContexts, createFormHook } from "@tanstack/react-form";
2
+ import { createFormHookContexts, createFormHook, useStore } from "@tanstack/react-form";
3
3
  import {
4
4
  Field,
5
5
  FieldDescription,
@@ -40,7 +40,10 @@ function TextField({
40
40
  const id = providedId ?? generatedId;
41
41
  const descriptionId = `${id}-description`;
42
42
  const errorId = `${id}-error`;
43
- const isInvalid = field.state.meta.isBlurred && field.state.meta.errors.length > 0;
43
+ // Submitted fields can be invalid before their first blur.
44
+ const submissionAttempts = useStore(field.form.store, (state) => state.submissionAttempts);
45
+ const isInvalid =
46
+ (field.state.meta.isBlurred || submissionAttempts > 0) && field.state.meta.errors.length > 0;
44
47
 
45
48
  // Deduplicate errors by message
46
49
  const errors = field.state.meta.errors;
@@ -64,7 +67,13 @@ function TextField({
64
67
  aria-describedby={cn(description && descriptionId, isInvalid && errorId)}
65
68
  {...props}
66
69
  />
67
- {isInvalid && uniqueErrors.length > 0 && <FieldError id={errorId} errors={uniqueErrors} />}
70
+ {isInvalid && uniqueErrors.length > 0 && (
71
+ <FieldError
72
+ id={errorId}
73
+ errors={uniqueErrors}
74
+ role={submissionAttempts > 0 ? undefined : "alert"}
75
+ />
76
+ )}
68
77
  </Field>
69
78
  );
70
79
  }
@@ -12,7 +12,7 @@ export default function PrivateRoute() {
12
12
  const { isAuthenticated, loading } = useAuth();
13
13
  const location = useLocation();
14
14
 
15
- if (loading) return null;
15
+ if (loading) return <p role="status">Checking sign-in…</p>;
16
16
 
17
17
  if (!isAuthenticated) {
18
18
  const searchParams = new URLSearchParams();
@@ -1,5 +1,12 @@
1
+ /*
2
+ * Copyright (c) 2024, Salesforce, Inc.
3
+ * All rights reserved.
4
+ * SPDX-License-Identifier: Apache-2.0
5
+ */
6
+
7
+ import { useEffect, useId, useRef } from "react";
1
8
  import { CircleUser, LogIn, LogOut, UserPen, UserPlus } from "lucide-react";
2
- import { Link } from "react-router";
9
+ import { Link, useLocation } from "react-router";
3
10
  import { useAuth } from "../context/AuthContext";
4
11
  import { ROUTES } from "../authenticationConfig";
5
12
  import { Button } from "../../../components/ui/button";
@@ -31,6 +38,13 @@ export interface AuthMenuProps {
31
38
 
32
39
  export function AuthMenu({ trigger, guestContent, menuItems, className }: AuthMenuProps) {
33
40
  const { user, isAuthenticated, loading, logout } = useAuth();
41
+ const { pathname } = useLocation();
42
+ const userLabelId = useId();
43
+ const openedPathname = useRef(pathname);
44
+ const currentPathname = useRef(pathname);
45
+ useEffect(() => {
46
+ currentPathname.current = pathname;
47
+ }, [pathname]);
34
48
 
35
49
  if (loading) {
36
50
  return <Skeleton className="size-8 rounded-full" />;
@@ -49,14 +63,38 @@ export function AuthMenu({ trigger, guestContent, menuItems, className }: AuthMe
49
63
  const triggerNode = (isAuthenticated && user && trigger?.(user)) || defaultTrigger;
50
64
 
51
65
  return (
52
- <DropdownMenu>
66
+ <DropdownMenu
67
+ onOpenChange={(open) => {
68
+ if (open) openedPathname.current = pathname;
69
+ }}
70
+ >
53
71
  <DropdownMenuTrigger asChild>{triggerNode}</DropdownMenuTrigger>
54
72
 
55
- <DropdownMenuContent align="end" className={className ?? "w-48"}>
73
+ <DropdownMenuContent
74
+ align="end"
75
+ aria-describedby={isAuthenticated ? userLabelId : undefined}
76
+ className={className ?? "w-48"}
77
+ onCloseAutoFocus={(event) => {
78
+ if (openedPathname.current === currentPathname.current) return;
79
+ event.preventDefault();
80
+ // Recover page focus intercepted by the closing menu trap.
81
+ const active = document.activeElement;
82
+ if (active && active !== document.body && active.isConnected) return;
83
+ const target =
84
+ document.querySelector<HTMLElement>("main h1, [role='main'] h1") ??
85
+ document.querySelector<HTMLElement>("main, [role='main']");
86
+ if (target) {
87
+ if (!target.hasAttribute("tabindex")) target.setAttribute("tabindex", "-1");
88
+ target.focus();
89
+ }
90
+ }}
91
+ >
56
92
  {isAuthenticated ? (
57
93
  <>
58
- <DropdownMenuLabel className="truncate">{user?.name}</DropdownMenuLabel>
59
- <DropdownMenuSeparator />
94
+ <DropdownMenuLabel id={userLabelId} className="truncate" aria-hidden="true">
95
+ {user?.name}
96
+ </DropdownMenuLabel>
97
+ <DropdownMenuSeparator aria-hidden="true" />
60
98
  <DropdownMenuItem asChild>
61
99
  <Link to={ROUTES.PROFILE.PATH}>
62
100
  <UserPen className="size-4" />
@@ -50,7 +50,7 @@ export default function ChangePassword() {
50
50
  err.errors.length === 1 ? (
51
51
  err.errors[0]
52
52
  ) : (
53
- <ul>
53
+ <ul role="list">
54
54
  {err.errors.map((e, i) => (
55
55
  <li key={i}>{e}</li>
56
56
  ))}
@@ -4,11 +4,15 @@ import { CenteredPageLayout } from "../layout/centered-page-layout";
4
4
  import { AuthForm } from "../forms/auth-form";
5
5
  import { useAppForm } from "../hooks/form";
6
6
  import { createDataSDK } from "@salesforce/platform-sdk";
7
- import { ROUTES, AUTH_PLACEHOLDERS } from "../authenticationConfig";
7
+ import { ROUTES } from "../authenticationConfig";
8
8
  import { ApiError, handleApiResponse } from "../utils/helpers";
9
9
 
10
10
  const forgotPasswordSchema = z.object({
11
- username: z.string().trim().toLowerCase().email("Please enter a valid username"),
11
+ username: z
12
+ .string()
13
+ .trim()
14
+ .toLowerCase()
15
+ .email("Enter your username in email format, for example asmith@example.com"),
12
16
  });
13
17
 
14
18
  export default function ForgotPassword() {
@@ -42,7 +46,7 @@ export default function ForgotPassword() {
42
46
  err.errors.length === 1 ? (
43
47
  err.errors[0]
44
48
  ) : (
45
- <ul>
49
+ <ul role="list">
46
50
  {err.errors.map((e, i) => (
47
51
  <li key={i}>{e}</li>
48
52
  ))}
@@ -75,7 +79,7 @@ export default function ForgotPassword() {
75
79
  {(field) => (
76
80
  <field.TextField
77
81
  label="Username"
78
- placeholder={AUTH_PLACEHOLDERS.USERNAME}
82
+ placeholder="asmith@example.com"
79
83
  autoComplete="username"
80
84
  disabled={success}
81
85
  />
@@ -60,7 +60,7 @@ export default function Login() {
60
60
  err.errors.length === 1 ? (
61
61
  err.errors[0]
62
62
  ) : (
63
- <ul>
63
+ <ul role="list">
64
64
  {err.errors.map((e, i) => (
65
65
  <li key={i}>{e}</li>
66
66
  ))}
@@ -69,7 +69,7 @@ export default function Register() {
69
69
  console.error("Registration failed", err);
70
70
  if (err instanceof ApiError) {
71
71
  setSubmitError(
72
- <ul>
72
+ <ul role="list">
73
73
  {err.errors.map((e, i) => (
74
74
  <li key={i}>{e}</li>
75
75
  ))}
@@ -45,7 +45,7 @@ export default function ResetPassword() {
45
45
  err.errors.length === 1 ? (
46
46
  err.errors[0]
47
47
  ) : (
48
- <ul>
48
+ <ul role="list">
49
49
  {err.errors.map((e, i) => (
50
50
  <li key={i}>{e}</li>
51
51
  ))}
@@ -64,6 +64,7 @@ export default function ResetPassword() {
64
64
  return (
65
65
  <CenteredPageLayout title={ROUTES.RESET_PASSWORD.TITLE}>
66
66
  <CardLayout title="Reset Password">
67
+ <h1 className="sr-only">Reset Password</h1>
67
68
  <StatusAlert>
68
69
  Reset token is invalid or expired.{" "}
69
70
  <Link to={ROUTES.FORGOT_PASSWORD.PATH} className="underline underline-offset-4">
@@ -378,6 +378,7 @@ function SessionWarningModal({
378
378
  onCountdownExpire,
379
379
  }: SessionWarningModalProps) {
380
380
  const continueButtonRef = useRef<HTMLButtonElement>(null);
381
+ const previousFocusRef = useRef<HTMLElement | null>(null);
381
382
 
382
383
  // Countdown timer with accessibility
383
384
  const timer = useCountdownTimer({
@@ -399,13 +400,6 @@ function SessionWarningModal({
399
400
  start();
400
401
  }, [isOpen, timeRemaining, start, stop, reset]);
401
402
 
402
- // Focus the continue button when dialog opens
403
- useEffect(() => {
404
- if (isOpen) {
405
- continueButtonRef.current?.focus();
406
- }
407
- }, [isOpen]);
408
-
409
403
  // Handle "Continue Working" button click
410
404
  const handleContinue = useCallback(() => {
411
405
  stop();
@@ -421,6 +415,30 @@ function SessionWarningModal({
421
415
  return (
422
416
  <Dialog open={isOpen} onOpenChange={() => {}}>
423
417
  <DialogContent
418
+ aria-labelledby="session-warning-title"
419
+ aria-describedby="session-warning-description"
420
+ onOpenAutoFocus={(event) => {
421
+ event.preventDefault();
422
+ previousFocusRef.current =
423
+ document.activeElement instanceof HTMLElement ? document.activeElement : null;
424
+ continueButtonRef.current?.focus();
425
+ }}
426
+ onCloseAutoFocus={(event) => {
427
+ event.preventDefault();
428
+ const previous = previousFocusRef.current;
429
+ previousFocusRef.current = null;
430
+ if (previous?.isConnected && previous !== document.body) {
431
+ previous.focus();
432
+ if (document.activeElement === previous) return;
433
+ }
434
+ const target = document.querySelector<HTMLElement>("main, #main-content");
435
+ if (target) {
436
+ if (target.tabIndex < 0 && !target.hasAttribute("tabindex")) {
437
+ target.setAttribute("tabindex", "-1");
438
+ }
439
+ target.focus();
440
+ }
441
+ }}
424
442
  showCloseButton={false}
425
443
  onEscapeKeyDown={(e) => e.preventDefault()}
426
444
  onPointerDownOutside={(e) => e.preventDefault()}
@@ -578,6 +596,11 @@ export default function SessionTimeoutValidator({
578
596
  */
579
597
  const handleDismissAlert = useCallback(() => {
580
598
  setShowExpiredAlert(false);
599
+ const main = document.querySelector<HTMLElement>("main, #main-content");
600
+ if (main) {
601
+ if (!main.hasAttribute("tabindex")) main.setAttribute("tabindex", "-1");
602
+ main.focus();
603
+ }
581
604
  }, []);
582
605
 
583
606
  return (
@@ -75,7 +75,7 @@
75
75
  --destructive: oklch(0.577 0.245 27.325);
76
76
  --border: oklch(0.922 0 0);
77
77
  --input: oklch(0.922 0 0);
78
- --ring: oklch(0.708 0 0);
78
+ --ring: oklch(0.556 0 0);
79
79
  --chart-1: oklch(0.646 0.222 41.116);
80
80
  --chart-2: oklch(0.6 0.118 184.704);
81
81
  --chart-3: oklch(0.398 0.07 227.392);
@@ -127,7 +127,7 @@
127
127
 
128
128
  @layer base {
129
129
  * {
130
- @apply border-border outline-ring/50;
130
+ @apply border-border outline-ring;
131
131
  }
132
132
  body {
133
133
  @apply bg-background text-foreground;
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "name": "@salesforce/ui-bundle-template-base-sfdx-project",
3
- "version": "12.6.3",
3
+ "version": "12.7.0",
4
4
  "lockfileVersion": 3,
5
5
  "requires": true,
6
6
  "packages": {
7
7
  "": {
8
8
  "name": "@salesforce/ui-bundle-template-base-sfdx-project",
9
- "version": "12.6.3",
9
+ "version": "12.7.0",
10
10
  "license": "SEE LICENSE IN LICENSE.txt",
11
11
  "dependencies": {
12
12
  "fast-xml-parser": "^5.9.3",
package/dist/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforce/ui-bundle-template-base-sfdx-project",
3
- "version": "12.6.3",
3
+ "version": "12.7.0",
4
4
  "description": "Base SFDX project template",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "publishConfig": {
@@ -0,0 +1,84 @@
1
+ import { execFileSync } from 'node:child_process';
2
+ import { existsSync, readdirSync, readFileSync, writeFileSync } from 'node:fs';
3
+ import { join, resolve, dirname } from 'node:path';
4
+ import { fileURLToPath } from 'node:url';
5
+ import { XMLBuilder } from 'fast-xml-parser';
6
+ import { parseNetworkDocument, NetworkXmlError } from './org-setup-xml.mjs';
7
+ import { escapeSoqlString } from './org-setup-utils.mjs';
8
+
9
+ const builder = new XMLBuilder({
10
+ ignoreAttributes: false,
11
+ commentPropName: '#comment',
12
+ format: true,
13
+ indentBy: ' ',
14
+ suppressEmptyNode: true,
15
+ });
16
+
17
+ export function preserveNetworkSenders(projectDir, targetOrg, run = execFileSync) {
18
+ const project = JSON.parse(readFileSync(join(projectDir, 'sfdx-project.json'), 'utf8'));
19
+ const files = (project.packageDirectories ?? []).flatMap(({ path }) => {
20
+ const dir = join(projectDir, path, 'main/default/networks');
21
+ if (!existsSync(dir)) return [];
22
+ return readdirSync(dir)
23
+ .filter((name) => name.endsWith('.network-meta.xml'))
24
+ .map((name) => ({ name: name.slice(0, -'.network-meta.xml'.length), path: join(dir, name) }));
25
+ });
26
+ if (!files.length) return;
27
+
28
+ const names = [...new Set(files.map(({ name }) => `'${escapeSoqlString(name)}'`))];
29
+ const response = JSON.parse(run('sf', [
30
+ 'data', 'query', '--target-org', targetOrg,
31
+ '--query', `SELECT Name, EmailSenderAddress FROM Network WHERE Name IN (${names.join(',')})`,
32
+ '--json',
33
+ ], { cwd: projectDir, encoding: 'utf8', stdio: ['ignore', 'pipe', 'pipe'], timeout: 60000 }));
34
+ if (response.status !== 0 || !Array.isArray(response.result?.records) || !response.result.done) {
35
+ throw new Error('Could not read all target Network sender addresses; deployment stopped.');
36
+ }
37
+ const senders = new Map(response.result.records.map((record) => [record.Name, record.EmailSenderAddress]));
38
+
39
+ const updates = files.map((file) => {
40
+ const original = readFileSync(file.path, 'utf8');
41
+ const document = parseNetworkDocument(original);
42
+ const network = document.Network;
43
+ let changed = false;
44
+ if (senders.has(file.name)) {
45
+ const sender = senders.get(file.name);
46
+ if (typeof sender !== 'string' || !sender.trim()) {
47
+ throw new Error(`The target Network "${file.name}" has no sender address; deployment stopped.`);
48
+ }
49
+ if (typeof network.emailSenderAddress !== 'string') {
50
+ throw new NetworkXmlError(`Expected one emailSenderAddress in ${file.name}.network-meta.xml`);
51
+ }
52
+ if (network.emailSenderAddress !== sender) {
53
+ network.emailSenderAddress = sender;
54
+ changed = true;
55
+ }
56
+ }
57
+ // Sender changes belong to the site's Administration workspace.
58
+ if ('newSenderAddress' in network) {
59
+ delete network.newSenderAddress;
60
+ changed = true;
61
+ }
62
+ return { ...file, xml: changed ? builder.build(document) : original, changed };
63
+ });
64
+
65
+ for (const file of updates) {
66
+ if (file.changed) writeFileSync(file.path, file.xml);
67
+ }
68
+ }
69
+
70
+ if (process.argv[1] && resolve(process.argv[1]) === fileURLToPath(import.meta.url)) {
71
+ const args = process.argv.slice(2);
72
+ if (args.length !== 2 || args[0] !== '--target-org' || !args[1].trim()) {
73
+ console.error('Usage: node scripts/network-senders.mjs --target-org <alias>');
74
+ process.exitCode = 1;
75
+ } else {
76
+ try {
77
+ preserveNetworkSenders(resolve(dirname(fileURLToPath(import.meta.url)), '..'), args[1]);
78
+ console.log('Network metadata prepared with the target org sender addresses.');
79
+ } catch (error) {
80
+ console.error(`Network metadata preparation failed: ${error.message}`);
81
+ process.exitCode = 1;
82
+ }
83
+ }
84
+ }
@@ -39,6 +39,7 @@ const parser = new XMLParser({
39
39
  ignoreAttributes: false,
40
40
  parseTagValue: false,
41
41
  parseAttributeValue: false,
42
+ commentPropName: '#comment',
42
43
  });
43
44
 
44
45
  /**
@@ -73,22 +74,26 @@ export function assertSafeProfileName(name) {
73
74
  }
74
75
 
75
76
  /**
76
- * Parse + assert this is a Network metadata document. Returns the parsed
77
- * `Network` object. Throws NetworkXmlError if the root is missing (e.g. a file
77
+ * Parse + assert this is a Network metadata document. Returns the full parsed
78
+ * document. Throws NetworkXmlError if the root is missing (e.g. a file
78
79
  * that is not actually network metadata).
79
80
  */
80
- export function parseNetwork(xml) {
81
+ export function parseNetworkDocument(xml) {
81
82
  let parsed;
82
83
  try {
83
- parsed = parser.parse(xml);
84
+ parsed = parser.parse(xml, true);
84
85
  } catch (e) {
85
86
  throw new NetworkXmlError(`network metadata is not well-formed XML: ${e.message}`);
86
87
  }
87
88
  const network = parsed?.[NETWORK_ROOT];
88
- if (network == null || typeof network !== 'object') {
89
+ if (network == null || typeof network !== 'object' || Array.isArray(network)) {
89
90
  throw new NetworkXmlError(`expected a <${NETWORK_ROOT}> root node, but none was found`);
90
91
  }
91
- return network;
92
+ return parsed;
93
+ }
94
+
95
+ export function parseNetwork(xml) {
96
+ return parseNetworkDocument(xml)[NETWORK_ROOT];
92
97
  }
93
98
 
94
99
  /** Normalize a fast-xml-parser child (absent | scalar | array) to an array. */
@@ -55,6 +55,7 @@ import {
55
55
  import { tmpdir } from 'node:os';
56
56
 
57
57
  import { validateConfig } from './org-setup-config-schema.mjs';
58
+ import { preserveNetworkSenders } from './network-senders.mjs';
58
59
  import {
59
60
  addProfileToMemberGroups,
60
61
  enableSelfRegInXml,
@@ -1149,9 +1150,14 @@ function ensureLogoutUrl(logoutUrl, siteName, targetOrg) {
1149
1150
  writeFileSync(networkXmlPath, result.xml);
1150
1151
  console.log(` Set <logoutUrl>${absoluteUrl}</logoutUrl> in ${siteName}.network-meta.xml`);
1151
1152
 
1152
- // Re-deploy ONLY the network file (mirrors enableSelfRegistration). Best-effort:
1153
- // a non-zero exit (e.g. the org's emailSenderAddress differs from the shipped
1154
- // value and can't be updated) logs loudly and continues.
1153
+ try {
1154
+ preserveNetworkSenders(ROOT, targetOrg);
1155
+ } catch (e) {
1156
+ console.error(` ERROR: cannot prepare Network metadata for "${siteName}" — ${e.message}. Skipping logout URL deployment.`);
1157
+ return;
1158
+ }
1159
+
1160
+ // Logout URL deployment is best-effort.
1155
1161
  const deployResult = spawnSync('sf', [
1156
1162
  'project', 'deploy', 'start',
1157
1163
  '--target-org', targetOrg,
@@ -1160,8 +1166,7 @@ function ensureLogoutUrl(logoutUrl, siteName, targetOrg) {
1160
1166
  if (deployResult.status !== 0) {
1161
1167
  console.error(
1162
1168
  ` ERROR: failed to deploy <logoutUrl> for "${siteName}" (sf exit ${deployResult.status ?? 1}). ` +
1163
- `If the org's Network emailSenderAddress differs from the shipped value it blocks this deploy — ` +
1164
- `set the logout URL manually in the site's Administration settings.`,
1169
+ `Set the logout URL manually in the site's Administration settings.`,
1165
1170
  );
1166
1171
  return;
1167
1172
  }
@@ -1208,6 +1213,8 @@ function enableSelfRegistration(selfRegConfig, siteName, targetOrg) {
1208
1213
  writeFileSync(networkXmlPath, result.xml);
1209
1214
  console.log(` Updated ${siteName}.network-meta.xml: selfRegistration=true, selfRegProfile=${selfRegProfile}`);
1210
1215
 
1216
+ preserveNetworkSenders(ROOT, targetOrg);
1217
+
1211
1218
  // Re-deploy only the network file
1212
1219
  const deployResult = spawnSync('sf', [
1213
1220
  'project', 'deploy', 'start',
@@ -2118,6 +2125,7 @@ async function main() {
2118
2125
  throw new StepError(`deploy blocked — ${licenseGate.reason}`);
2119
2126
  }
2120
2127
  }
2128
+ preserveNetworkSenders(ROOT, targetOrg);
2121
2129
  run('Deploy metadata', 'sf', ['project', 'deploy', 'start', '--target-org', targetOrg], {
2122
2130
  timeout: 180000,
2123
2131
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforce/ui-bundle-template-feature-react-authentication",
3
- "version": "12.6.3",
3
+ "version": "12.7.0",
4
4
  "description": "Authentication feature for UI Bundles",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "author": "",
@@ -16,7 +16,7 @@
16
16
  "clean": "rm -rf dist"
17
17
  },
18
18
  "devDependencies": {
19
- "@salesforce/ui-bundle": "^12.6.3",
19
+ "@salesforce/ui-bundle": "^12.7.0",
20
20
  "@tanstack/react-form": "^1.27.7",
21
21
  "@types/react": "^19.2.7",
22
22
  "@types/react-dom": "^19.2.3",