@form-engine-ts/mui 2.9.5 → 3.0.0

package/README.md

@@ -25,8 +25,15 @@ import { MuiFormBuilder } from "@form-engine-ts/mui";
     sectionOrder: ["basicSettings", "completionMessage", "questions", "addQuestion", "localization"]
   }}
   localizationOptions={{
+    availableLocales: [
+      { value: "ja", label: "日本語" },
+      { value: "en", label: "English" }
+    ],
+    placement: "afterQuestions",
     collapsible: true,
     defaultExpanded: "when-configured",
+    showSummary: true,
+    emptyStateMessage: "No translation locales have been added yet.",
     defaultLocaleControl: "readOnly"
   }}
   muiSlotProps={{ card: { sx: { p: 2 } }, accordion: { elevation: 0 } }}
@@ -54,6 +61,12 @@ slots as it does for the standard builder.
 width options. `fieldEditorOptions.description` and `localizationOptions.defaultLocaleControl` independently make those
 controls editable, read-only, or hidden. Set `dense` to reduce section, editor, option, and toolbar spacing.
 `buttonVariants` can override the MUI variant for `primary`, `secondary`, and `danger` actions independently.
+`localizationOptions.availableLocales` supplies display-ready locale candidates independently from the policy; when
+both are present, only candidates allowed by `allowedLocales` are shown. `placement` supports `top`,
+`beforeQuestions`, `afterQuestions`, and `bottom` section presets. `showSummary` renders a status alert, while
+`renderSummary` can provide a custom summary. `emptyStateMessage` customizes the guidance shown before a translation
+locale is added. `defaultExpanded` also accepts `"always"`; `autoFocusNewTab` focuses a newly added locale tab by
+default.
 `layoutOptions`, `localizationOptions`, and `muiSlotProps` are also accepted in `muiOptions` for low-level factories such
 as `createMuiBuilderSlots`; the dedicated `MuiFormBuilder` props take precedence.
 

package/dist/index.cjs

@@ -21,6 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   DEFAULT_MUI_SECTION_ORDER: () => DEFAULT_MUI_SECTION_ORDER,
+  MUI_LOCALIZATION_SECTION_ORDERS: () => MUI_LOCALIZATION_SECTION_ORDERS,
   MuiButtonAdapter: () => MuiButtonAdapter,
   MuiCheckboxAdapter: () => MuiCheckboxAdapter,
   MuiErrorMessageAdapter: () => MuiErrorMessageAdapter,
@@ -72,8 +73,15 @@ var DEFAULT_MUI_SECTION_ORDER = [
   "basicSettings",
   "questions",
   "addQuestion",
-  "localization"
+  "localization",
+  "completionMessage"
 ];
+var MUI_LOCALIZATION_SECTION_ORDERS = {
+  top: ["localization", "basicSettings", "completionMessage", "questions", "addQuestion"],
+  beforeQuestions: ["basicSettings", "localization", "completionMessage", "questions", "addQuestion"],
+  afterQuestions: ["basicSettings", "questions", "addQuestion", "localization", "completionMessage"],
+  bottom: ["basicSettings", "completionMessage", "questions", "addQuestion", "localization"]
+};
 function resolveMuiAdapterOptions(options = {}) {
   const buttonVariant = options.buttonVariant ?? "contained";
   return {
@@ -98,7 +106,14 @@ function resolveMuiAdapterOptions(options = {}) {
     localizationOptions: {
       collapsible: options.localizationOptions?.collapsible ?? false,
       defaultExpanded: options.localizationOptions?.defaultExpanded ?? false,
-      defaultLocaleControl: options.localizationOptions?.defaultLocaleControl ?? "editable"
+      showSummary: options.localizationOptions?.showSummary ?? false,
+      ...options.localizationOptions?.availableLocales === void 0 ? {} : { availableLocales: options.localizationOptions.availableLocales },
+      ...options.localizationOptions?.placement === void 0 ? {} : { placement: options.localizationOptions.placement },
+      ...options.localizationOptions?.renderSummary === void 0 ? {} : { renderSummary: options.localizationOptions.renderSummary },
+      ...options.localizationOptions?.emptyStateMessage === void 0 ? {} : { emptyStateMessage: options.localizationOptions.emptyStateMessage },
+      defaultLocaleControl: options.localizationOptions?.defaultLocaleControl ?? "editable",
+      noWrapActions: options.localizationOptions?.noWrapActions ?? true,
+      autoFocusNewTab: options.localizationOptions?.autoFocusNewTab ?? true
     },
     muiSlotProps: options.muiSlotProps ?? {}
   };
@@ -136,6 +151,7 @@ function createMuiButtonAdapter(options) {
     "aria-describedby": ariaDescribedBy,
     "aria-labelledby": ariaLabelledBy,
     onClick,
+    noWrap,
     children,
     title,
     variant,
@@ -161,6 +177,7 @@ function createMuiButtonAdapter(options) {
         color: variant === "danger" ? "error" : "primary",
         variant: resolved.buttonVariants?.[variant ?? "primary"] ?? resolved.buttonVariant,
         fullWidth: resolved.buttonFullWidth ?? false,
+        sx: { whiteSpace: noWrap === false ? "normal" : "nowrap" },
         children
       }
     );
@@ -189,6 +206,8 @@ function createMuiCheckboxAdapter(options) {
     label
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
+    const helperId = id === void 0 ? void 0 : ariaDescribedBy?.split(/\s+/u)[0] ?? `${id}-helper-text`;
+    const describedBy = ariaDescribedBy ?? (helperText === void 0 || helperText.length === 0 ? void 0 : helperId);
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_material2.FormControl, { className, error: Boolean(error), required, disabled: disabled || readOnly, children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         import_material2.FormControlLabel,
@@ -205,7 +224,7 @@ function createMuiCheckboxAdapter(options) {
               disabled: disabled || readOnly,
               inputProps: {
                 "aria-label": ariaLabel,
-                "aria-describedby": ariaDescribedBy,
+                "aria-describedby": describedBy,
                 "aria-labelledby": ariaLabelledBy
               },
               onChange: (event) => onChange(event.target.checked)
@@ -213,7 +232,7 @@ function createMuiCheckboxAdapter(options) {
           )
         }
       ),
-      helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.FormHelperText, { id: ariaDescribedBy, children: helperText })
+      helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_material2.FormHelperText, { id: helperId, children: helperText })
     ] });
   };
 }
@@ -402,10 +421,13 @@ function createMuiSelectAdapter(options) {
     helperText,
     value,
     onChange,
+    onKeyDown,
     options: selectOptions
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
     const labelId = id === void 0 || label === void 0 ? void 0 : `${id}-label`;
+    const helperId = id === void 0 ? void 0 : ariaDescribedBy?.split(/\s+/u)[0] ?? `${id}-helper-text`;
+    const describedBy = ariaDescribedBy ?? (helperText === void 0 || helperText.length === 0 ? void 0 : helperId);
     const handleChange = (event) => onChange(event.target.value);
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       import_material7.FormControl,
@@ -427,18 +449,20 @@ function createMuiSelectAdapter(options) {
               name,
               label,
               value,
+              disabled,
               onChange: handleChange,
+              onKeyDown,
               required,
               readOnly,
               inputProps: {
                 "aria-label": ariaLabel,
-                "aria-describedby": ariaDescribedBy,
+                "aria-describedby": describedBy,
                 "aria-labelledby": ariaLabelledBy
               },
               children: selectOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.MenuItem, { value: option.value, disabled: option.disabled, children: option.label }, option.value))
             }
           ),
-          helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.FormHelperText, { id: ariaDescribedBy, children: helperText })
+          helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.FormHelperText, { id: helperId, children: helperText })
         ]
       }
     );
