npm - @form-engine-ts/mui - Versions diffs - 4.0.0 → 4.1.0 - Mend

@form-engine-ts/mui 4.0.0 → 4.1.0

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

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -17,7 +17,10 @@ import { MuiFormBuilder } from "@form-engine-ts/mui";
     dense: true,
     inputFullWidth: true,
     buttonFullWidth: false,
-    fieldEditorOptions: { description: "hidden" },
+    fieldEditorOptions: {
+      description: "hidden",
+      byType: { rating: { ratingBounds: "readOnly" } }
+    },
     getLocaleLabel: (locale) => localeNames[locale] ?? locale,
     buttonVariants: { primary: "contained", secondary: "outlined", danger: "outlined" }
   }}
@@ -64,8 +67,10 @@ slots as it does for the standard builder.
 `MuiAdapterOptions` defaults to `size: "medium"`, `variant: "outlined"`, `buttonVariant: "contained"`,
 `inputFullWidth: true`, and `buttonFullWidth: false`. The legacy `fullWidth` option remains the fallback for both new
-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.
+width options. `fieldEditorOptions` controls title, description, required, type selection, options, display conditions,
+text limits, rating bounds, and number limits. Each control can be `editable`, `readOnly`, or `hidden`, and `byType`
+can override controls for individual question types. `localizationOptions.defaultLocaleControl` independently controls
+the default locale input. 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`,
@@ -82,6 +87,8 @@ in the selected value. The standard
 MUI field editor supplies icons for every field type and accepts `slots.fieldTypeSelect` and `slots.fieldEditorHeader`
 for focused customization. `muiSlotProps` also supports `textField`, `select`, `selectMenu`, `checkbox`, `button`, and
 `iconButton` MUI props in addition to the layout props.
+`fieldEditorOptions.fieldTypeOptions` can explicitly order, sort, or transform the generated type choices without
+mutating the defaults.
 `MuiFormBuilder` supplies options through `MuiFormBuilderContext` to module-stable adapter and slot component types.
 Controlled schema updates therefore preserve input focus and uncontrolled MUI state such as an open localization

package/dist/index.cjs CHANGED Viewed

@@ -102,7 +102,17 @@ function resolveMuiAdapterOptions(options = {}) {
     ...options.getActionLabel === void 0 ? {} : { getActionLabel: options.getActionLabel },
     layoutOptions: options.layoutOptions ?? {},
     fieldEditorOptions: {
-      description: options.fieldEditorOptions?.description ?? "editable"
+      title: options.fieldEditorOptions?.title ?? "editable",
+      description: options.fieldEditorOptions?.description ?? "editable",
+      required: options.fieldEditorOptions?.required ?? "editable",
+      typeSelect: options.fieldEditorOptions?.typeSelect ?? "editable",
+      options: options.fieldEditorOptions?.options ?? "editable",
+      displayConditions: options.fieldEditorOptions?.displayConditions ?? "editable",
+      textLimits: options.fieldEditorOptions?.textLimits ?? "editable",
+      ratingBounds: options.fieldEditorOptions?.ratingBounds ?? "editable",
+      numberLimits: options.fieldEditorOptions?.numberLimits ?? "editable",
+      ...options.fieldEditorOptions?.byType === void 0 ? {} : { byType: options.fieldEditorOptions.byType },
+      ...options.fieldEditorOptions?.fieldTypeOptions === void 0 ? {} : { fieldTypeOptions: options.fieldEditorOptions.fieldTypeOptions }
     },
     localizationOptions: {
       collapsible: options.localizationOptions?.collapsible ?? false,
@@ -128,7 +138,13 @@ function mergeMuiAdapterOptions(base = {}, overrides = {}) {
     ...overrides,
     ...base.buttonVariants === void 0 && overrides.buttonVariants === void 0 ? {} : { buttonVariants: { ...base.buttonVariants, ...overrides.buttonVariants } },
     ...base.layoutOptions === void 0 && overrides.layoutOptions === void 0 ? {} : { layoutOptions: { ...base.layoutOptions, ...overrides.layoutOptions } },
-    ...base.fieldEditorOptions === void 0 && overrides.fieldEditorOptions === void 0 ? {} : { fieldEditorOptions: { ...base.fieldEditorOptions, ...overrides.fieldEditorOptions } },
+    ...base.fieldEditorOptions === void 0 && overrides.fieldEditorOptions === void 0 ? {} : {
+      fieldEditorOptions: {
+        ...base.fieldEditorOptions,
+        ...overrides.fieldEditorOptions,
+        ...base.fieldEditorOptions?.byType === void 0 && overrides.fieldEditorOptions?.byType === void 0 ? {} : { byType: { ...base.fieldEditorOptions?.byType, ...overrides.fieldEditorOptions?.byType } }
+      }
+    },
     ...base.localizationOptions === void 0 && overrides.localizationOptions === void 0 ? {} : { localizationOptions: { ...base.localizationOptions, ...overrides.localizationOptions } },
     ...base.muiSlotProps === void 0 && overrides.muiSlotProps === void 0 ? {} : { muiSlotProps: { ...base.muiSlotProps, ...overrides.muiSlotProps } }
   };
@@ -774,6 +790,7 @@ function createMuiBuilderComponents(optionsOrOverrides = {}, customOverrides) {
 // src/slots/FieldEditor.tsx
 var import_core = require("@form-engine-ts/core");
+var import_react2 = require("@form-engine-ts/react");
 var import_material12 = require("@mui/material");
 // src/slots/OptionEditor.tsx
@@ -946,6 +963,13 @@ function updateBound(field, property, value) {
   const { [property]: _removed, ...remaining } = field;
   return remaining;
 }
+function updateNumberProperty(field, property, value) {
+  if (field.type !== "number") return field;
+  const nextValue = numericValue(value);
+  if (nextValue !== void 0) return { ...field, [property]: nextValue };
+  const { [property]: _removed, ...remaining } = field;
+  return remaining;
+}
 function createMuiFieldEditorSlot(options) {
   const Toolbar = createMuiToolbarSlot(options);
   const OptionEditor = createMuiOptionEditorSlot(options);
@@ -960,7 +984,9 @@ function createMuiFieldEditorSlot(options) {
     actions,
     components,
     translate,
-    slots
+    slots,
+    fieldEditorControls,
+    fieldTypeOptions: fieldTypeOptionsConfig
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
     const { Button: Button2, Checkbox: Checkbox2, Select: Select2, TextArea, TextInput } = components;
@@ -969,13 +995,18 @@ function createMuiFieldEditorSlot(options) {
     const condition = field.displayCondition;
     const conditionSources = schema.fields.slice(0, index);
     const conditionSource = conditionSources.find((source) => source.id === condition?.questionId);
-    const descriptionMode = resolved.fieldEditorOptions?.description ?? "editable";
+    const fieldEditorOptions = resolved.fieldEditorOptions ?? {};
+    const controls = (0, import_react2.resolveFieldEditorControls)({
+      ...fieldEditorControls ?? {},
+      ...fieldEditorOptions,
+      ...fieldEditorOptions.byType?.[field.type] ?? {}
+    });
     const titleErrorId = field.title.trim().length === 0 ? `mui-field-${field.id}-title-error` : void 0;
     const FieldTypeSelect = slots?.fieldTypeSelect;
     const FieldEditorHeader = slots?.fieldEditorHeader;
     const fieldTypeSelectId = `mui-field-${field.id}-type`;
     const fieldTypeSelectLabel = translate("builder.type");
-    const fieldTypeOptions = FIELD_TYPES.filter(
+    const generatedFieldTypeOptions = FIELD_TYPES.filter(
       (type) => allowedTypes.includes(type)
     ).map((type) => {
       const definition = import_core.DEFAULT_FIELD_TYPE_DEFINITIONS.find((candidate) => candidate.type === type);
@@ -991,6 +1022,14 @@ function createMuiFieldEditorSlot(options) {
         }
       };
     });
+    const fieldTypeOptions = (0, import_react2.resolveFieldTypeSelectOptions)(
+      generatedFieldTypeOptions,
+      fieldTypeOptionsConfig ?? fieldEditorOptions.fieldTypeOptions,
+      {
+        currentType: field.type,
+        allowedTypes
+      }
+    );
     const changeFieldType = (nextType) => {
       if (allowedTypes.includes(nextType)) actions.changeFieldType(field.id, nextType);
     };
@@ -1025,7 +1064,7 @@ function createMuiFieldEditorSlot(options) {
           ] }) : /* @__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.jsxs)(import_material12.Stack, { direction: { xs: "column", md: "row" }, spacing: resolved.dense ? 1 : 2, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              controls.title === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 TextInput,
                 {
                   id: `mui-field-${field.id}-title`,
@@ -1036,11 +1075,11 @@ function createMuiFieldEditorSlot(options) {
                   error: field.title.trim().length === 0,
                   helperText: field.title.trim().length === 0 ? translate("builder.required") : "",
                   "aria-describedby": titleErrorId,
-                  disabled: readOnly,
+                  disabled: readOnly || controls.title === "readOnly",
                   onChange: (value) => actions.setSourceText({ kind: "field", id: field.id }, "title", value)
                 }
               ),
-              FieldTypeSelect === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              controls.typeSelect === "hidden" ? null : FieldTypeSelect === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 Select2,
                 {
                   id: fieldTypeSelectId,
@@ -1048,7 +1087,7 @@ function createMuiFieldEditorSlot(options) {
                   label: fieldTypeSelectLabel,
                   value: allowedTypes.includes(field.type) ? field.type : "",
                   options: fieldTypeOptions,
-                  disabled: readOnly,
+                  disabled: readOnly || controls.typeSelect === "readOnly",
                   onChange: (value) => {
                     if (isFieldType(value)) changeFieldType(value);
                   }
@@ -1063,14 +1102,14 @@ function createMuiFieldEditorSlot(options) {
                   allowedTypes,
                   options: fieldTypeOptions,
                   onChangeType: changeFieldType,
-                  disabled: readOnly,
-                  readOnly,
+                  disabled: readOnly || controls.typeSelect === "readOnly",
+                  readOnly: readOnly || controls.typeSelect === "readOnly",
                   "aria-labelledby": `${fieldTypeSelectId}-label`,
                   renderIcon: components.renderFieldTypeIcon
                 }
               )
             ] }),
-            descriptionMode === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            controls.description === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               TextArea,
               {
                 id: `mui-field-${field.id}-description`,
@@ -1078,19 +1117,19 @@ function createMuiFieldEditorSlot(options) {
                 label: translate("builder.description"),
                 value: field.description ?? "",
                 rows: resolved.dense ? 2 : 3,
-                disabled: readOnly,
-                readOnly: descriptionMode === "readOnly",
+                disabled: readOnly || controls.description === "readOnly",
+                readOnly: readOnly || controls.description === "readOnly",
                 onChange: (value) => actions.setSourceText({ kind: "field", id: field.id }, "description", value)
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            controls.required === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               Checkbox2,
               {
                 id: `mui-field-${field.id}-required`,
                 name: `fields.${field.id}.required`,
                 label: translate("builder.required"),
                 checked: field.required,
-                disabled: readOnly,
+                disabled: readOnly || controls.required === "readOnly",
                 onChange: (checked) => actions.updateField(field.id, (current) => ({ ...current, required: checked }))
               }
             ),
@@ -1108,7 +1147,7 @@ function createMuiFieldEditorSlot(options) {
                 onChange: (value) => actions.assignFieldToPage(field.id, value.length === 0 ? null : value)
               }
             ),
-            field.type === "number" || field.type === "rating" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material12.Stack, { direction: { xs: "column", sm: "row" }, spacing: resolved.dense ? 1 : 2, children: [
+            field.type === "number" || field.type === "rating" ? (field.type === "number" ? controls.numberLimits : controls.ratingBounds) === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material12.Stack, { direction: { xs: "column", sm: "row" }, spacing: resolved.dense ? 1 : 2, children: [
               /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 TextInput,
                 {
@@ -1116,7 +1155,7 @@ function createMuiFieldEditorSlot(options) {
                   label: translate("builder.minimum"),
                   type: "number",
                   value: field.min === void 0 ? "" : String(field.min),
-                  disabled: readOnly,
+                  disabled: readOnly || (field.type === "number" ? controls.numberLimits : controls.ratingBounds) === "readOnly",
                   onChange: (value) => actions.updateField(field.id, (current) => updateBound(current, "min", value))
                 }
               ),
@@ -1127,12 +1166,68 @@ function createMuiFieldEditorSlot(options) {
                   label: translate("builder.maximum"),
                   type: "number",
                   value: field.max === void 0 ? "" : String(field.max),
-                  disabled: readOnly,
+                  disabled: readOnly || (field.type === "number" ? controls.numberLimits : controls.ratingBounds) === "readOnly",
                   onChange: (value) => actions.updateField(field.id, (current) => updateBound(current, "max", value))
                 }
               )
             ] }) : null,
-            features?.conditions === false || conditionSources.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material12.Stack, { direction: { xs: "column", md: "row" }, spacing: resolved.dense ? 1 : 2, children: [
+            field.type === "number" && controls.numberLimits !== "hidden" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              TextInput,
+              {
+                id: `mui-field-${field.id}-step`,
+                label: translate("builder.step"),
+                type: "number",
+                value: field.step === void 0 ? "" : String(field.step),
+                disabled: readOnly || controls.numberLimits === "readOnly",
+                onChange: (value) => actions.updateField(field.id, (current) => updateNumberProperty(current, "step", value))
+              }
+            ) : null,
+            (field.type === "text" || field.type === "textarea") && controls.textLimits !== "hidden" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material12.Stack, { direction: { xs: "column", sm: "row" }, spacing: resolved.dense ? 1 : 2, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                TextInput,
+                {
+                  id: `mui-field-${field.id}-min-length`,
+                  label: translate("builder.minimumLength"),
+                  type: "number",
+                  value: field.minLength === void 0 ? "" : String(field.minLength),
+                  disabled: readOnly || controls.textLimits === "readOnly",
+                  onChange: (value) => actions.updateField(field.id, (current) => {
+                    if (current.type !== "text" && current.type !== "textarea") return current;
+                    const parsed = numericValue(value);
+                    return parsed === void 0 ? current : { ...current, minLength: Math.max(0, Math.floor(parsed)) };
+                  })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                TextInput,
+                {
+                  id: `mui-field-${field.id}-max-length`,
+                  label: translate("builder.maximumLength"),
+                  type: "number",
+                  value: field.maxLength === void 0 ? "" : String(field.maxLength),
+                  disabled: readOnly || controls.textLimits === "readOnly",
+                  onChange: (value) => actions.updateField(field.id, (current) => {
+                    if (current.type !== "text" && current.type !== "textarea") return current;
+                    const parsed = numericValue(value);
+                    return parsed === void 0 ? current : { ...current, maxLength: Math.max(0, Math.floor(parsed)) };
+                  })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                TextInput,
+                {
+                  id: `mui-field-${field.id}-pattern`,
+                  label: translate("builder.pattern"),
+                  value: field.pattern ?? "",
+                  disabled: readOnly || controls.textLimits === "readOnly",
+                  onChange: (value) => actions.updateField(
+                    field.id,
+                    (current) => current.type === "text" || current.type === "textarea" ? value.length === 0 ? current : { ...current, pattern: value } : current
+                  )
+                }
+              )
+            ] }) : null,
+            features?.conditions === false || conditionSources.length === 0 || controls.displayConditions === "hidden" ? null : /* @__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)(
                 Select2,
                 {
@@ -1143,7 +1238,7 @@ function createMuiFieldEditorSlot(options) {
                     { value: "", label: translate("builder.alwaysVisible") },
                     ...conditionSources.map((source) => ({ value: source.id, label: source.title }))
                   ],
-                  disabled: readOnly,
+                  disabled: readOnly || controls.displayConditions === "readOnly",
                   onChange: (value) => actions.setDisplayCondition(
                     field.id,
                     value.length === 0 ? void 0 : { questionId: value, operator: "equals", value: "" }
@@ -1160,7 +1255,7 @@ function createMuiFieldEditorSlot(options) {
                     options: (conditionSource === void 0 ? [] : conditionOperators(conditionSource)).map(
                       (operator) => ({ value: operator, label: translate(`builder.operator.${operator}`) })
                     ),
-                    disabled: readOnly,
+                    disabled: readOnly || controls.displayConditions === "readOnly",
                     onChange: (value) => {
                       if (!isConditionOperator(value)) return;
                       actions.setDisplayCondition(
@@ -1176,7 +1271,7 @@ function createMuiFieldEditorSlot(options) {
                     id: `mui-field-${field.id}-condition-value`,
                     label: translate("builder.conditionValue"),
                     value: condition.value === void 0 ? "" : String(condition.value),
-                    disabled: readOnly,
+                    disabled: readOnly || controls.displayConditions === "readOnly",
                     onChange: (value) => actions.setDisplayCondition(field.id, { ...condition, value })
                   }
                 )
@@ -1186,29 +1281,29 @@ function createMuiFieldEditorSlot(options) {
               /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material12.Typography, { variant: "subtitle2", children: translate("builder.translation", {
                 locale: resolved.getLocaleLabel?.(currentLocale) ?? currentLocale
               }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              controls.title === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 TextInput,
                 {
                   id: `mui-field-${field.id}-${currentLocale}-title`,
                   label: translate("builder.translatedQuestionTitle"),
                   value: field.translations?.[currentLocale]?.title ?? "",
-                  disabled: readOnly,
+                  disabled: readOnly || controls.title === "readOnly",
                   onChange: (value) => actions.setManualTranslation(currentLocale, { kind: "field", id: field.id }, "title", value)
                 }
               ),
-              descriptionMode === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              controls.description === "hidden" ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 TextArea,
                 {
                   id: `mui-field-${field.id}-${currentLocale}-description`,
                   label: translate("builder.translatedDescription"),
                   value: field.translations?.[currentLocale]?.description ?? "",
-                  disabled: readOnly,
-                  readOnly: descriptionMode === "readOnly",
+                  disabled: readOnly || controls.description === "readOnly",
+                  readOnly: readOnly || controls.description === "readOnly",
                   onChange: (value) => actions.setManualTranslation(currentLocale, { kind: "field", id: field.id }, "description", value)
                 }
               )
             ] }),
-            "options" in field ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material12.Stack, { "data-mui-slot": "options", spacing: resolved.dense ? 1 : 2, children: [
+            "options" in field && controls.options !== "hidden" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_material12.Stack, { "data-mui-slot": "options", spacing: resolved.dense ? 1 : 2, children: [
               /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_material12.Typography, { variant: "subtitle2", children: translate("builder.options") }),
               field.options.map((option, optionIndex) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 OptionEditor,
@@ -1219,7 +1314,7 @@ function createMuiFieldEditorSlot(options) {
                   index: optionIndex,
                   currentLocale,
                   translate,
-                  readOnly,
+                  readOnly: readOnly || controls.options === "readOnly",
                   actions,
                   components
                 },
@@ -1230,7 +1325,7 @@ function createMuiFieldEditorSlot(options) {
                 {
                   action: "addOption",
                   targetId: field.id,
-                  disabled: readOnly || policy?.maxOptionsPerField !== void 0 && field.options.length >= policy.maxOptionsPerField,
+                  disabled: readOnly || controls.options === "readOnly" || policy?.maxOptionsPerField !== void 0 && field.options.length >= policy.maxOptionsPerField,
                   onClick: () => actions.addOption(field.id),
                   children: translate("builder.addOption")
                 }
@@ -1247,7 +1342,7 @@ var MuiFieldEditorSlot = createMuiFieldEditorSlot();
 // src/slots/Localization.tsx
 var import_icons_material2 = require("@mui/icons-material");
 var import_material13 = require("@mui/material");
-var import_react2 = require("react");
+var import_react3 = 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) {
@@ -1278,8 +1373,8 @@ 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 [newLocale, setNewLocale] = (0, import_react3.useState)("");
+    const [pendingFocusLocale, setPendingFocusLocale] = (0, import_react3.useState)(null);
     const locales = Array.from(
       new Set((schema.supportedLocales ?? []).filter((locale) => locale !== schema.defaultLocale))
     );
@@ -1318,7 +1413,7 @@ function createMuiLocalizationSlot(options) {
       event.stopPropagation();
       addLocale();
     };
-    (0, import_react2.useEffect)(() => {
+    (0, import_react3.useEffect)(() => {
       if (pendingFocusLocale === null || currentLocale !== pendingFocusLocale) return;
       const tab = document.getElementById(`mui-builder-locale-tab-${pendingFocusLocale}`);
       if (tab === null) return;
@@ -1559,8 +1654,8 @@ function createMuiBuilderProps(options, overrides = {}) {
 }
 // src/MuiFormBuilder.tsx
-var import_react3 = require("@form-engine-ts/react");
-var import_react4 = require("react");
+var import_react4 = require("@form-engine-ts/react");
+var import_react5 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function MuiFormBuilder({
   muiOptions,
@@ -1572,7 +1667,7 @@ function MuiFormBuilder({
   sectionOrder,
   ...props
 }) {
-  const contextOptions = (0, import_react4.useMemo)(
+  const contextOptions = (0, import_react5.useMemo)(
     () => mergeMuiAdapterOptions(muiOptions, {
       ...layoutOptions === void 0 ? {} : { layoutOptions },
       ...localizationOptions === void 0 ? {} : { localizationOptions },
@@ -1580,13 +1675,13 @@ function MuiFormBuilder({
     }),
     [layoutOptions, localizationOptions, muiOptions, muiSlotProps]
   );
-  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 contextValue = (0, import_react5.useMemo)(() => ({ options: contextOptions }), [contextOptions]);
+  const components = (0, import_react5.useMemo)(() => ({ ...muiBuilderComponents, ...customComponents }), [customComponents]);
+  const slots = (0, import_react5.useMemo)(() => ({ ...muiBuilderSlots, ...customSlots }), [customSlots]);
   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,
+    import_react4.FormBuilder,
     {
       ...props,
       components,

package/dist/index.d.cts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { BuilderActionIconType, LocalizationSummaryContext, BuilderButtonProps, BuilderCheckboxProps, BuilderErrorMessageProps, BuilderFieldsetProps, BuilderIconButtonProps, BuilderSectionProps, BuilderSelectProps, BuilderTextAreaProps, BuilderTextInputProps, FormBuilderComponents, FormBuilderSlots, FormBuilderProps, QuestionType, BuilderFieldEditorSlotProps, BuilderLocalizationSlotProps, BuilderOptionEditorSlotProps, BuilderToolbarSlotProps } from '@form-engine-ts/react';
+import { BuilderActionIconType, FieldPropertyControlMode, QuestionType, FieldEditorControlsConfig, FieldTypeSelectOptionsConfig, 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 { ReactNode, ComponentType, ReactElement } from 'react';
 import { CardProps, PaperProps, AccordionProps, StackProps, TextFieldProps, SelectProps, MenuProps, CheckboxProps, ButtonProps, IconButtonProps } from '@mui/material';
@@ -28,8 +28,23 @@ interface MuiLocalizationOptions {
     readonly noWrapActions?: boolean;
     readonly autoFocusNewTab?: boolean;
 }
+/**
+ * MUI's field editor controls mirror `FieldEditorControlsConfig` while keeping
+ * the original interface members directly declared for semver/reporting compatibility.
+ */
 interface MuiFieldEditorOptions {
+    readonly title?: FieldPropertyControlMode;
     readonly description?: "editable" | "readOnly" | "hidden";
+    readonly required?: FieldPropertyControlMode;
+    readonly typeSelect?: FieldPropertyControlMode;
+    readonly options?: FieldPropertyControlMode;
+    readonly displayConditions?: FieldPropertyControlMode;
+    readonly textLimits?: FieldPropertyControlMode;
+    readonly ratingBounds?: FieldPropertyControlMode;
+    readonly numberLimits?: FieldPropertyControlMode;
+    /** Per-question-type overrides take precedence over the base controls. */
+    readonly byType?: Partial<Record<QuestionType, Partial<FieldEditorControlsConfig>>>;
+    readonly fieldTypeOptions?: FieldTypeSelectOptionsConfig;
 }
 interface MuiSlotProps {
     readonly card?: Partial<CardProps>;

package/dist/index.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { BuilderActionIconType, LocalizationSummaryContext, BuilderButtonProps, BuilderCheckboxProps, BuilderErrorMessageProps, BuilderFieldsetProps, BuilderIconButtonProps, BuilderSectionProps, BuilderSelectProps, BuilderTextAreaProps, BuilderTextInputProps, FormBuilderComponents, FormBuilderSlots, FormBuilderProps, QuestionType, BuilderFieldEditorSlotProps, BuilderLocalizationSlotProps, BuilderOptionEditorSlotProps, BuilderToolbarSlotProps } from '@form-engine-ts/react';
+import { BuilderActionIconType, FieldPropertyControlMode, QuestionType, FieldEditorControlsConfig, FieldTypeSelectOptionsConfig, 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 { ReactNode, ComponentType, ReactElement } from 'react';
 import { CardProps, PaperProps, AccordionProps, StackProps, TextFieldProps, SelectProps, MenuProps, CheckboxProps, ButtonProps, IconButtonProps } from '@mui/material';
@@ -28,8 +28,23 @@ interface MuiLocalizationOptions {
     readonly noWrapActions?: boolean;
     readonly autoFocusNewTab?: boolean;
 }
+/**
+ * MUI's field editor controls mirror `FieldEditorControlsConfig` while keeping
+ * the original interface members directly declared for semver/reporting compatibility.
+ */
 interface MuiFieldEditorOptions {
+    readonly title?: FieldPropertyControlMode;
     readonly description?: "editable" | "readOnly" | "hidden";
+    readonly required?: FieldPropertyControlMode;
+    readonly typeSelect?: FieldPropertyControlMode;
+    readonly options?: FieldPropertyControlMode;
+    readonly displayConditions?: FieldPropertyControlMode;
+    readonly textLimits?: FieldPropertyControlMode;
+    readonly ratingBounds?: FieldPropertyControlMode;
+    readonly numberLimits?: FieldPropertyControlMode;
+    /** Per-question-type overrides take precedence over the base controls. */
+    readonly byType?: Partial<Record<QuestionType, Partial<FieldEditorControlsConfig>>>;
+    readonly fieldTypeOptions?: FieldTypeSelectOptionsConfig;
 }
 interface MuiSlotProps {
     readonly card?: Partial<CardProps>;

package/dist/index.js CHANGED Viewed

@@ -37,7 +37,17 @@ function resolveMuiAdapterOptions(options = {}) {
     ...options.getActionLabel === void 0 ? {} : { getActionLabel: options.getActionLabel },
     layoutOptions: options.layoutOptions ?? {},
     fieldEditorOptions: {
-      description: options.fieldEditorOptions?.description ?? "editable"
+      title: options.fieldEditorOptions?.title ?? "editable",
+      description: options.fieldEditorOptions?.description ?? "editable",
+      required: options.fieldEditorOptions?.required ?? "editable",
+      typeSelect: options.fieldEditorOptions?.typeSelect ?? "editable",
+      options: options.fieldEditorOptions?.options ?? "editable",
+      displayConditions: options.fieldEditorOptions?.displayConditions ?? "editable",
+      textLimits: options.fieldEditorOptions?.textLimits ?? "editable",
+      ratingBounds: options.fieldEditorOptions?.ratingBounds ?? "editable",
+      numberLimits: options.fieldEditorOptions?.numberLimits ?? "editable",
+      ...options.fieldEditorOptions?.byType === void 0 ? {} : { byType: options.fieldEditorOptions.byType },
+      ...options.fieldEditorOptions?.fieldTypeOptions === void 0 ? {} : { fieldTypeOptions: options.fieldEditorOptions.fieldTypeOptions }
     },
     localizationOptions: {
       collapsible: options.localizationOptions?.collapsible ?? false,
@@ -63,7 +73,13 @@ function mergeMuiAdapterOptions(base = {}, overrides = {}) {
     ...overrides,
     ...base.buttonVariants === void 0 && overrides.buttonVariants === void 0 ? {} : { buttonVariants: { ...base.buttonVariants, ...overrides.buttonVariants } },
     ...base.layoutOptions === void 0 && overrides.layoutOptions === void 0 ? {} : { layoutOptions: { ...base.layoutOptions, ...overrides.layoutOptions } },
-    ...base.fieldEditorOptions === void 0 && overrides.fieldEditorOptions === void 0 ? {} : { fieldEditorOptions: { ...base.fieldEditorOptions, ...overrides.fieldEditorOptions } },
+    ...base.fieldEditorOptions === void 0 && overrides.fieldEditorOptions === void 0 ? {} : {
+      fieldEditorOptions: {
+        ...base.fieldEditorOptions,
+        ...overrides.fieldEditorOptions,
+        ...base.fieldEditorOptions?.byType === void 0 && overrides.fieldEditorOptions?.byType === void 0 ? {} : { byType: { ...base.fieldEditorOptions?.byType, ...overrides.fieldEditorOptions?.byType } }
+      }
+    },
     ...base.localizationOptions === void 0 && overrides.localizationOptions === void 0 ? {} : { localizationOptions: { ...base.localizationOptions, ...overrides.localizationOptions } },
     ...base.muiSlotProps === void 0 && overrides.muiSlotProps === void 0 ? {} : { muiSlotProps: { ...base.muiSlotProps, ...overrides.muiSlotProps } }
   };
@@ -736,6 +752,7 @@ function createMuiBuilderComponents(optionsOrOverrides = {}, customOverrides) {
 // src/slots/FieldEditor.tsx
 import { DEFAULT_FIELD_TYPE_DEFINITIONS } from "@form-engine-ts/core";
+import { resolveFieldEditorControls, resolveFieldTypeSelectOptions } from "@form-engine-ts/react";
 import { Card, Stack as Stack3, Typography as Typography3 } from "@mui/material";
 // src/slots/OptionEditor.tsx
@@ -908,6 +925,13 @@ function updateBound(field, property, value) {
   const { [property]: _removed, ...remaining } = field;
   return remaining;
 }
+function updateNumberProperty(field, property, value) {
+  if (field.type !== "number") return field;
+  const nextValue = numericValue(value);
+  if (nextValue !== void 0) return { ...field, [property]: nextValue };
+  const { [property]: _removed, ...remaining } = field;
+  return remaining;
+}
 function createMuiFieldEditorSlot(options) {
   const Toolbar = createMuiToolbarSlot(options);
   const OptionEditor = createMuiOptionEditorSlot(options);
@@ -922,7 +946,9 @@ function createMuiFieldEditorSlot(options) {
     actions,
     components,
     translate,
-    slots
+    slots,
+    fieldEditorControls,
+    fieldTypeOptions: fieldTypeOptionsConfig
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
     const { Button: Button2, Checkbox: Checkbox2, Select: Select2, TextArea, TextInput } = components;
@@ -931,13 +957,18 @@ function createMuiFieldEditorSlot(options) {
     const condition = field.displayCondition;
     const conditionSources = schema.fields.slice(0, index);
     const conditionSource = conditionSources.find((source) => source.id === condition?.questionId);
-    const descriptionMode = resolved.fieldEditorOptions?.description ?? "editable";
+    const fieldEditorOptions = resolved.fieldEditorOptions ?? {};
+    const controls = resolveFieldEditorControls({
+      ...fieldEditorControls ?? {},
+      ...fieldEditorOptions,
+      ...fieldEditorOptions.byType?.[field.type] ?? {}
+    });
     const titleErrorId = field.title.trim().length === 0 ? `mui-field-${field.id}-title-error` : void 0;
     const FieldTypeSelect = slots?.fieldTypeSelect;
     const FieldEditorHeader = slots?.fieldEditorHeader;
     const fieldTypeSelectId = `mui-field-${field.id}-type`;
     const fieldTypeSelectLabel = translate("builder.type");
-    const fieldTypeOptions = FIELD_TYPES.filter(
+    const generatedFieldTypeOptions = FIELD_TYPES.filter(
       (type) => allowedTypes.includes(type)
     ).map((type) => {
       const definition = DEFAULT_FIELD_TYPE_DEFINITIONS.find((candidate) => candidate.type === type);
@@ -953,6 +984,14 @@ function createMuiFieldEditorSlot(options) {
         }
       };
     });
+    const fieldTypeOptions = resolveFieldTypeSelectOptions(
+      generatedFieldTypeOptions,
+      fieldTypeOptionsConfig ?? fieldEditorOptions.fieldTypeOptions,
+      {
+        currentType: field.type,
+        allowedTypes
+      }
+    );
     const changeFieldType = (nextType) => {
       if (allowedTypes.includes(nextType)) actions.changeFieldType(field.id, nextType);
     };
@@ -987,7 +1026,7 @@ function createMuiFieldEditorSlot(options) {
           ] }) : /* @__PURE__ */ jsx13(FieldEditorHeader, { field, index, totalFields: schema.fields.length, actions }),
           /* @__PURE__ */ jsxs7(Stack3, { ...resolved.muiSlotProps?.stack, spacing: resolved.dense ? 1 : 2, children: [
             /* @__PURE__ */ jsxs7(Stack3, { direction: { xs: "column", md: "row" }, spacing: resolved.dense ? 1 : 2, children: [
-              /* @__PURE__ */ jsx13(
+              controls.title === "hidden" ? null : /* @__PURE__ */ jsx13(
                 TextInput,
                 {
                   id: `mui-field-${field.id}-title`,
@@ -998,11 +1037,11 @@ function createMuiFieldEditorSlot(options) {
                   error: field.title.trim().length === 0,
                   helperText: field.title.trim().length === 0 ? translate("builder.required") : "",
                   "aria-describedby": titleErrorId,
-                  disabled: readOnly,
+                  disabled: readOnly || controls.title === "readOnly",
                   onChange: (value) => actions.setSourceText({ kind: "field", id: field.id }, "title", value)
                 }
               ),
-              FieldTypeSelect === void 0 ? /* @__PURE__ */ jsx13(
+              controls.typeSelect === "hidden" ? null : FieldTypeSelect === void 0 ? /* @__PURE__ */ jsx13(
                 Select2,
                 {
                   id: fieldTypeSelectId,
@@ -1010,7 +1049,7 @@ function createMuiFieldEditorSlot(options) {
                   label: fieldTypeSelectLabel,
                   value: allowedTypes.includes(field.type) ? field.type : "",
                   options: fieldTypeOptions,
-                  disabled: readOnly,
+                  disabled: readOnly || controls.typeSelect === "readOnly",
                   onChange: (value) => {
                     if (isFieldType(value)) changeFieldType(value);
                   }
@@ -1025,14 +1064,14 @@ function createMuiFieldEditorSlot(options) {
                   allowedTypes,
                   options: fieldTypeOptions,
                   onChangeType: changeFieldType,
-                  disabled: readOnly,
-                  readOnly,
+                  disabled: readOnly || controls.typeSelect === "readOnly",
+                  readOnly: readOnly || controls.typeSelect === "readOnly",
                   "aria-labelledby": `${fieldTypeSelectId}-label`,
                   renderIcon: components.renderFieldTypeIcon
                 }
               )
             ] }),
-            descriptionMode === "hidden" ? null : /* @__PURE__ */ jsx13(
+            controls.description === "hidden" ? null : /* @__PURE__ */ jsx13(
               TextArea,
               {
                 id: `mui-field-${field.id}-description`,
@@ -1040,19 +1079,19 @@ function createMuiFieldEditorSlot(options) {
                 label: translate("builder.description"),
                 value: field.description ?? "",
                 rows: resolved.dense ? 2 : 3,
-                disabled: readOnly,
-                readOnly: descriptionMode === "readOnly",
+                disabled: readOnly || controls.description === "readOnly",
+                readOnly: readOnly || controls.description === "readOnly",
                 onChange: (value) => actions.setSourceText({ kind: "field", id: field.id }, "description", value)
               }
             ),
-            /* @__PURE__ */ jsx13(
+            controls.required === "hidden" ? null : /* @__PURE__ */ jsx13(
               Checkbox2,
               {
                 id: `mui-field-${field.id}-required`,
                 name: `fields.${field.id}.required`,
                 label: translate("builder.required"),
                 checked: field.required,
-                disabled: readOnly,
+                disabled: readOnly || controls.required === "readOnly",
                 onChange: (checked) => actions.updateField(field.id, (current) => ({ ...current, required: checked }))
               }
             ),
@@ -1070,7 +1109,7 @@ function createMuiFieldEditorSlot(options) {
                 onChange: (value) => actions.assignFieldToPage(field.id, value.length === 0 ? null : value)
               }
             ),
-            field.type === "number" || field.type === "rating" ? /* @__PURE__ */ jsxs7(Stack3, { direction: { xs: "column", sm: "row" }, spacing: resolved.dense ? 1 : 2, children: [
+            field.type === "number" || field.type === "rating" ? (field.type === "number" ? controls.numberLimits : controls.ratingBounds) === "hidden" ? null : /* @__PURE__ */ jsxs7(Stack3, { direction: { xs: "column", sm: "row" }, spacing: resolved.dense ? 1 : 2, children: [
               /* @__PURE__ */ jsx13(
                 TextInput,
                 {
@@ -1078,7 +1117,7 @@ function createMuiFieldEditorSlot(options) {
                   label: translate("builder.minimum"),
                   type: "number",
                   value: field.min === void 0 ? "" : String(field.min),
-                  disabled: readOnly,
+                  disabled: readOnly || (field.type === "number" ? controls.numberLimits : controls.ratingBounds) === "readOnly",
                   onChange: (value) => actions.updateField(field.id, (current) => updateBound(current, "min", value))
                 }
               ),
@@ -1089,12 +1128,68 @@ function createMuiFieldEditorSlot(options) {
                   label: translate("builder.maximum"),
                   type: "number",
                   value: field.max === void 0 ? "" : String(field.max),
-                  disabled: readOnly,
+                  disabled: readOnly || (field.type === "number" ? controls.numberLimits : controls.ratingBounds) === "readOnly",
                   onChange: (value) => actions.updateField(field.id, (current) => updateBound(current, "max", value))
                 }
               )
             ] }) : null,
-            features?.conditions === false || conditionSources.length === 0 ? null : /* @__PURE__ */ jsxs7(Stack3, { direction: { xs: "column", md: "row" }, spacing: resolved.dense ? 1 : 2, children: [
+            field.type === "number" && controls.numberLimits !== "hidden" ? /* @__PURE__ */ jsx13(
+              TextInput,
+              {
+                id: `mui-field-${field.id}-step`,
+                label: translate("builder.step"),
+                type: "number",
+                value: field.step === void 0 ? "" : String(field.step),
+                disabled: readOnly || controls.numberLimits === "readOnly",
+                onChange: (value) => actions.updateField(field.id, (current) => updateNumberProperty(current, "step", value))
+              }
+            ) : null,
+            (field.type === "text" || field.type === "textarea") && controls.textLimits !== "hidden" ? /* @__PURE__ */ jsxs7(Stack3, { direction: { xs: "column", sm: "row" }, spacing: resolved.dense ? 1 : 2, children: [
+              /* @__PURE__ */ jsx13(
+                TextInput,
+                {
+                  id: `mui-field-${field.id}-min-length`,
+                  label: translate("builder.minimumLength"),
+                  type: "number",
+                  value: field.minLength === void 0 ? "" : String(field.minLength),
+                  disabled: readOnly || controls.textLimits === "readOnly",
+                  onChange: (value) => actions.updateField(field.id, (current) => {
+                    if (current.type !== "text" && current.type !== "textarea") return current;
+                    const parsed = numericValue(value);
+                    return parsed === void 0 ? current : { ...current, minLength: Math.max(0, Math.floor(parsed)) };
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx13(
+                TextInput,
+                {
+                  id: `mui-field-${field.id}-max-length`,
+                  label: translate("builder.maximumLength"),
+                  type: "number",
+                  value: field.maxLength === void 0 ? "" : String(field.maxLength),
+                  disabled: readOnly || controls.textLimits === "readOnly",
+                  onChange: (value) => actions.updateField(field.id, (current) => {
+                    if (current.type !== "text" && current.type !== "textarea") return current;
+                    const parsed = numericValue(value);
+                    return parsed === void 0 ? current : { ...current, maxLength: Math.max(0, Math.floor(parsed)) };
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx13(
+                TextInput,
+                {
+                  id: `mui-field-${field.id}-pattern`,
+                  label: translate("builder.pattern"),
+                  value: field.pattern ?? "",
+                  disabled: readOnly || controls.textLimits === "readOnly",
+                  onChange: (value) => actions.updateField(
+                    field.id,
+                    (current) => current.type === "text" || current.type === "textarea" ? value.length === 0 ? current : { ...current, pattern: value } : current
+                  )
+                }
+              )
+            ] }) : null,
+            features?.conditions === false || conditionSources.length === 0 || controls.displayConditions === "hidden" ? null : /* @__PURE__ */ jsxs7(Stack3, { direction: { xs: "column", md: "row" }, spacing: resolved.dense ? 1 : 2, children: [
               /* @__PURE__ */ jsx13(
                 Select2,
                 {
@@ -1105,7 +1200,7 @@ function createMuiFieldEditorSlot(options) {
                     { value: "", label: translate("builder.alwaysVisible") },
                     ...conditionSources.map((source) => ({ value: source.id, label: source.title }))
                   ],
-                  disabled: readOnly,
+                  disabled: readOnly || controls.displayConditions === "readOnly",
                   onChange: (value) => actions.setDisplayCondition(
                     field.id,
                     value.length === 0 ? void 0 : { questionId: value, operator: "equals", value: "" }
@@ -1122,7 +1217,7 @@ function createMuiFieldEditorSlot(options) {
                     options: (conditionSource === void 0 ? [] : conditionOperators(conditionSource)).map(
                       (operator) => ({ value: operator, label: translate(`builder.operator.${operator}`) })
                     ),
-                    disabled: readOnly,
+                    disabled: readOnly || controls.displayConditions === "readOnly",
                     onChange: (value) => {
                       if (!isConditionOperator(value)) return;
                       actions.setDisplayCondition(
@@ -1138,7 +1233,7 @@ function createMuiFieldEditorSlot(options) {
                     id: `mui-field-${field.id}-condition-value`,
                     label: translate("builder.conditionValue"),
                     value: condition.value === void 0 ? "" : String(condition.value),
-                    disabled: readOnly,
+                    disabled: readOnly || controls.displayConditions === "readOnly",
                     onChange: (value) => actions.setDisplayCondition(field.id, { ...condition, value })
                   }
                 )
@@ -1148,29 +1243,29 @@ function createMuiFieldEditorSlot(options) {
               /* @__PURE__ */ jsx13(Typography3, { variant: "subtitle2", children: translate("builder.translation", {
                 locale: resolved.getLocaleLabel?.(currentLocale) ?? currentLocale
               }) }),
-              /* @__PURE__ */ jsx13(
+              controls.title === "hidden" ? null : /* @__PURE__ */ jsx13(
                 TextInput,
                 {
                   id: `mui-field-${field.id}-${currentLocale}-title`,
                   label: translate("builder.translatedQuestionTitle"),
                   value: field.translations?.[currentLocale]?.title ?? "",
-                  disabled: readOnly,
+                  disabled: readOnly || controls.title === "readOnly",
                   onChange: (value) => actions.setManualTranslation(currentLocale, { kind: "field", id: field.id }, "title", value)
                 }
               ),
-              descriptionMode === "hidden" ? null : /* @__PURE__ */ jsx13(
+              controls.description === "hidden" ? null : /* @__PURE__ */ jsx13(
                 TextArea,
                 {
                   id: `mui-field-${field.id}-${currentLocale}-description`,
                   label: translate("builder.translatedDescription"),
                   value: field.translations?.[currentLocale]?.description ?? "",
-                  disabled: readOnly,
-                  readOnly: descriptionMode === "readOnly",
+                  disabled: readOnly || controls.description === "readOnly",
+                  readOnly: readOnly || controls.description === "readOnly",
                   onChange: (value) => actions.setManualTranslation(currentLocale, { kind: "field", id: field.id }, "description", value)
                 }
               )
             ] }),
-            "options" in field ? /* @__PURE__ */ jsxs7(Stack3, { "data-mui-slot": "options", spacing: resolved.dense ? 1 : 2, children: [
+            "options" in field && controls.options !== "hidden" ? /* @__PURE__ */ jsxs7(Stack3, { "data-mui-slot": "options", spacing: resolved.dense ? 1 : 2, children: [
               /* @__PURE__ */ jsx13(Typography3, { variant: "subtitle2", children: translate("builder.options") }),
               field.options.map((option, optionIndex) => /* @__PURE__ */ jsx13(
                 OptionEditor,
@@ -1181,7 +1276,7 @@ function createMuiFieldEditorSlot(options) {
                   index: optionIndex,
                   currentLocale,
                   translate,
-                  readOnly,
+                  readOnly: readOnly || controls.options === "readOnly",
                   actions,
                   components
                 },
@@ -1192,7 +1287,7 @@ function createMuiFieldEditorSlot(options) {
                 {
                   action: "addOption",
                   targetId: field.id,
-                  disabled: readOnly || policy?.maxOptionsPerField !== void 0 && field.options.length >= policy.maxOptionsPerField,
+                  disabled: readOnly || controls.options === "readOnly" || policy?.maxOptionsPerField !== void 0 && field.options.length >= policy.maxOptionsPerField,
                   onClick: () => actions.addOption(field.id),
                   children: translate("builder.addOption")
                 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@form-engine-ts/mui",
-  "version": "4.0.0",
+  "version": "4.1.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": "4.0.0",
-    "@form-engine-ts/react": "4.0.0"
+    "@form-engine-ts/core": "4.1.0",
+    "@form-engine-ts/react": "4.1.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/react": "4.0.0",
-    "@form-engine-ts/core": "4.0.0"
+    "@form-engine-ts/core": "4.1.0",
+    "@form-engine-ts/react": "4.1.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",