@form-engine-ts/mui 2.9.6 → 3.1.0

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,
@@ -55,6 +56,7 @@ __export(index_exports, {
   mergeMuiAdapterOptions: () => mergeMuiAdapterOptions,
   muiBuilderComponents: () => muiBuilderComponents,
   muiBuilderSlots: () => muiBuilderSlots,
+  muiDefaultFieldTypeIcon: () => muiDefaultFieldTypeIcon,
   muiDefaultIconResolver: () => muiDefaultIconResolver,
   resolveMuiAdapterOptions: () => resolveMuiAdapterOptions,
   useResolvedMuiAdapterOptions: () => useResolvedMuiAdapterOptions
@@ -72,8 +74,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 {
@@ -99,8 +108,13 @@ function resolveMuiAdapterOptions(options = {}) {
       collapsible: options.localizationOptions?.collapsible ?? false,
       defaultExpanded: options.localizationOptions?.defaultExpanded ?? false,
       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"
+      defaultLocaleControl: options.localizationOptions?.defaultLocaleControl ?? "editable",
+      noWrapActions: options.localizationOptions?.noWrapActions ?? true,
+      autoFocusNewTab: options.localizationOptions?.autoFocusNewTab ?? true
     },
     muiSlotProps: options.muiSlotProps ?? {}
   };
@@ -138,6 +152,7 @@ function createMuiButtonAdapter(options) {
     "aria-describedby": ariaDescribedBy,
     "aria-labelledby": ariaLabelledBy,
     onClick,
+    noWrap,
     children,
     title,
     variant,
@@ -145,9 +160,11 @@ function createMuiButtonAdapter(options) {
     targetId
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
+    const buttonSlotProps = resolved.muiSlotProps?.button;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_material.Button,
       {
+        ...buttonSlotProps,
         id,
         className,
         type: "button",
@@ -161,9 +178,9 @@ function createMuiButtonAdapter(options) {
         "data-target-id": targetId,
         onClick,
         color: variant === "danger" ? "error" : "primary",
-        variant: resolved.buttonVariants?.[variant ?? "primary"] ?? resolved.buttonVariant,
+        variant: buttonSlotProps?.variant ?? resolved.buttonVariants?.[variant ?? "primary"] ?? resolved.buttonVariant,
         fullWidth: resolved.buttonFullWidth ?? false,
-        sx: { whiteSpace: "nowrap" },
+        sx: { whiteSpace: noWrap === false ? "normal" : "nowrap" },
         children
       }
     );
@@ -192,6 +209,7 @@ function createMuiCheckboxAdapter(options) {
     label
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
+    const checkboxSlotProps = resolved.muiSlotProps?.checkbox;
     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: [
@@ -202,9 +220,10 @@ function createMuiCheckboxAdapter(options) {
           control: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             import_material2.Checkbox,
             {
+              ...checkboxSlotProps,
               id,
               name,
-              size: resolved.size,
+              size: checkboxSlotProps?.size ?? resolved.size,
               checked,
               required,
               disabled: disabled || readOnly,
@@ -316,16 +335,18 @@ function createMuiIconButtonAdapter(options) {
     title
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
+    const iconButtonSlotProps = resolved.muiSlotProps?.iconButton;
     const actionLabel = actionType === void 0 ? "Action" : resolved.getActionLabel?.(actionType) ?? FALLBACK_ACTION_LABELS[actionType];
     const tooltip = title ?? actionLabel;
     const color = actionType === "delete" ? "error" : actionType === "add" ? "primary" : "default";
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.Tooltip, { title: tooltip, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       import_material5.IconButton,
       {
+        ...iconButtonSlotProps,
         id,
         className,
         type: "button",
-        size: resolved.size,
+        size: iconButtonSlotProps?.size ?? resolved.size,
         color,
         disabled: disabled || readOnly,
         "aria-label": ariaLabel ?? tooltip,
@@ -391,6 +412,9 @@ var MuiSectionAdapter = createMuiSectionAdapter();
 // src/adapters/Select.tsx
 var import_material7 = require("@mui/material");
 var import_jsx_runtime7 = require("react/jsx-runtime");
+function normalizeOptions(options) {
+  return options.map((option) => typeof option === "string" ? { value: option, label: option } : option);
+}
 function createMuiSelectAdapter(options) {
   return function MuiSelect({
     id,
@@ -407,13 +431,19 @@ function createMuiSelectAdapter(options) {
     helperText,
     value,
     onChange,
-    options: selectOptions
+    onKeyDown,
+    options: selectOptions,
+    renderOption,
+    renderValue
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
+    const normalizedOptions = normalizeOptions(selectOptions);
+    const selectSlotProps = resolved.muiSlotProps?.select;
+    const menuProps = { ...selectSlotProps?.MenuProps, ...resolved.muiSlotProps?.selectMenu };
     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);
+    const handleChange = (event) => onChange(String(event.target.value));
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       import_material7.FormControl,
       {
@@ -429,20 +459,39 @@ function createMuiSelectAdapter(options) {
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             import_material7.Select,
             {
+              ...selectSlotProps,
               id,
               labelId,
               name,
               label,
               value,
+              disabled,
               onChange: handleChange,
+              onKeyDown,
               required,
               readOnly,
+              variant: selectSlotProps?.variant ?? resolved.variant,
+              ...Object.keys(menuProps).length === 0 ? {} : { MenuProps: menuProps },
+              renderValue: (selected) => {
+                const selectedValue = typeof selected === "string" ? selected : String(selected ?? "");
+                const option = normalizedOptions.find((candidate) => candidate.value === selectedValue);
+                if (renderValue !== void 0) return renderValue(option);
+                if (option === void 0) return selectedValue;
+                return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_material7.Box, { display: "flex", alignItems: "center", gap: 0.75, children: [
+                  option.icon,
+                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: option.label })
+                ] });
+              },
               inputProps: {
+                ...selectSlotProps?.inputProps,
                 "aria-label": ariaLabel,
                 "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))
+              children: normalizedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.MenuItem, { value: option.value, disabled: option.disabled, children: renderOption === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+                option.icon === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.ListItemIcon, { sx: { minWidth: 32 }, children: option.icon }),
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.ListItemText, { primary: option.label, secondary: option.description })
+              ] }) : renderOption(option) }, option.value))
             }
           ),
           helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.FormHelperText, { id: helperId, children: helperText })
@@ -477,9 +526,11 @@ function createMuiTextAreaAdapter(options) {
     rows
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
+    const textFieldSlotProps = resolved.muiSlotProps?.textField;
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       import_material8.TextField,
       {
+        ...textFieldSlotProps,
         id,
         className,
         name,
@@ -505,7 +556,7 @@ function createMuiTextAreaAdapter(options) {
         placeholder,
         fullWidth: resolved.inputFullWidth ?? resolved.fullWidth,
         size: resolved.size,
-        variant: resolved.variant,
+        variant: textFieldSlotProps?.variant ?? resolved.variant,
         onChange: (event) => onChange(event.currentTarget.value)
       }
     );
@@ -532,6 +583,7 @@ function createMuiTextInputAdapter(options) {
     helperText,
     value,
     onChange,
+    onKeyDown,
     placeholder,
     maxLength,
     inputMode,
@@ -541,9 +593,11 @@ function createMuiTextInputAdapter(options) {
     step
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
+    const textFieldSlotProps = resolved.muiSlotProps?.textField;
     return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       import_material9.TextField,
       {
+        ...textFieldSlotProps,
         id,
         className,
         name,
@@ -572,8 +626,9 @@ function createMuiTextInputAdapter(options) {
         placeholder,
         fullWidth: resolved.inputFullWidth ?? resolved.fullWidth,
         size: resolved.size,
-        variant: resolved.variant,
-        onChange: (event) => onChange(event.currentTarget.value)
+        variant: textFieldSlotProps?.variant ?? resolved.variant,
+        onChange: (event) => onChange(event.currentTarget.value),
+        onKeyDown
       }
     );
   };
@@ -605,6 +660,26 @@ function muiDefaultIconResolver(actionType) {
       return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons_material.DragHandle, { fontSize: "small" });
   }
 }
+function muiDefaultFieldTypeIcon(type) {
+  switch (type) {
+    case "text":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons_material.TextFields, { fontSize: "small" });
+    case "textarea":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons_material.Subject, { fontSize: "small" });
+    case "number":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons_material.Numbers, { fontSize: "small" });
+    case "rating":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons_material.Star, { fontSize: "small" });
+    case "select":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons_material.ArrowDropDown, { fontSize: "small" });
+    case "multi-select":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons_material.CheckBox, { fontSize: "small" });
+    case "checkbox":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons_material.CheckBox, { fontSize: "small" });
+    case "radio":
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_icons_material.RadioButtonChecked, { fontSize: "small" });
+  }
+}
 
 // src/components.ts
 function isAdapterOptions(value) {
@@ -621,7 +696,8 @@ function buildMuiBuilderComponents(options) {
     Section: createMuiSectionAdapter(options),
     Fieldset: createMuiFieldsetAdapter(options),
     ErrorMessage: createMuiErrorMessageAdapter(options),
-    renderIcon: muiDefaultIconResolver
+    renderIcon: muiDefaultIconResolver,
+    renderFieldTypeIcon: muiDefaultFieldTypeIcon
   };
 }
 var muiBuilderComponents = {
@@ -634,7 +710,8 @@ var muiBuilderComponents = {
   Section: MuiSectionAdapter,
   Fieldset: MuiFieldsetAdapter,
   ErrorMessage: MuiErrorMessageAdapter,
-  renderIcon: muiDefaultIconResolver
+  renderIcon: muiDefaultIconResolver,
+  renderFieldTypeIcon: muiDefaultFieldTypeIcon
 };
 function createMuiBuilderComponents(optionsOrOverrides = {}, customOverrides) {
   const options = isAdapterOptions(optionsOrOverrides) ? optionsOrOverrides : void 0;
@@ -643,6 +720,7 @@ function createMuiBuilderComponents(optionsOrOverrides = {}, customOverrides) {
 }
 
 // src/slots/FieldEditor.tsx
+var import_core = require("@form-engine-ts/core");
 var import_material12 = require("@mui/material");
 
 // src/slots/OptionEditor.tsx
@@ -789,16 +867,7 @@ var MuiToolbarSlot = createMuiToolbarSlot();
 
 // src/slots/FieldEditor.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var FIELD_TYPES = [
-  "text",
-  "textarea",
-  "number",
-  "rating",
-  "select",
-  "multi-select",
-  "checkbox",
-  "radio"
-];
+var FIELD_TYPES = import_core.DEFAULT_FIELD_TYPE_DEFINITIONS.map((definition) => definition.type);
 function isFieldType(value) {
   return FIELD_TYPES.some((type) => type === value);
 }
@@ -837,7 +906,8 @@ function createMuiFieldEditorSlot(options) {
     readOnly,
     actions,
     components,
-    translate
+    translate,
+    slots
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
     const { Button: Button2, Checkbox: Checkbox2, Select: Select2, TextArea, TextInput } = components;
@@ -848,6 +918,11 @@ function createMuiFieldEditorSlot(options) {
     const conditionSource = conditionSources.find((source) => source.id === condition?.questionId);
     const descriptionMode = resolved.fieldEditorOptions?.description ?? "editable";
     const titleErrorId = field.title.trim().length === 0 ? `mui-field-${field.id}-title-error` : void 0;
+    const FieldTypeSelect = slots?.fieldTypeSelect;
+    const FieldEditorHeader = slots?.fieldEditorHeader;
+    const changeFieldType = (nextType) => {
+      if (allowedTypes.includes(nextType)) actions.changeFieldType(field.id, nextType);
+    };
     return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       import_material12.Card,
       {
@@ -856,26 +931,28 @@ function createMuiFieldEditorSlot(options) {
         variant: "outlined",
         sx: resolved.muiSlotProps?.card?.sx ?? { mb: resolved.dense ? 1 : 2, p: resolved.dense ? 1.5 : 2 },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            Toolbar,
-            {
-              schema,
-              translate,
-              kind: "field",
-              targetId: field.id,
-              index,
-              total: schema.fields.length,
-              title: field.title,
-              onMoveUp: () => actions.moveField(field.id, index - 1),
-              onMoveDown: () => actions.moveField(field.id, index + 1),
-              onRemove: () => actions.removeField(field.id),
-              readOnly,
-              actions,
-              components
-            }
-          ),
+          FieldEditorHeader === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              Toolbar,
+              {
+                schema,
+                translate,
+                kind: "field",
+                targetId: field.id,
+                index,
+                total: schema.fields.length,
+                title: field.title,
+                onMoveUp: () => actions.moveField(field.id, index - 1),
+                onMoveDown: () => actions.moveField(field.id, index + 1),
+                onRemove: () => actions.removeField(field.id),
+                readOnly,
+                actions,
+                components
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material12.Typography, { variant: "subtitle1", fontWeight: "bold", children: field.title })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FieldEditorHeader, { field, index, totalFields: schema.fields.length, actions }),
           /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material12.Stack, { ...resolved.muiSlotProps?.stack, spacing: resolved.dense ? 1 : 2, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material12.Typography, { variant: "subtitle1", fontWeight: "bold", children: field.title }),
             /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material12.Stack, { direction: { xs: "column", md: "row" }, spacing: resolved.dense ? 1 : 2, children: [
               /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 TextInput,
@@ -892,22 +969,37 @@ function createMuiFieldEditorSlot(options) {
                   onChange: (value) => actions.setSourceText({ kind: "field", id: field.id }, "title", value)
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              FieldTypeSelect === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 Select2,
                 {
                   id: `mui-field-${field.id}-type`,
                   name: `fields.${field.id}.type`,
                   label: translate("builder.type"),
                   value: allowedTypes.includes(field.type) ? field.type : "",
-                  options: FIELD_TYPES.filter((type) => allowedTypes.includes(type)).map((type) => ({
-                    value: type,
-                    label: translate(`builder.fieldType.${type}`)
-                  })),
+                  options: FIELD_TYPES.filter((type) => allowedTypes.includes(type)).map((type) => {
+                    const definition = import_core.DEFAULT_FIELD_TYPE_DEFINITIONS.find((candidate) => candidate.type === type);
+                    return {
+                      value: type,
+                      label: translate(definition?.labelKey ?? `builder.fieldType.${type}`),
+                      icon: components.renderFieldTypeIcon(type),
+                      ...definition?.category === void 0 ? {} : { kind: definition.category }
+                    };
+                  }),
                   disabled: readOnly,
                   onChange: (value) => {
-                    if (isFieldType(value)) actions.changeFieldType(field.id, value);
+                    if (isFieldType(value)) changeFieldType(value);
                   }
                 }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                FieldTypeSelect,
+                {
+                  currentType: field.type,
+                  allowedTypes,
+                  onChangeType: changeFieldType,
+                  disabled: readOnly,
+                  readOnly,
+                  renderIcon: components.renderFieldTypeIcon
+                }
               )
             ] }),
             descriptionMode === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
@@ -1090,6 +1182,17 @@ 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,
@@ -1108,6 +1211,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))
     );