@@ -525,6 +549,7 @@ function createMuiTextInputAdapter(options) {
     helperText,
     value,
     onChange,
+    onKeyDown,
     placeholder,
     maxLength,
     inputMode,
@@ -566,7 +591,8 @@ function createMuiTextInputAdapter(options) {
         fullWidth: resolved.inputFullWidth ?? resolved.fullWidth,
         size: resolved.size,
         variant: resolved.variant,
-        onChange: (event) => onChange(event.currentTarget.value)
+        onChange: (event) => onChange(event.currentTarget.value),
+        onKeyDown
       }
     );
   };
@@ -1082,6 +1108,18 @@ var import_icons_material2 = require("@mui/icons-material");
 var import_material13 = require("@mui/material");
 var import_react2 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
+var DEFAULT_EMPTY_STATE_MESSAGE = "No translation locales have been added yet. Select a language from the dropdown above to add one.";
+function normalizeLocaleOptions(options, getLocaleLabel) {
+  const seen = /* @__PURE__ */ new Set();
+  const normalized = [];
+  for (const item of options) {
+    const value = typeof item === "string" ? item : item.value;
+    if (value.length === 0 || seen.has(value)) continue;
+    seen.add(value);
+    normalized.push({ value, label: typeof item === "string" ? getLocaleLabel?.(value) ?? value : item.label });
+  }
+  return normalized;
+}
 function createMuiLocalizationSlot(options) {
   return function MuiLocalization({
     schema,
@@ -1100,6 +1138,7 @@ function createMuiLocalizationSlot(options) {
     const resolved = useResolvedMuiAdapterOptions(options);
     const { Button: Button2, ErrorMessage, Select: Select2, TextArea, TextInput } = components;
     const [newLocale, setNewLocale] = (0, import_react2.useState)("");
+    const [pendingFocusLocale, setPendingFocusLocale] = (0, import_react2.useState)(null);
     const locales = Array.from(
       new Set((schema.supportedLocales ?? []).filter((locale) => locale !== schema.defaultLocale))
     );
@@ -1108,75 +1147,157 @@ function createMuiLocalizationSlot(options) {
       ...schema.defaultLocale === void 0 ? [] : [schema.defaultLocale],
       ...schema.supportedLocales ?? []
     ]);
-    const availableAllowedLocales = policy?.allowedLocales?.filter((locale) => !registeredLocales.has(locale));
+    const localizationOptions = resolved.localizationOptions ?? {};
+    const availableLocaleSource = localizationOptions.availableLocales;
+    const availableLocaleOptions = availableLocaleSource === void 0 ? policy?.allowedLocales?.map((value) => ({
+      value,
+      label: resolved.getLocaleLabel?.(value) ?? value
+    })) : normalizeLocaleOptions(availableLocaleSource, resolved.getLocaleLabel);
+    const filteredAvailableLocales = availableLocaleOptions?.filter(
+      (locale) => !registeredLocales.has(locale.value) && (policy?.allowedLocales === void 0 || policy.allowedLocales.includes(locale.value))
+    );
+    const hasLocaleSelector = filteredAvailableLocales !== void 0;
     const localeLimitReached = policy?.maxLocales !== void 0 && registeredLocales.size >= policy.maxLocales;
     const normalizedLocale = newLocale.trim();
+    const selectedLocaleAvailable = !hasLocaleSelector || filteredAvailableLocales.some((locale) => locale.value === normalizedLocale);
     const localeAllowed = policy?.allowedLocales === void 0 || policy.allowedLocales.includes(normalizedLocale);
-    const canAddLocale = !readOnly && normalizedLocale.length > 0 && localeAllowed && !registeredLocales.has(normalizedLocale) && !localeLimitReached;
+    const canAddLocale = !readOnly && normalizedLocale.length > 0 && selectedLocaleAvailable && localeAllowed && !registeredLocales.has(normalizedLocale) && !localeLimitReached;
     const handleTabChange = (_event, value) => onCurrentLocaleChange(value);
     const addLocale = () => {
       if (!canAddLocale) return;
       const result = actions.addLocale(normalizedLocale);
       if (!result.success) return;
       onCurrentLocaleChange(normalizedLocale);
+      if (localizationOptions.autoFocusNewTab ?? true) setPendingFocusLocale(normalizedLocale);
       setNewLocale("");
     };
+    const handleAddKeyDown = (event) => {
+      if (event.key !== "Enter" || !canAddLocale) return;
+      event.preventDefault();
+      event.stopPropagation();
+      addLocale();
+    };
+    (0, import_react2.useEffect)(() => {
+      if (pendingFocusLocale === null || currentLocale !== pendingFocusLocale) return;
+      const tab = document.getElementById(`mui-builder-locale-tab-${pendingFocusLocale}`);
+      if (tab === null) return;
+      tab.focus();
+      setPendingFocusLocale(null);
+    }, [currentLocale, pendingFocusLocale]);
     const stackProps = resolved.muiSlotProps?.stack;
-    const collapsible = resolved.localizationOptions?.collapsible ?? false;
-    const defaultLocaleControl = resolved.localizationOptions?.defaultLocaleControl ?? "editable";
+    const collapsible = localizationOptions.collapsible ?? false;
+    const defaultLocaleControl = localizationOptions.defaultLocaleControl ?? "editable";
+    const configuredTranslationLocales = locales.filter((locale) => locale !== schema.defaultLocale);
+    const configuredLocales = [
+      ...schema.defaultLocale === void 0 ? [] : [schema.defaultLocale],
+      ...configuredTranslationLocales
+    ];
+    const legacySummaryLabel = configuredTranslationLocales.length === 0 ? "Translations not configured" : `${configuredLocales.length} ${configuredLocales.length === 1 ? "language" : "languages"} configured: ${configuredLocales.map(
+      (locale) => locale === schema.defaultLocale ? `${resolved.getLocaleLabel?.(locale) ?? locale} (default)` : resolved.getLocaleLabel?.(locale) ?? locale
+    ).join(", ")}`;
+    const emptyStateMessage = localizationOptions.emptyStateMessage === void 0 ? DEFAULT_EMPTY_STATE_MESSAGE : translate(localizationOptions.emptyStateMessage);
+    const summaryContext = {
+      defaultLocale: schema.defaultLocale ?? "",
+      supportedLocales: schema.supportedLocales ?? [],
+      totalLocales: registeredLocales.size
+    };
+    const summary = localizationOptions.renderSummary === void 0 ? localizationOptions.showSummary ? configuredTranslationLocales.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Alert, { severity: "success", sx: { mb: 2 }, children: translate("builder.localization.localesConfiguredSummary", {
+      count: schema.supportedLocales?.length ?? 0
+    }) }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Alert, { severity: "info", sx: { mb: 2 }, children: translate("builder.localization.noLocalesConfigured") }) : null : localizationOptions.renderSummary(summaryContext);
+    const title = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material13.Stack, { alignItems: "center", direction: "row", spacing: 1, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Typography, { variant: "subtitle1", fontWeight: "bold", children: translate("builder.localization") }),
+      localizationOptions.renderSummary === void 0 && localizationOptions.showSummary && configuredTranslationLocales.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        import_material13.Chip,
+        {
+          label: legacySummaryLabel,
+          size: "small",
+          color: configuredTranslationLocales.length > 0 ? "primary" : "default",
+          variant: "outlined"
+        }
+      ) : null
+    ] });
+    const noCandidateLocales = hasLocaleSelector && filteredAvailableLocales.length === 0;
+    const candidateHelperText = localeLimitReached ? void 0 : noCandidateLocales ? translate("builder.localization.allLocalesAdded") : void 0;
     const content = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material13.Stack, { ...stackProps, spacing: resolved.dense ? 1 : 2, children: [
-      !collapsible ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Typography, { variant: "subtitle1", fontWeight: "bold", children: translate("builder.localization") }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material13.Stack, { ...stackProps, direction: { xs: "column", sm: "row" }, spacing: resolved.dense ? 1 : 2, children: [
-        defaultLocaleControl === "hidden" ? null : defaultLocaleControl === "readOnly" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material13.Stack, { spacing: 0.5, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Typography, { variant: "caption", color: "text.secondary", children: translate("builder.defaultLocale") }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-            import_material13.Chip,
-            {
-              label: resolved.getLocaleLabel?.(schema.defaultLocale ?? "") ?? schema.defaultLocale ?? "",
-              size: resolved.size
-            }
-          )
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          TextInput,
-          {
-            id: "mui-builder-default-locale",
-            label: translate("builder.defaultLocale"),
-            value: schema.defaultLocale ?? "",
-            disabled: readOnly,
-            onChange: (value) => {
-              const result = actions.setDefaultLocale(value);
-              if (result.success && value === currentLocale) onCurrentLocaleChange("");
-            }
-          }
-        ),
-        availableAllowedLocales === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          TextInput,
-          {
-            id: "mui-builder-new-locale",
-            label: translate("builder.addLocale"),
-            value: newLocale,
-            disabled: readOnly || localeLimitReached,
-            onChange: setNewLocale
-          }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-          Select2,
-          {
-            id: "mui-builder-new-locale",
-            label: translate("builder.addLocale"),
-            value: newLocale,
-            options: [
-              { value: "", label: "\u2014" },
-              ...availableAllowedLocales.map((locale) => ({
-                value: locale,
-                label: resolved.getLocaleLabel?.(locale) ?? locale
-              }))
-            ],
-            disabled: readOnly || localeLimitReached || availableAllowedLocales.length === 0,
-            onChange: setNewLocale
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button2, { variant: "primary", action: "addLocale", disabled: !canAddLocale, onClick: addLocale, children: translate("builder.addLocale") })
-      ] }),
+      !collapsible ? title : null,
+      summary,
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        import_material13.Stack,
+        {
+          ...stackProps,
+          direction: { xs: "column", sm: "row" },
+          alignItems: { xs: "stretch", sm: "center" },
+          spacing: resolved.dense ? 1 : 2,
+          sx: { mt: 1 },
+          children: [
+            defaultLocaleControl === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Box, { sx: { flexGrow: 1, minWidth: 0, width: { xs: "100%", sm: "auto" } }, children: defaultLocaleControl === "readOnly" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material13.Stack, { spacing: 0.5, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Typography, { variant: "caption", color: "text.secondary", children: translate("builder.defaultLocale") }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                import_material13.Chip,
+                {
+                  label: resolved.getLocaleLabel?.(schema.defaultLocale ?? "") ?? schema.defaultLocale ?? "",
+                  size: resolved.size
+                }
+              )
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              TextInput,
+              {
+                id: "mui-builder-default-locale",
+                label: translate("builder.defaultLocale"),
+                value: schema.defaultLocale ?? "",
+                disabled: readOnly,
+                onChange: (value) => {
+                  const result = actions.setDefaultLocale(value);
+                  if (result.success && value === currentLocale) onCurrentLocaleChange("");
+                }
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Box, { sx: { flexGrow: 1, minWidth: 0, width: { xs: "100%", sm: "auto" } }, onKeyDownCapture: handleAddKeyDown, children: hasLocaleSelector ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              Select2,
+              {
+                id: "mui-builder-new-locale",
+                label: translate("builder.localization.selectLocaleToAdd"),
+                value: newLocale,
+                options: filteredAvailableLocales.map((locale) => ({ value: locale.value, label: locale.label })),
+                ...candidateHelperText === void 0 ? {} : { helperText: candidateHelperText },
+                disabled: readOnly || localeLimitReached || noCandidateLocales,
+                onChange: setNewLocale
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              TextInput,
+              {
+                id: "mui-builder-new-locale",
+                label: translate("builder.addLocale"),
+                value: newLocale,
+                disabled: readOnly || localeLimitReached,
+                onChange: setNewLocale
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              import_material13.Box,
+              {
+                sx: {
+                  flexShrink: 0,
+                  minWidth: "max-content",
+                  ...localizationOptions.noWrapActions ?? true ? { whiteSpace: "nowrap" } : {}
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  Button2,
+                  {
+                    variant: "primary",
+                    action: "addLocale",
+                    noWrap: localizationOptions.noWrapActions ?? true,
+                    disabled: !canAddLocale,
+                    onClick: addLocale,
+                    children: translate("builder.addLocale")
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      localeLimitReached ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Typography, { variant: "body2", color: "text.secondary", children: translate("builder.localization.maxLocalesReached", { max: policy?.maxLocales ?? 0 }) }) : null,
       locales.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         import_material13.Tabs,
         {
@@ -1188,25 +1309,28 @@ function createMuiLocalizationSlot(options) {
           children: locales.map((locale) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             import_material13.Tab,
             {
+              id: `mui-builder-locale-tab-${locale}`,
               value: locale,
               label: resolved.getLocaleLabel?.(locale) ?? locale,
-              disabled: readOnly && locale !== currentLocale
+              disabled: readOnly && locale !== currentLocale,
+              sx: { whiteSpace: "nowrap" }
             },
             locale
           ))
         }
       ),
-      !translationAdapterAvailable ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      !translationAdapterAvailable ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Box, { sx: { minWidth: "max-content", whiteSpace: "nowrap" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         Button2,
         {
           variant: "secondary",
+          noWrap: localizationOptions.noWrapActions ?? true,
           disabled: readOnly || !editingLocaleConfigured || isTranslating,
           onClick: onAutoTranslate,
           children: isTranslating ? translate("builder.translating") : translate("builder.autoTranslate")
         }
-      ),
+      ) }),
       translationError === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ErrorMessage, { message: translationError }),
-      !editingLocaleConfigured ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Typography, { variant: "body2", color: "text.secondary", children: translate("builder.selectLocale") }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material13.Stack, { ...stackProps, spacing: resolved.dense ? 1 : 2, children: [
+      !editingLocaleConfigured ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Typography, { variant: "body2", color: "text.secondary", children: locales.length === 0 ? emptyStateMessage : translate("builder.selectLocale") }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material13.Stack, { ...stackProps, spacing: resolved.dense ? 1 : 2, children: [
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           TextInput,
           {
@@ -1240,10 +1364,10 @@ function createMuiLocalizationSlot(options) {
       ] })
     ] });
     const configured = locales.length > 0;
-    const defaultExpanded = resolved.localizationOptions?.defaultExpanded === "when-configured" ? configured : resolved.localizationOptions?.defaultExpanded ?? false;
+    const defaultExpanded = localizationOptions.defaultExpanded === "when-configured" ? configured : localizationOptions.defaultExpanded === "always" ? true : localizationOptions.defaultExpanded ?? false;
     if (collapsible) {
       return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_material13.Accordion, { ...resolved.muiSlotProps?.accordion, "data-mui-slot": "localization", defaultExpanded, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.AccordionSummary, { expandIcon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons_material2.ExpandMore, {}), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Typography, { variant: "subtitle1", fontWeight: "bold", children: translate("builder.localization") }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.AccordionSummary, { expandIcon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons_material2.ExpandMore, {}), children: title }),
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.AccordionDetails, { children: content })
       ] });
     }
