@form-engine-ts/mui 3.2.0 → 4.0.0

package/README.md

@@ -76,8 +76,9 @@ default.
 `layoutOptions`, `localizationOptions`, and `muiSlotProps` are also accepted in `muiOptions` for low-level factories such
 as `createMuiBuilderSlots`; the dedicated `MuiFormBuilder` props take precedence.
 
-Select options in the MUI adapter support icons, descriptions, custom metadata, and custom `renderOption`/`renderValue`
-callbacks. Without a custom renderer, icons appear beside labels in the menu and in the selected value. The standard
+Select options in the MUI adapter support icons, descriptions, groups (`group`/`groupLabel` or `kind`), custom metadata,
+and custom `renderOption`/`renderValue` callbacks. Without a custom renderer, icons appear beside labels in the menu and
+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.

package/dist/index.cjs

@@ -417,6 +417,40 @@ var import_jsx_runtime7 = require("react/jsx-runtime");
 function normalizeOptions(options) {
   return options.map((option) => typeof option === "string" ? { value: option, label: option } : option);
 }
+function SelectGroupHeader({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_material7.ListSubheader, { role: "presentation", children });
+}
+function groupSelectOptions(options) {
+  const groups = [];
+  const groupIndexes = /* @__PURE__ */ new Map();
+  for (const option of options) {
+    const groupKey = option.group ?? option.kind;
+    const groupLabel = option.groupLabel ?? groupKey;
+    if (groupKey === void 0 && groupLabel === void 0) {
+      groups.push({ items: [option] });
+      continue;
+    }
+    const key = groupKey ?? groupLabel;
+    if (key === void 0) {
+      groups.push({ items: [option] });
+      continue;
+    }
+    const existingIndex = groupIndexes.get(key);
+    if (existingIndex === void 0) {
+      groupIndexes.set(key, groups.length);
+      groups.push({
+        groupKey: key,
+        ...groupLabel === void 0 ? {} : { groupLabel },
+        items: [option]
+      });
+      continue;
+    }
+    const existing = groups[existingIndex];
+    if (existing === void 0) continue;
+    groups[existingIndex] = { ...existing, items: [...existing.items, option] };
+  }
+  return groups;
+}
 function createMuiSelectAdapter(options) {
   return function MuiSelect({
     id,
@@ -440,13 +474,14 @@ function createMuiSelectAdapter(options) {
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
     const normalizedOptions = normalizeOptions(selectOptions);
+    const groupedOptions = groupSelectOptions(normalizedOptions);
     const selectSlotProps = resolved.muiSlotProps?.select;
     const menuProps = { ...selectSlotProps?.MenuProps, ...resolved.muiSlotProps?.selectMenu };
     const slotInputProps = selectSlotProps?.inputProps;
     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(String(event.target.value));
+    const handleChange = (event) => onChange(event.target.value);
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       import_material7.FormControl,
       {
@@ -491,10 +526,22 @@ function createMuiSelectAdapter(options) {
                 ...describedBy === void 0 ? {} : { "aria-describedby": describedBy },
                 ...ariaLabelledBy === void 0 ? {} : { "aria-labelledby": ariaLabelledBy }
               },
-              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))
+              children: groupedOptions.flatMap((group) => [
+                group.groupLabel === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SelectGroupHeader, { children: group.groupLabel }, `header-${group.groupKey ?? group.groupLabel}`),
+                ...group.items.map((option) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  import_material7.MenuItem,
+                  {
+                    value: option.value,
+                    disabled: option.disabled,
+                    ...option.group === void 0 && option.groupLabel === void 0 && option.kind === void 0 ? {} : { "aria-label": option.label },
+                    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 })
@@ -503,7 +550,10 @@ function createMuiSelectAdapter(options) {
     );
   };
 }
-var MuiSelectAdapter = createMuiSelectAdapter();
+function MuiSelectAdapter(props) {
+  const Adapter = createMuiSelectAdapter();
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Adapter, { ...props });
+}
 
 // src/adapters/TextArea.tsx
 var import_material8 = require("@mui/material");
@@ -923,6 +973,24 @@ function createMuiFieldEditorSlot(options) {
     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(
+      (type) => allowedTypes.includes(type)
+    ).map((type) => {
+      const definition = import_core.DEFAULT_FIELD_TYPE_DEFINITIONS.find((candidate) => candidate.type === type);
+      const group = definition?.category;
+      return {
+        value: type,
+        label: translate(definition?.labelKey ?? `builder.fieldType.${type}`),
+        description: translate(`builder.fieldTypeDescription.${type}`),
+        icon: components.renderFieldTypeIcon(type),
+        ...group === void 0 ? {} : {
+          group,
+          groupLabel: translate(`builder.fieldCategory.${group}`)
+        }
+      };
+    });
     const changeFieldType = (nextType) => {
       if (allowedTypes.includes(nextType)) actions.changeFieldType(field.id, nextType);
     };
@@ -975,19 +1043,11 @@ function createMuiFieldEditorSlot(options) {
               FieldTypeSelect === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 Select2,
                 {
-                  id: `mui-field-${field.id}-type`,
+                  id: fieldTypeSelectId,
                   name: `fields.${field.id}.type`,
-                  label: translate("builder.type"),
+                  label: fieldTypeSelectLabel,
                   value: allowedTypes.includes(field.type) ? field.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 }
-                    };
-                  }),
+                  options: fieldTypeOptions,
                   disabled: readOnly,
                   onChange: (value) => {
                     if (isFieldType(value)) changeFieldType(value);
@@ -996,11 +1056,16 @@ function createMuiFieldEditorSlot(options) {
               ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 FieldTypeSelect,
                 {
+                  id: fieldTypeSelectId,
+                  name: `fields.${field.id}.type`,
+                  label: fieldTypeSelectLabel,
                   currentType: field.type,
                   allowedTypes,
+                  options: fieldTypeOptions,
                   onChangeType: changeFieldType,
                   disabled: readOnly,
                   readOnly,
+                  "aria-labelledby": `${fieldTypeSelectId}-label`,
                   renderIcon: components.renderFieldTypeIcon
                 }
               )

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 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 * as react from 'react';
-import { ReactNode, ComponentType } from 'react';
+import { ReactNode, ComponentType, ReactElement } from 'react';
 import { CardProps, PaperProps, AccordionProps, StackProps, TextFieldProps, SelectProps, MenuProps, CheckboxProps, ButtonProps, IconButtonProps } from '@mui/material';
 
 type BuilderSectionName = "basicSettings" | "completionMessage" | "questions" | "addQuestion" | "localization";
@@ -117,8 +117,8 @@ declare const MuiIconButtonAdapter: ComponentType<BuilderIconButtonProps>;
 declare function createMuiSectionAdapter(options?: MuiAdapterOptions): ComponentType<BuilderSectionProps>;
 declare const MuiSectionAdapter: ComponentType<BuilderSectionProps>;
 
-declare function createMuiSelectAdapter(options?: MuiAdapterOptions): ComponentType<BuilderSelectProps>;
-declare const MuiSelectAdapter: ComponentType<BuilderSelectProps>;
+declare function createMuiSelectAdapter<T extends string = string>(options?: MuiAdapterOptions): ComponentType<BuilderSelectProps<T>>;
+declare function MuiSelectAdapter<T extends string = string>(props: BuilderSelectProps<T>): ReactElement;
 
 declare function createMuiTextAreaAdapter(options?: MuiAdapterOptions): ComponentType<BuilderTextAreaProps>;
 declare const MuiTextAreaAdapter: ComponentType<BuilderTextAreaProps>;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 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 * as react from 'react';
-import { ReactNode, ComponentType } from 'react';
+import { ReactNode, ComponentType, ReactElement } from 'react';
 import { CardProps, PaperProps, AccordionProps, StackProps, TextFieldProps, SelectProps, MenuProps, CheckboxProps, ButtonProps, IconButtonProps } from '@mui/material';
 
 type BuilderSectionName = "basicSettings" | "completionMessage" | "questions" | "addQuestion" | "localization";
@@ -117,8 +117,8 @@ declare const MuiIconButtonAdapter: ComponentType<BuilderIconButtonProps>;
 declare function createMuiSectionAdapter(options?: MuiAdapterOptions): ComponentType<BuilderSectionProps>;
 declare const MuiSectionAdapter: ComponentType<BuilderSectionProps>;
 
-declare function createMuiSelectAdapter(options?: MuiAdapterOptions): ComponentType<BuilderSelectProps>;
-declare const MuiSelectAdapter: ComponentType<BuilderSelectProps>;
+declare function createMuiSelectAdapter<T extends string = string>(options?: MuiAdapterOptions): ComponentType<BuilderSelectProps<T>>;
+declare function MuiSelectAdapter<T extends string = string>(props: BuilderSelectProps<T>): ReactElement;
 
 declare function createMuiTextAreaAdapter(options?: MuiAdapterOptions): ComponentType<BuilderTextAreaProps>;
 declare const MuiTextAreaAdapter: ComponentType<BuilderTextAreaProps>;

package/dist/index.js

@@ -354,6 +354,7 @@ import {
   InputLabel,
   ListItemIcon,
   ListItemText,
+  ListSubheader,
   MenuItem,
   Select
 } from "@mui/material";
@@ -361,6 +362,40 @@ import { Fragment, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function normalizeOptions(options) {
   return options.map((option) => typeof option === "string" ? { value: option, label: option } : option);
 }
+function SelectGroupHeader({ children }) {
+  return /* @__PURE__ */ jsx7(ListSubheader, { role: "presentation", children });
+}
+function groupSelectOptions(options) {
+  const groups = [];
+  const groupIndexes = /* @__PURE__ */ new Map();
+  for (const option of options) {
+    const groupKey = option.group ?? option.kind;
+    const groupLabel = option.groupLabel ?? groupKey;
+    if (groupKey === void 0 && groupLabel === void 0) {
+      groups.push({ items: [option] });
+      continue;
+    }
+    const key = groupKey ?? groupLabel;
+    if (key === void 0) {
+      groups.push({ items: [option] });
+      continue;
+    }
+    const existingIndex = groupIndexes.get(key);
+    if (existingIndex === void 0) {
+      groupIndexes.set(key, groups.length);
+      groups.push({
+        groupKey: key,
+        ...groupLabel === void 0 ? {} : { groupLabel },
+        items: [option]
+      });
+      continue;
+    }
+    const existing = groups[existingIndex];
+    if (existing === void 0) continue;
+    groups[existingIndex] = { ...existing, items: [...existing.items, option] };
+  }
+  return groups;
+}
 function createMuiSelectAdapter(options) {
   return function MuiSelect({
     id,
@@ -384,13 +419,14 @@ function createMuiSelectAdapter(options) {
   }) {
     const resolved = useResolvedMuiAdapterOptions(options);
     const normalizedOptions = normalizeOptions(selectOptions);
+    const groupedOptions = groupSelectOptions(normalizedOptions);
     const selectSlotProps = resolved.muiSlotProps?.select;
     const menuProps = { ...selectSlotProps?.MenuProps, ...resolved.muiSlotProps?.selectMenu };
     const slotInputProps = selectSlotProps?.inputProps;
     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(String(event.target.value));
+    const handleChange = (event) => onChange(event.target.value);
     return /* @__PURE__ */ jsxs4(
       FormControl2,
       {
@@ -435,10 +471,22 @@ function createMuiSelectAdapter(options) {
                 ...describedBy === void 0 ? {} : { "aria-describedby": describedBy },
                 ...ariaLabelledBy === void 0 ? {} : { "aria-labelledby": ariaLabelledBy }
               },
-              children: normalizedOptions.map((option) => /* @__PURE__ */ jsx7(MenuItem, { value: option.value, disabled: option.disabled, children: renderOption === void 0 ? /* @__PURE__ */ jsxs4(Fragment, { children: [
-                option.icon === void 0 ? null : /* @__PURE__ */ jsx7(ListItemIcon, { sx: { minWidth: 32 }, children: option.icon }),
-                /* @__PURE__ */ jsx7(ListItemText, { primary: option.label, secondary: option.description })
-              ] }) : renderOption(option) }, option.value))
+              children: groupedOptions.flatMap((group) => [
+                group.groupLabel === void 0 ? null : /* @__PURE__ */ jsx7(SelectGroupHeader, { children: group.groupLabel }, `header-${group.groupKey ?? group.groupLabel}`),
+                ...group.items.map((option) => /* @__PURE__ */ jsx7(
+                  MenuItem,
+                  {
+                    value: option.value,
+                    disabled: option.disabled,
+                    ...option.group === void 0 && option.groupLabel === void 0 && option.kind === void 0 ? {} : { "aria-label": option.label },
+                    children: renderOption === void 0 ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+                      option.icon === void 0 ? null : /* @__PURE__ */ jsx7(ListItemIcon, { sx: { minWidth: 32 }, children: option.icon }),
+                      /* @__PURE__ */ jsx7(ListItemText, { primary: option.label, secondary: option.description })
+                    ] }) : renderOption(option)
+                  },
+                  option.value
+                ))
+              ])
             }
           ),
           helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ jsx7(FormHelperText2, { id: helperId, children: helperText })
@@ -447,7 +495,10 @@ function createMuiSelectAdapter(options) {
     );
   };
 }