@@ -1116,21 +1220,44 @@ 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 localizationOptions = resolved.localizationOptions ?? {};
     const collapsible = localizationOptions.collapsible ?? false;
     const defaultLocaleControl = localizationOptions.defaultLocaleControl ?? "editable";
     const configuredTranslationLocales = locales.filter((locale) => locale !== schema.defaultLocale);
@@ -1138,24 +1265,35 @@ function createMuiLocalizationSlot(options) {
       ...schema.defaultLocale === void 0 ? [] : [schema.defaultLocale],
       ...configuredTranslationLocales
     ];
-    const summaryLabel = configuredTranslationLocales.length === 0 ? "Translations not configured" : `${configuredLocales.length} ${configuredLocales.length === 1 ? "language" : "languages"} configured: ${configuredLocales.map(
+    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.showSummary ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      localizationOptions.renderSummary === void 0 && localizationOptions.showSummary && configuredTranslationLocales.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         import_material13.Chip,
         {
-          label: summaryLabel,
+          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 ? title : null,
+      summary,
       /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
         import_material13.Stack,
         {
@@ -1187,36 +1325,52 @@ function createMuiLocalizationSlot(options) {
                 }
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Box, { sx: { flexGrow: 1, minWidth: 0, width: { xs: "100%", sm: "auto" } }, children: availableAllowedLocales === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-              TextInput,
+            /* @__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.addLocale"),
+                label: translate("builder.localization.selectLocaleToAdd"),
                 value: newLocale,
-                disabled: readOnly || localeLimitReached,
+                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)(
-              Select2,
+              TextInput,
               {
                 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,
+                disabled: readOnly || localeLimitReached,
                 onChange: setNewLocale
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material13.Box, { sx: { flexShrink: 0, minWidth: "max-content", whiteSpace: "nowrap" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button2, { variant: "primary", action: "addLocale", disabled: !canAddLocale, onClick: addLocale, children: translate("builder.addLocale") }) })
+            /* @__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,
         {
@@ -1228,6 +1382,7 @@ 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,
@@ -1241,6 +1396,7 @@ function createMuiLocalizationSlot(options) {
         Button2,
         {
           variant: "secondary",
+          noWrap: localizationOptions.noWrapActions ?? true,
           disabled: readOnly || !editingLocaleConfigured || isTranslating,
           onClick: onAutoTranslate,
           children: isTranslating ? translate("builder.translating") : translate("builder.autoTranslate")
@@ -1359,7 +1515,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,
     {
@@ -1374,6 +1531,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,
@@ -1408,6 +1566,7 @@ function MuiFormBuilder({
   mergeMuiAdapterOptions,
   muiBuilderComponents,
   muiBuilderSlots,
+  muiDefaultFieldTypeIcon,
   muiDefaultIconResolver,
   resolveMuiAdapterOptions,
   useResolvedMuiAdapterOptions