@@ -1318,7 +1442,8 @@ function MuiFormBuilder({
   const contextValue = (0, import_react4.useMemo)(() => ({ options: contextOptions }), [contextOptions]);
   const components = (0, import_react4.useMemo)(() => ({ ...muiBuilderComponents, ...customComponents }), [customComponents]);
   const slots = (0, import_react4.useMemo)(() => ({ ...muiBuilderSlots, ...customSlots }), [customSlots]);
-  const resolvedSectionOrder = sectionOrder ?? contextOptions.layoutOptions?.sectionOrder;
+  const placement = contextOptions.localizationOptions?.placement;
+  const resolvedSectionOrder = sectionOrder ?? (placement === void 0 ? contextOptions.layoutOptions?.sectionOrder : MUI_LOCALIZATION_SECTION_ORDERS[placement]);
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MuiFormBuilderContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     import_react3.FormBuilder,
     {
@@ -1333,6 +1458,7 @@ function MuiFormBuilder({
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DEFAULT_MUI_SECTION_ORDER,
+  MUI_LOCALIZATION_SECTION_ORDERS,
   MuiButtonAdapter,
   MuiCheckboxAdapter,
   MuiErrorMessageAdapter,

package/dist/index.d.cts

@@ -1,17 +1,29 @@
-import { BuilderActionIconType, BuilderButtonProps, BuilderCheckboxProps, BuilderErrorMessageProps, BuilderFieldsetProps, BuilderIconButtonProps, BuilderSectionProps, BuilderSelectProps, BuilderTextAreaProps, BuilderTextInputProps, FormBuilderComponents, FormBuilderSlots, FormBuilderProps, BuilderFieldEditorSlotProps, BuilderLocalizationSlotProps, BuilderOptionEditorSlotProps, BuilderToolbarSlotProps } from '@form-engine-ts/react';
+import { BuilderActionIconType, LocalizationSummaryContext, BuilderButtonProps, BuilderCheckboxProps, BuilderErrorMessageProps, BuilderFieldsetProps, BuilderIconButtonProps, BuilderSectionProps, BuilderSelectProps, BuilderTextAreaProps, BuilderTextInputProps, FormBuilderComponents, FormBuilderSlots, FormBuilderProps, BuilderFieldEditorSlotProps, BuilderLocalizationSlotProps, BuilderOptionEditorSlotProps, BuilderToolbarSlotProps } from '@form-engine-ts/react';
 import * as react from 'react';
-import { ComponentType, ReactNode } from 'react';
+import { ReactNode, ComponentType } from 'react';
 import { CardProps, PaperProps, StackProps, AccordionProps } from '@mui/material';
 
 type BuilderSectionName = "basicSettings" | "completionMessage" | "questions" | "addQuestion" | "localization";
 type MuiButtonVariant = "contained" | "outlined" | "text";
+interface LocaleOptionItem {
+    readonly value: string;
+    readonly label: string;
+}
+type LocalizationSectionPlacement = "top" | "beforeQuestions" | "afterQuestions" | "bottom";
 interface MuiLayoutOptions {
     readonly sectionOrder?: readonly BuilderSectionName[];
 }
 interface MuiLocalizationOptions {
+    readonly availableLocales?: readonly (LocaleOptionItem | string)[];
+    readonly placement?: LocalizationSectionPlacement;
     readonly collapsible?: boolean;
-    readonly defaultExpanded?: boolean | "when-configured";
+    readonly defaultExpanded?: boolean | "when-configured" | "always";
+    readonly showSummary?: boolean;
+    readonly renderSummary?: (context: LocalizationSummaryContext) => ReactNode;
+    readonly emptyStateMessage?: string;
     readonly defaultLocaleControl?: "editable" | "readOnly" | "hidden";
+    readonly noWrapActions?: boolean;
+    readonly autoFocusNewTab?: boolean;
 }
 interface MuiFieldEditorOptions {
     readonly description?: "editable" | "readOnly" | "hidden";
@@ -63,6 +75,7 @@ interface ResolvedMuiAdapterOptions {
     readonly muiSlotProps?: MuiBuilderSlotProps;
 }
 declare const DEFAULT_MUI_SECTION_ORDER: readonly BuilderSectionName[];
+declare const MUI_LOCALIZATION_SECTION_ORDERS: Readonly<Record<LocalizationSectionPlacement, readonly BuilderSectionName[]>>;
 declare function resolveMuiAdapterOptions(options?: MuiAdapterOptions): ResolvedMuiAdapterOptions;
 
 declare function createMuiButtonAdapter(options?: MuiAdapterOptions): ComponentType<BuilderButtonProps>;
@@ -136,4 +149,4 @@ declare const MuiToolbarSlot: NonNullable<FormBuilderSlots["toolbar"]>;
 declare const muiBuilderSlots: FormBuilderSlots;
 declare function createMuiBuilderSlots(options?: MuiAdapterOptions, customOverrides?: Partial<FormBuilderSlots>): FormBuilderSlots;
 
-export { type BuilderSectionName, DEFAULT_MUI_SECTION_ORDER, type MuiAdapterOptions, type MuiBuilderOverrides, type MuiBuilderSlotProps, MuiButtonAdapter, type MuiButtonVariant, MuiCheckboxAdapter, MuiErrorMessageAdapter, type MuiFieldEditorOptions, MuiFieldEditorSlot, MuiFieldsetAdapter, MuiFormBuilder, MuiFormBuilderContext, type MuiFormBuilderContextValue, type MuiFormBuilderProps, MuiIconButtonAdapter, type MuiLayoutOptions, type MuiLocalizationOptions, MuiLocalizationSlot, MuiOptionEditorSlot, MuiSectionAdapter, MuiSelectAdapter, MuiTextAreaAdapter, MuiTextInputAdapter, MuiToolbarSlot, type ResolvedMuiAdapterOptions, createMuiBuilderComponents, createMuiBuilderProps, createMuiBuilderSlots, createMuiButtonAdapter, createMuiCheckboxAdapter, createMuiErrorMessageAdapter, createMuiFieldEditorSlot, createMuiFieldsetAdapter, createMuiIconButtonAdapter, createMuiLocalizationSlot, createMuiOptionEditorSlot, createMuiSectionAdapter, createMuiSelectAdapter, createMuiTextAreaAdapter, createMuiTextInputAdapter, createMuiToolbarSlot, mergeMuiAdapterOptions, muiBuilderComponents, muiBuilderSlots, muiDefaultIconResolver, resolveMuiAdapterOptions, useResolvedMuiAdapterOptions };
+export { type BuilderSectionName, DEFAULT_MUI_SECTION_ORDER, type LocaleOptionItem, type LocalizationSectionPlacement, MUI_LOCALIZATION_SECTION_ORDERS, type MuiAdapterOptions, type MuiBuilderOverrides, type MuiBuilderSlotProps, MuiButtonAdapter, type MuiButtonVariant, MuiCheckboxAdapter, MuiErrorMessageAdapter, type MuiFieldEditorOptions, MuiFieldEditorSlot, MuiFieldsetAdapter, MuiFormBuilder, MuiFormBuilderContext, type MuiFormBuilderContextValue, type MuiFormBuilderProps, MuiIconButtonAdapter, type MuiLayoutOptions, type MuiLocalizationOptions, MuiLocalizationSlot, MuiOptionEditorSlot, MuiSectionAdapter, MuiSelectAdapter, MuiTextAreaAdapter, MuiTextInputAdapter, MuiToolbarSlot, type ResolvedMuiAdapterOptions, createMuiBuilderComponents, createMuiBuilderProps, createMuiBuilderSlots, createMuiButtonAdapter, createMuiCheckboxAdapter, createMuiErrorMessageAdapter, createMuiFieldEditorSlot, createMuiFieldsetAdapter, createMuiIconButtonAdapter, createMuiLocalizationSlot, createMuiOptionEditorSlot, createMuiSectionAdapter, createMuiSelectAdapter, createMuiTextAreaAdapter, createMuiTextInputAdapter, createMuiToolbarSlot, mergeMuiAdapterOptions, muiBuilderComponents, muiBuilderSlots, muiDefaultIconResolver, resolveMuiAdapterOptions, useResolvedMuiAdapterOptions };

package/dist/index.d.ts

@@ -1,17 +1,29 @@
-import { BuilderActionIconType, BuilderButtonProps, BuilderCheckboxProps, BuilderErrorMessageProps, BuilderFieldsetProps, BuilderIconButtonProps, BuilderSectionProps, BuilderSelectProps, BuilderTextAreaProps, BuilderTextInputProps, FormBuilderComponents, FormBuilderSlots, FormBuilderProps, BuilderFieldEditorSlotProps, BuilderLocalizationSlotProps, BuilderOptionEditorSlotProps, BuilderToolbarSlotProps } from '@form-engine-ts/react';
+import { BuilderActionIconType, LocalizationSummaryContext, BuilderButtonProps, BuilderCheckboxProps, BuilderErrorMessageProps, BuilderFieldsetProps, BuilderIconButtonProps, BuilderSectionProps, BuilderSelectProps, BuilderTextAreaProps, BuilderTextInputProps, FormBuilderComponents, FormBuilderSlots, FormBuilderProps, BuilderFieldEditorSlotProps, BuilderLocalizationSlotProps, BuilderOptionEditorSlotProps, BuilderToolbarSlotProps } from '@form-engine-ts/react';
 import * as react from 'react';
-import { ComponentType, ReactNode } from 'react';
+import { ReactNode, ComponentType } from 'react';
 import { CardProps, PaperProps, StackProps, AccordionProps } from '@mui/material';
 
 type BuilderSectionName = "basicSettings" | "completionMessage" | "questions" | "addQuestion" | "localization";
 type MuiButtonVariant = "contained" | "outlined" | "text";
+interface LocaleOptionItem {
+    readonly value: string;
+    readonly label: string;
+}
+type LocalizationSectionPlacement = "top" | "beforeQuestions" | "afterQuestions" | "bottom";
 interface MuiLayoutOptions {
     readonly sectionOrder?: readonly BuilderSectionName[];
 }
 interface MuiLocalizationOptions {
+    readonly availableLocales?: readonly (LocaleOptionItem | string)[];
+    readonly placement?: LocalizationSectionPlacement;
     readonly collapsible?: boolean;
-    readonly defaultExpanded?: boolean | "when-configured";
+    readonly defaultExpanded?: boolean | "when-configured" | "always";
+    readonly showSummary?: boolean;
+    readonly renderSummary?: (context: LocalizationSummaryContext) => ReactNode;
+    readonly emptyStateMessage?: string;
     readonly defaultLocaleControl?: "editable" | "readOnly" | "hidden";
+    readonly noWrapActions?: boolean;
+    readonly autoFocusNewTab?: boolean;
 }
 interface MuiFieldEditorOptions {
     readonly description?: "editable" | "readOnly" | "hidden";
@@ -63,6 +75,7 @@ interface ResolvedMuiAdapterOptions {
     readonly muiSlotProps?: MuiBuilderSlotProps;
 }
 declare const DEFAULT_MUI_SECTION_ORDER: readonly BuilderSectionName[];
+declare const MUI_LOCALIZATION_SECTION_ORDERS: Readonly<Record<LocalizationSectionPlacement, readonly BuilderSectionName[]>>;
 declare function resolveMuiAdapterOptions(options?: MuiAdapterOptions): ResolvedMuiAdapterOptions;
 
 declare function createMuiButtonAdapter(options?: MuiAdapterOptions): ComponentType<BuilderButtonProps>;
@@ -136,4 +149,4 @@ declare const MuiToolbarSlot: NonNullable<FormBuilderSlots["toolbar"]>;
 declare const muiBuilderSlots: FormBuilderSlots;
 declare function createMuiBuilderSlots(options?: MuiAdapterOptions, customOverrides?: Partial<FormBuilderSlots>): FormBuilderSlots;
 
-export { type BuilderSectionName, DEFAULT_MUI_SECTION_ORDER, type MuiAdapterOptions, type MuiBuilderOverrides, type MuiBuilderSlotProps, MuiButtonAdapter, type MuiButtonVariant, MuiCheckboxAdapter, MuiErrorMessageAdapter, type MuiFieldEditorOptions, MuiFieldEditorSlot, MuiFieldsetAdapter, MuiFormBuilder, MuiFormBuilderContext, type MuiFormBuilderContextValue, type MuiFormBuilderProps, MuiIconButtonAdapter, type MuiLayoutOptions, type MuiLocalizationOptions, MuiLocalizationSlot, MuiOptionEditorSlot, MuiSectionAdapter, MuiSelectAdapter, MuiTextAreaAdapter, MuiTextInputAdapter, MuiToolbarSlot, type ResolvedMuiAdapterOptions, createMuiBuilderComponents, createMuiBuilderProps, createMuiBuilderSlots, createMuiButtonAdapter, createMuiCheckboxAdapter, createMuiErrorMessageAdapter, createMuiFieldEditorSlot, createMuiFieldsetAdapter, createMuiIconButtonAdapter, createMuiLocalizationSlot, createMuiOptionEditorSlot, createMuiSectionAdapter, createMuiSelectAdapter, createMuiTextAreaAdapter, createMuiTextInputAdapter, createMuiToolbarSlot, mergeMuiAdapterOptions, muiBuilderComponents, muiBuilderSlots, muiDefaultIconResolver, resolveMuiAdapterOptions, useResolvedMuiAdapterOptions };
+export { type BuilderSectionName, DEFAULT_MUI_SECTION_ORDER, type LocaleOptionItem, type LocalizationSectionPlacement, MUI_LOCALIZATION_SECTION_ORDERS, type MuiAdapterOptions, type MuiBuilderOverrides, type MuiBuilderSlotProps, MuiButtonAdapter, type MuiButtonVariant, MuiCheckboxAdapter, MuiErrorMessageAdapter, type MuiFieldEditorOptions, MuiFieldEditorSlot, MuiFieldsetAdapter, MuiFormBuilder, MuiFormBuilderContext, type MuiFormBuilderContextValue, type MuiFormBuilderProps, MuiIconButtonAdapter, type MuiLayoutOptions, type MuiLocalizationOptions, MuiLocalizationSlot, MuiOptionEditorSlot, MuiSectionAdapter, MuiSelectAdapter, MuiTextAreaAdapter, MuiTextInputAdapter, MuiToolbarSlot, type ResolvedMuiAdapterOptions, createMuiBuilderComponents, createMuiBuilderProps, createMuiBuilderSlots, createMuiButtonAdapter, createMuiCheckboxAdapter, createMuiErrorMessageAdapter, createMuiFieldEditorSlot, createMuiFieldsetAdapter, createMuiIconButtonAdapter, createMuiLocalizationSlot, createMuiOptionEditorSlot, createMuiSectionAdapter, createMuiSelectAdapter, createMuiTextAreaAdapter, createMuiTextInputAdapter, createMuiToolbarSlot, mergeMuiAdapterOptions, muiBuilderComponents, muiBuilderSlots, muiDefaultIconResolver, resolveMuiAdapterOptions, useResolvedMuiAdapterOptions };

package/dist/index.js

@@ -9,8 +9,15 @@ var DEFAULT_MUI_SECTION_ORDER = [
   "basicSettings",
   "questions",
   "addQuestion",
-  "localization"
+  "localization",
+  "completionMessage"
 ];
+var MUI_LOCALIZATION_SECTION_ORDERS = {
+  top: ["localization", "basicSettings", "completionMessage", "questions", "addQuestion"],
+  beforeQuestions: ["basicSettings", "localization", "completionMessage", "questions", "addQuestion"],
+  afterQuestions: ["basicSettings", "questions", "addQuestion", "localization", "completionMessage"],
+  bottom: ["basicSettings", "completionMessage", "questions", "addQuestion", "localization"]
+};
 function resolveMuiAdapterOptions(options = {}) {
   const buttonVariant = options.buttonVariant ?? "contained";
   return {
@@ -35,7 +42,14 @@ function resolveMuiAdapterOptions(options = {}) {
     localizationOptions: {
       collapsible: options.localizationOptions?.collapsible ?? false,
       defaultExpanded: options.localizationOptions?.defaultExpanded ?? false,
-      defaultLocaleControl: options.localizationOptions?.defaultLocaleControl ?? "editable"
+      showSummary: options.localizationOptions?.showSummary ?? false,
+      ...options.localizationOptions?.availableLocales === void 0 ? {} : { availableLocales: options.localizationOptions.availableLocales },
+      ...options.localizationOptions?.placement === void 0 ? {} : { placement: options.localizationOptions.placement },
+      ...options.localizationOptions?.renderSummary === void 0 ? {} : { renderSummary: options.localizationOptions.renderSummary },
+      ...options.localizationOptions?.emptyStateMessage === void 0 ? {} : { emptyStateMessage: options.localizationOptions.emptyStateMessage },
+      defaultLocaleControl: options.localizationOptions?.defaultLocaleControl ?? "editable",
+      noWrapActions: options.localizationOptions?.noWrapActions ?? true,
+      autoFocusNewTab: options.localizationOptions?.autoFocusNewTab ?? true
     },
     muiSlotProps: options.muiSlotProps ?? {}
   };
@@ -73,6 +87,7 @@ function createMuiButtonAdapter(options) {
     "aria-describedby": ariaDescribedBy,
     "aria-labelledby": ariaLabelledBy,
     onClick,
+    noWrap,
     children,
     title,
     variant,
@@ -98,6 +113,7 @@ function createMuiButtonAdapter(options) {
         color: variant === "danger" ? "error" : "primary",
         variant: resolved.buttonVariants?.[variant ?? "primary"] ?? resolved.buttonVariant,
         fullWidth: resolved.buttonFullWidth ?? false,
+        sx: { whiteSpace: noWrap === false ? "normal" : "nowrap" },
         children
       }
     );
@@ -126,6 +142,8 @@ function createMuiCheckboxAdapter(options) {
     label
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
+    const helperId = id === void 0 ? void 0 : ariaDescribedBy?.split(/\s+/u)[0] ?? `${id}-helper-text`;
+    const describedBy = ariaDescribedBy ?? (helperText === void 0 || helperText.length === 0 ? void 0 : helperId);
     return /* @__PURE__ */ jsxs(FormControl, { className, error: Boolean(error), required, disabled: disabled || readOnly, children: [
       /* @__PURE__ */ jsx2(
         FormControlLabel,
@@ -142,7 +160,7 @@ function createMuiCheckboxAdapter(options) {
               disabled: disabled || readOnly,
               inputProps: {
                 "aria-label": ariaLabel,
-                "aria-describedby": ariaDescribedBy,
+                "aria-describedby": describedBy,
                 "aria-labelledby": ariaLabelledBy
               },
               onChange: (event) => onChange(event.target.checked)
@@ -150,7 +168,7 @@ function createMuiCheckboxAdapter(options) {
           )
         }
       ),
-      helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ jsx2(FormHelperText, { id: ariaDescribedBy, children: helperText })
+      helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ jsx2(FormHelperText, { id: helperId, children: helperText })
     ] });
   };
 }
@@ -339,10 +357,13 @@ function createMuiSelectAdapter(options) {
     helperText,
     value,
     onChange,
+    onKeyDown,
     options: selectOptions
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
     const labelId = id === void 0 || label === void 0 ? void 0 : `${id}-label`;
+    const helperId = id === void 0 ? void 0 : ariaDescribedBy?.split(/\s+/u)[0] ?? `${id}-helper-text`;
+    const describedBy = ariaDescribedBy ?? (helperText === void 0 || helperText.length === 0 ? void 0 : helperId);
     const handleChange = (event) => onChange(event.target.value);
     return /* @__PURE__ */ jsxs4(
       FormControl2,
@@ -364,18 +385,20 @@ function createMuiSelectAdapter(options) {
               name,
               label,
               value,
+              disabled,
               onChange: handleChange,
+              onKeyDown,
               required,
               readOnly,
               inputProps: {
                 "aria-label": ariaLabel,
-                "aria-describedby": ariaDescribedBy,
+                "aria-describedby": describedBy,
                 "aria-labelledby": ariaLabelledBy
               },
               children: selectOptions.map((option) => /* @__PURE__ */ jsx7(MenuItem, { value: option.value, disabled: option.disabled, children: option.label }, option.value))
             }
           ),
-          helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ jsx7(FormHelperText2, { id: ariaDescribedBy, children: helperText })
+          helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ jsx7(FormHelperText2, { id: helperId, children: helperText })
         ]
       }
     );
@@ -462,6 +485,7 @@ function createMuiTextInputAdapter(options) {
     helperText,
     value,
     onChange,
+    onKeyDown,
     placeholder,
     maxLength,
     inputMode,
@@ -503,7 +527,8 @@ function createMuiTextInputAdapter(options) {
         fullWidth: resolved.inputFullWidth ?? resolved.fullWidth,
         size: resolved.size,
         variant: resolved.variant,
-        onChange: (event) => onChange(event.currentTarget.value)
+        onChange: (event) => onChange(event.currentTarget.value),
+        onKeyDown
       }
     );
   };
@@ -1026,9 +1051,32 @@ var MuiFieldEditorSlot = createMuiFieldEditorSlot();
 
 // src/slots/Localization.tsx
 import { ExpandMore } from "@mui/icons-material";
-import { Accordion, AccordionDetails, AccordionSummary, Box as Box2, Chip, Stack as Stack4, Tab, Tabs, Typography as Typography4 } from "@mui/material";
-import { useState } from "react";
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Alert as Alert2,
+  Box as Box2,
+  Chip,
+  Stack as Stack4,
+  Tab,
+  Tabs,
+  Typography as Typography4
+} from "@mui/material";
+import { useEffect, useState } from "react";
 import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+var DEFAULT_EMPTY_STATE_MESSAGE = "No translation locales have been added yet. Select a language from the dropdown above to add one.";
+function normalizeLocaleOptions(options, getLocaleLabel) {
+  const seen = /* @__PURE__ */ new Set();
+  const normalized = [];
+  for (const item of options) {
+    const value = typeof item === "string" ? item : item.value;
+    if (value.length === 0 || seen.has(value)) continue;
+    seen.add(value);
+    normalized.push({ value, label: typeof item === "string" ? getLocaleLabel?.(value) ?? value : item.label });
+  }
+  return normalized;
+}
 function createMuiLocalizationSlot(options) {
   return function MuiLocalization({
     schema,
@@ -1047,6 +1095,7 @@ function createMuiLocalizationSlot(options) {
     const resolved = useResolvedMuiAdapterOptions(options);
     const { Button: Button2, ErrorMessage, Select: Select2, TextArea, TextInput } = components;
     const [newLocale, setNewLocale] = useState("");
+    const [pendingFocusLocale, setPendingFocusLocale] = useState(null);
     const locales = Array.from(
       new Set((schema.supportedLocales ?? []).filter((locale) => locale !== schema.defaultLocale))
     );
@@ -1055,75 +1104,157 @@ function createMuiLocalizationSlot(options) {
       ...schema.defaultLocale === void 0 ? [] : [schema.defaultLocale],
       ...schema.supportedLocales ?? []
     ]);
-    const availableAllowedLocales = policy?.allowedLocales?.filter((locale) => !registeredLocales.has(locale));
+    const localizationOptions = resolved.localizationOptions ?? {};
+    const availableLocaleSource = localizationOptions.availableLocales;
+    const availableLocaleOptions = availableLocaleSource === void 0 ? policy?.allowedLocales?.map((value) => ({
+      value,
+      label: resolved.getLocaleLabel?.(value) ?? value
+    })) : normalizeLocaleOptions(availableLocaleSource, resolved.getLocaleLabel);
+    const filteredAvailableLocales = availableLocaleOptions?.filter(
+      (locale) => !registeredLocales.has(locale.value) && (policy?.allowedLocales === void 0 || policy.allowedLocales.includes(locale.value))
+    );
+    const hasLocaleSelector = filteredAvailableLocales !== void 0;
     const localeLimitReached = policy?.maxLocales !== void 0 && registeredLocales.size >= policy.maxLocales;
     const normalizedLocale = newLocale.trim();
+    const selectedLocaleAvailable = !hasLocaleSelector || filteredAvailableLocales.some((locale) => locale.value === normalizedLocale);
     const localeAllowed = policy?.allowedLocales === void 0 || policy.allowedLocales.includes(normalizedLocale);
-    const canAddLocale = !readOnly && normalizedLocale.length > 0 && localeAllowed && !registeredLocales.has(normalizedLocale) && !localeLimitReached;
+    const canAddLocale = !readOnly && normalizedLocale.length > 0 && selectedLocaleAvailable && localeAllowed && !registeredLocales.has(normalizedLocale) && !localeLimitReached;
     const handleTabChange = (_event, value) => onCurrentLocaleChange(value);
     const addLocale = () => {
       if (!canAddLocale) return;
       const result = actions.addLocale(normalizedLocale);
       if (!result.success) return;
       onCurrentLocaleChange(normalizedLocale);
+      if (localizationOptions.autoFocusNewTab ?? true) setPendingFocusLocale(normalizedLocale);
       setNewLocale("");
     };
+    const handleAddKeyDown = (event) => {
+      if (event.key !== "Enter" || !canAddLocale) return;
+      event.preventDefault();
+      event.stopPropagation();
+      addLocale();
+    };
+    useEffect(() => {
+      if (pendingFocusLocale === null || currentLocale !== pendingFocusLocale) return;
+      const tab = document.getElementById(`mui-builder-locale-tab-${pendingFocusLocale}`);
+      if (tab === null) return;
+      tab.focus();
+      setPendingFocusLocale(null);
+    }, [currentLocale, pendingFocusLocale]);
     const stackProps = resolved.muiSlotProps?.stack;
-    const collapsible = resolved.localizationOptions?.collapsible ?? false;
-    const defaultLocaleControl = resolved.localizationOptions?.defaultLocaleControl ?? "editable";
+    const collapsible = localizationOptions.collapsible ?? false;
+    const defaultLocaleControl = localizationOptions.defaultLocaleControl ?? "editable";
+    const configuredTranslationLocales = locales.filter((locale) => locale !== schema.defaultLocale);
+    const configuredLocales = [
+      ...schema.defaultLocale === void 0 ? [] : [schema.defaultLocale],
+      ...configuredTranslationLocales
+    ];
+    const legacySummaryLabel = configuredTranslationLocales.length === 0 ? "Translations not configured" : `${configuredLocales.length} ${configuredLocales.length === 1 ? "language" : "languages"} configured: ${configuredLocales.map(
+      (locale) => locale === schema.defaultLocale ? `${resolved.getLocaleLabel?.(locale) ?? locale} (default)` : resolved.getLocaleLabel?.(locale) ?? locale
+    ).join(", ")}`;
+    const emptyStateMessage = localizationOptions.emptyStateMessage === void 0 ? DEFAULT_EMPTY_STATE_MESSAGE : translate(localizationOptions.emptyStateMessage);
+    const summaryContext = {
+      defaultLocale: schema.defaultLocale ?? "",
+      supportedLocales: schema.supportedLocales ?? [],
+      totalLocales: registeredLocales.size
+    };
+    const summary = localizationOptions.renderSummary === void 0 ? localizationOptions.showSummary ? configuredTranslationLocales.length > 0 ? /* @__PURE__ */ jsx14(Alert2, { severity: "success", sx: { mb: 2 }, children: translate("builder.localization.localesConfiguredSummary", {
+      count: schema.supportedLocales?.length ?? 0
+    }) }) : /* @__PURE__ */ jsx14(Alert2, { severity: "info", sx: { mb: 2 }, children: translate("builder.localization.noLocalesConfigured") }) : null : localizationOptions.renderSummary(summaryContext);
+    const title = /* @__PURE__ */ jsxs8(Stack4, { alignItems: "center", direction: "row", spacing: 1, children: [
+      /* @__PURE__ */ jsx14(Typography4, { variant: "subtitle1", fontWeight: "bold", children: translate("builder.localization") }),
+      localizationOptions.renderSummary === void 0 && localizationOptions.showSummary && configuredTranslationLocales.length > 0 ? /* @__PURE__ */ jsx14(
+        Chip,
+        {
+          label: legacySummaryLabel,
+          size: "small",
+          color: configuredTranslationLocales.length > 0 ? "primary" : "default",
+          variant: "outlined"
+        }
+      ) : null
+    ] });
+    const noCandidateLocales = hasLocaleSelector && filteredAvailableLocales.length === 0;
+    const candidateHelperText = localeLimitReached ? void 0 : noCandidateLocales ? translate("builder.localization.allLocalesAdded") : void 0;
     const content = /* @__PURE__ */ jsxs8(Stack4, { ...stackProps, spacing: resolved.dense ? 1 : 2, children: [
-      !collapsible ? /* @__PURE__ */ jsx14(Typography4, { variant: "subtitle1", fontWeight: "bold", children: translate("builder.localization") }) : null,
-      /* @__PURE__ */ jsxs8(Stack4, { ...stackProps, direction: { xs: "column", sm: "row" }, spacing: resolved.dense ? 1 : 2, children: [
-        defaultLocaleControl === "hidden" ? null : defaultLocaleControl === "readOnly" ? /* @__PURE__ */ jsxs8(Stack4, { spacing: 0.5, children: [
-          /* @__PURE__ */ jsx14(Typography4, { variant: "caption", color: "text.secondary", children: translate("builder.defaultLocale") }),
-          /* @__PURE__ */ jsx14(
-            Chip,
-            {
-              label: resolved.getLocaleLabel?.(schema.defaultLocale ?? "") ?? schema.defaultLocale ?? "",
-              size: resolved.size
-            }
-          )
-        ] }) : /* @__PURE__ */ jsx14(
-          TextInput,
-          {
-            id: "mui-builder-default-locale",
-            label: translate("builder.defaultLocale"),
-            value: schema.defaultLocale ?? "",
-            disabled: readOnly,
-            onChange: (value) => {
-              const result = actions.setDefaultLocale(value);
-              if (result.success && value === currentLocale) onCurrentLocaleChange("");
-            }
-          }
-        ),
-        availableAllowedLocales === void 0 ? /* @__PURE__ */ jsx14(
-          TextInput,
-          {
-            id: "mui-builder-new-locale",
-            label: translate("builder.addLocale"),
-            value: newLocale,
-            disabled: readOnly || localeLimitReached,
-            onChange: setNewLocale
-          }
-        ) : /* @__PURE__ */ jsx14(
-          Select2,
-          {
-            id: "mui-builder-new-locale",
-            label: translate("builder.addLocale"),
-            value: newLocale,
-            options: [
-              { value: "", label: "\u2014" },
-              ...availableAllowedLocales.map((locale) => ({
-                value: locale,
-                label: resolved.getLocaleLabel?.(locale) ?? locale
-              }))
-            ],
-            disabled: readOnly || localeLimitReached || availableAllowedLocales.length === 0,
-            onChange: setNewLocale
-          }
-        ),
-        /* @__PURE__ */ jsx14(Button2, { variant: "primary", action: "addLocale", disabled: !canAddLocale, onClick: addLocale, children: translate("builder.addLocale") })
-      ] }),
+      !collapsible ? title : null,
+      summary,
+      /* @__PURE__ */ jsxs8(
+        Stack4,
+        {
+          ...stackProps,
+          direction: { xs: "column", sm: "row" },
+          alignItems: { xs: "stretch", sm: "center" },
+          spacing: resolved.dense ? 1 : 2,
+          sx: { mt: 1 },
+          children: [
+            defaultLocaleControl === "hidden" ? null : /* @__PURE__ */ jsx14(Box2, { sx: { flexGrow: 1, minWidth: 0, width: { xs: "100%", sm: "auto" } }, children: defaultLocaleControl === "readOnly" ? /* @__PURE__ */ jsxs8(Stack4, { spacing: 0.5, children: [
+              /* @__PURE__ */ jsx14(Typography4, { variant: "caption", color: "text.secondary", children: translate("builder.defaultLocale") }),
+              /* @__PURE__ */ jsx14(
+                Chip,
+                {
+                  label: resolved.getLocaleLabel?.(schema.defaultLocale ?? "") ?? schema.defaultLocale ?? "",
+                  size: resolved.size
+                }
+              )
+            ] }) : /* @__PURE__ */ jsx14(
+              TextInput,
+              {
+                id: "mui-builder-default-locale",
+                label: translate("builder.defaultLocale"),
+                value: schema.defaultLocale ?? "",
+                disabled: readOnly,
+                onChange: (value) => {
+                  const result = actions.setDefaultLocale(value);
+                  if (result.success && value === currentLocale) onCurrentLocaleChange("");
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsx14(Box2, { sx: { flexGrow: 1, minWidth: 0, width: { xs: "100%", sm: "auto" } }, onKeyDownCapture: handleAddKeyDown, children: hasLocaleSelector ? /* @__PURE__ */ jsx14(
+              Select2,
+              {
+                id: "mui-builder-new-locale",
+                label: translate("builder.localization.selectLocaleToAdd"),
+                value: newLocale,
+                options: filteredAvailableLocales.map((locale) => ({ value: locale.value, label: locale.label })),
+                ...candidateHelperText === void 0 ? {} : { helperText: candidateHelperText },
+                disabled: readOnly || localeLimitReached || noCandidateLocales,
+                onChange: setNewLocale
+              }
+            ) : /* @__PURE__ */ jsx14(
+              TextInput,
+              {
+                id: "mui-builder-new-locale",
+                label: translate("builder.addLocale"),
+                value: newLocale,
+                disabled: readOnly || localeLimitReached,
+                onChange: setNewLocale
+              }
+            ) }),
+            /* @__PURE__ */ jsx14(
+              Box2,
+              {
+                sx: {
+                  flexShrink: 0,
+                  minWidth: "max-content",
+                  ...localizationOptions.noWrapActions ?? true ? { whiteSpace: "nowrap" } : {}
+                },
+                children: /* @__PURE__ */ jsx14(
+                  Button2,
+                  {
+                    variant: "primary",
+                    action: "addLocale",
+                    noWrap: localizationOptions.noWrapActions ?? true,
+                    disabled: !canAddLocale,
+                    onClick: addLocale,
+                    children: translate("builder.addLocale")
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      localeLimitReached ? /* @__PURE__ */ jsx14(Typography4, { variant: "body2", color: "text.secondary", children: translate("builder.localization.maxLocalesReached", { max: policy?.maxLocales ?? 0 }) }) : null,
       locales.length === 0 ? null : /* @__PURE__ */ jsx14(
         Tabs,
         {
@@ -1135,25 +1266,28 @@ function createMuiLocalizationSlot(options) {
           children: locales.map((locale) => /* @__PURE__ */ jsx14(
             Tab,
             {
+              id: `mui-builder-locale-tab-${locale}`,
               value: locale,
               label: resolved.getLocaleLabel?.(locale) ?? locale,
-              disabled: readOnly && locale !== currentLocale
+              disabled: readOnly && locale !== currentLocale,
+              sx: { whiteSpace: "nowrap" }
             },
             locale
           ))
         }
       ),
-      !translationAdapterAvailable ? null : /* @__PURE__ */ jsx14(
+      !translationAdapterAvailable ? null : /* @__PURE__ */ jsx14(Box2, { sx: { minWidth: "max-content", whiteSpace: "nowrap" }, children: /* @__PURE__ */ jsx14(
         Button2,
         {
           variant: "secondary",
+          noWrap: localizationOptions.noWrapActions ?? true,
           disabled: readOnly || !editingLocaleConfigured || isTranslating,
           onClick: onAutoTranslate,
           children: isTranslating ? translate("builder.translating") : translate("builder.autoTranslate")
         }
-      ),
+      ) }),
       translationError === void 0 ? null : /* @__PURE__ */ jsx14(ErrorMessage, { message: translationError }),
-      !editingLocaleConfigured ? /* @__PURE__ */ jsx14(Typography4, { variant: "body2", color: "text.secondary", children: translate("builder.selectLocale") }) : /* @__PURE__ */ jsxs8(Stack4, { ...stackProps, spacing: resolved.dense ? 1 : 2, children: [
+      !editingLocaleConfigured ? /* @__PURE__ */ jsx14(Typography4, { variant: "body2", color: "text.secondary", children: locales.length === 0 ? emptyStateMessage : translate("builder.selectLocale") }) : /* @__PURE__ */ jsxs8(Stack4, { ...stackProps, spacing: resolved.dense ? 1 : 2, children: [
         /* @__PURE__ */ jsx14(
           TextInput,
           {
@@ -1187,10 +1321,10 @@ function createMuiLocalizationSlot(options) {
       ] })
     ] });
     const configured = locales.length > 0;
-    const defaultExpanded = resolved.localizationOptions?.defaultExpanded === "when-configured" ? configured : resolved.localizationOptions?.defaultExpanded ?? false;
+    const defaultExpanded = localizationOptions.defaultExpanded === "when-configured" ? configured : localizationOptions.defaultExpanded === "always" ? true : localizationOptions.defaultExpanded ?? false;
     if (collapsible) {
       return /* @__PURE__ */ jsxs8(Accordion, { ...resolved.muiSlotProps?.accordion, "data-mui-slot": "localization", defaultExpanded, children: [
-        /* @__PURE__ */ jsx14(AccordionSummary, { expandIcon: /* @__PURE__ */ jsx14(ExpandMore, {}), children: /* @__PURE__ */ jsx14(Typography4, { variant: "subtitle1", fontWeight: "bold", children: translate("builder.localization") }) }),
+        /* @__PURE__ */ jsx14(AccordionSummary, { expandIcon: /* @__PURE__ */ jsx14(ExpandMore, {}), children: title }),
         /* @__PURE__ */ jsx14(AccordionDetails, { children: content })
       ] });
     }
@@ -1267,7 +1401,8 @@ function MuiFormBuilder({
   const contextValue = useMemo(() => ({ options: contextOptions }), [contextOptions]);
   const components = useMemo(() => ({ ...muiBuilderComponents, ...customComponents }), [customComponents]);
   const slots = useMemo(() => ({ ...muiBuilderSlots, ...customSlots }), [customSlots]);
-  const resolvedSectionOrder = sectionOrder ?? contextOptions.layoutOptions?.sectionOrder;
+  const placement = contextOptions.localizationOptions?.placement;
+  const resolvedSectionOrder = sectionOrder ?? (placement === void 0 ? contextOptions.layoutOptions?.sectionOrder : MUI_LOCALIZATION_SECTION_ORDERS[placement]);
   return /* @__PURE__ */ jsx15(MuiFormBuilderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx15(
     FormBuilder,
     {
@@ -1281,6 +1416,7 @@ function MuiFormBuilder({
 }
 export {
   DEFAULT_MUI_SECTION_ORDER,
+  MUI_LOCALIZATION_SECTION_ORDERS,
   MuiButtonAdapter,
   MuiCheckboxAdapter,
   MuiErrorMessageAdapter,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@form-engine-ts/mui",
-  "version": "2.9.5",
+  "version": "3.0.0",
   "publishConfig": {
     "access": "public"
   },
@@ -46,8 +46,8 @@
     "@mui/material": "^6.0.0 || ^7.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@form-engine-ts/core": "2.9.5",
-    "@form-engine-ts/react": "2.9.5"
+    "@form-engine-ts/core": "3.0.0",
+    "@form-engine-ts/react": "3.0.0"
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
@@ -58,8 +58,8 @@
     "@types/react-dom": "^19.2.4",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "@form-engine-ts/core": "2.9.5",
-    "@form-engine-ts/react": "2.9.5"
+    "@form-engine-ts/core": "3.0.0",
+    "@form-engine-ts/react": "3.0.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts --clean --external @emotion/react --external @emotion/styled --external @form-engine-ts/core --external @form-engine-ts/react --external @mui/icons-material --external @mui/material --external react --external react-dom",