-var MuiSelectAdapter = createMuiSelectAdapter();
+function MuiSelectAdapter(props) {
+  const Adapter = createMuiSelectAdapter();
+  return /* @__PURE__ */ jsx7(Adapter, { ...props });
+}
 
 // src/adapters/TextArea.tsx
 import { TextField } from "@mui/material";
@@ -884,6 +935,24 @@ function createMuiFieldEditorSlot(options) {
     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(
+      (type) => allowedTypes.includes(type)
+    ).map((type) => {
+      const definition = DEFAULT_FIELD_TYPE_DEFINITIONS.find((candidate) => candidate.type === type);
+      const group = definition?.category;
+      return {
+        value: type,
+        label: translate(definition?.labelKey ?? `builder.fieldType.${type}`),
+        description: translate(`builder.fieldTypeDescription.${type}`),
+        icon: components.renderFieldTypeIcon(type),
+        ...group === void 0 ? {} : {
+          group,
+          groupLabel: translate(`builder.fieldCategory.${group}`)
+        }
+      };
+    });
     const changeFieldType = (nextType) => {
       if (allowedTypes.includes(nextType)) actions.changeFieldType(field.id, nextType);
     };
@@ -936,19 +1005,11 @@ function createMuiFieldEditorSlot(options) {
               FieldTypeSelect === void 0 ? /* @__PURE__ */ jsx13(
                 Select2,
                 {
-                  id: `mui-field-${field.id}-type`,
+                  id: fieldTypeSelectId,
                   name: `fields.${field.id}.type`,
-                  label: translate("builder.type"),
+                  label: fieldTypeSelectLabel,
                   value: allowedTypes.includes(field.type) ? field.type : "",
-                  options: FIELD_TYPES.filter((type) => allowedTypes.includes(type)).map((type) => {
-                    const definition = 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 }
-                    };
-                  }),
+                  options: fieldTypeOptions,
                   disabled: readOnly,
                   onChange: (value) => {
                     if (isFieldType(value)) changeFieldType(value);
@@ -957,11 +1018,16 @@ function createMuiFieldEditorSlot(options) {
               ) : /* @__PURE__ */ jsx13(
                 FieldTypeSelect,
                 {
+                  id: fieldTypeSelectId,
+                  name: `fields.${field.id}.type`,
+                  label: fieldTypeSelectLabel,
                   currentType: field.type,
                   allowedTypes,
+                  options: fieldTypeOptions,
                   onChangeType: changeFieldType,
                   disabled: readOnly,
                   readOnly,
+                  "aria-labelledby": `${fieldTypeSelectId}-label`,
                   renderIcon: components.renderFieldTypeIcon
                 }
               )

package/package.json

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