@form-engine-ts/react 3.0.0 → 3.2.0

package/README.md

@@ -95,7 +95,25 @@ translation lifecycle.
 When either is enabled, the builder omits its `form-engine-builder` and `feb-*` classes. Injected `TextInput`, `TextArea`,
 and `Select` components receive the field `label` and accessibility attributes and are responsible for rendering their
 own labels. Builder action icons can be supplied with `renderIcon`, which resolves `actionType` values such as
-`moveUp`, `moveDown`, `delete`, and `add`.
+`moveUp`, `moveDown`, `delete`, and `add`. `renderFieldTypeIcon` supplies icons for field-type selectors. Select
+options may be strings or `BuilderSelectOption` objects with `icon`, `description`, `kind`, and `metadata`; custom
+`renderOption` and `renderValue` functions can control their presentation. `BUILDER_TRANSLATION_KEYS` exposes the
+canonical typed builder translation keys while legacy catalog aliases remain supported.
+
+The `fieldEditor` slot can expose only the type selector or header through `fieldTypeSelect` and `fieldEditorHeader`:
+
+```tsx
+<FormBuilder
+  schema={schema}
+  onChange={setSchema}
+  slots={{
+    fieldTypeSelect: ({ currentType, onChangeType }) => (
+      <button type="button" onClick={() => onChangeType("textarea")}>{currentType}</button>
+    ),
+    fieldEditorHeader: ({ field }) => <h3>{field.title}</h3>
+  }}
+/>
+```
 
 ```tsx
 <FormBuilder

package/dist/index.cjs

@@ -20,6 +20,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  BUILDER_TRANSLATION_ALIASES: () => BUILDER_TRANSLATION_ALIASES,
+  BUILDER_TRANSLATION_KEYS: () => BUILDER_TRANSLATION_KEYS,
   FormBuilder: () => FormBuilder,
   FormProvider: () => FormProvider,
   FormRenderer: () => FormRenderer,
@@ -774,6 +776,33 @@ function useFormBuilder({
   };
 }
 
+// src/i18n.ts
+var BUILDER_TRANSLATION_KEYS = {
+  ADD_FIELD: "builder.actions.addField",
+  SELECT_FIELD_TYPE: "builder.fields.selectType",
+  SELECT_LOCALE_TO_ADD: "builder.localization.selectLocaleToAdd",
+  FIELD_TYPE_TEXT: "builder.fields.typeText",
+  FIELD_TYPE_TEXTAREA: "builder.fields.typeTextarea",
+  FIELD_TYPE_NUMBER: "builder.fields.typeNumber",
+  FIELD_TYPE_RATING: "builder.fields.typeRating",
+  FIELD_TYPE_RADIO: "builder.fields.typeRadio",
+  FIELD_TYPE_CHECKBOX: "builder.fields.typeCheckbox",
+  FIELD_TYPE_SELECT: "builder.fields.typeSelect",
+  FIELD_TYPE_MULTI_SELECT: "builder.fields.typeMultiSelect"
+};
+var BUILDER_TRANSLATION_ALIASES = {
+  "builder.actions.addField": "builder.addQuestion",
+  "builder.localization.selectLocaleToAdd": "builder.selectLocaleToAdd",
+  "builder.fields.typeText": "builder.fieldType.text",
+  "builder.fields.typeTextarea": "builder.fieldType.textarea",
+  "builder.fields.typeNumber": "builder.fieldType.number",
+  "builder.fields.typeRating": "builder.fieldType.rating",
+  "builder.fields.typeRadio": "builder.fieldType.radio",
+  "builder.fields.typeCheckbox": "builder.fieldType.checkbox",
+  "builder.fields.typeSelect": "builder.fieldType.select",
+  "builder.fields.typeMultiSelect": "builder.fieldType.multi-select"
+};
+
 // src/builder.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 function DefaultButton({
@@ -844,6 +873,26 @@ function defaultIconFor(actionType) {
       return "\u6587";
   }
 }
+function defaultFieldTypeIcon(type) {
+  switch (type) {
+    case "text":
+      return "T";
+    case "textarea":
+      return "\u2261";
+    case "number":
+      return "#";
+    case "rating":
+      return "\u2605";
+    case "select":
+      return "\u25BE";
+    case "multi-select":
+      return "\u2611";
+    case "checkbox":
+      return "\u25A1";
+    case "radio":
+      return "\u25C9";
+  }
+}
 function DefaultTextInput({
   id,
   className,
@@ -956,8 +1005,15 @@ function DefaultSelect({
   helperText,
   value,
   onChange,
-  options
+  onKeyDown,
+  options,
+  renderOption,
+  renderValue
 }) {
+  const normalizedOptions = options.map(
+    (option) => typeof option === "string" ? { value: option, label: option } : option
+  );
+  const selectedOption = normalizedOptions.find((option) => option.value === value);
   const labelElement = label === void 0 ? null : id === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: label }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: id, children: label });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     labelElement,
@@ -975,9 +1031,11 @@ function DefaultSelect({
         "aria-invalid": error === true ? true : void 0,
         value,
         onChange: (event) => onChange(event.currentTarget.value),
-        children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
+        onKeyDown,
+        children: normalizedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: option.value, disabled: option.disabled, children: renderOption === void 0 ? option.label : renderOption(option) }, option.value))
       }
     ),
+    renderValue === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("output", { children: renderValue(selectedOption) }),
     helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { id: ariaDescribedBy, children: helperText })
   ] });
 }
@@ -1065,7 +1123,8 @@ var DEFAULT_COMPONENTS = {
   Section: DefaultSection,
   Fieldset: DefaultFieldset,
   ErrorMessage: DefaultErrorMessage,
-  renderIcon: defaultIconFor
+  renderIcon: defaultIconFor,
+  renderFieldTypeIcon: defaultFieldTypeIcon
 };
 var BuilderPrimitiveContext = (0, import_react2.createContext)({
   components: DEFAULT_COMPONENTS,
@@ -1266,6 +1325,16 @@ var BUILDER_DEFAULTS = {
   "builder.actions.close": "Close",
   "builder.actions.dragHandle": "Reorder",
   "builder.translationUnavailable": "Provide an async translation adapter to enable automatic translation.",
+  "builder.fields.selectType": "Select field type",
+  "builder.fields.typeText": "Text",
+  "builder.fields.typeTextarea": "Textarea",
+  "builder.fields.typeNumber": "Number",
+  "builder.fields.typeRating": "Rating",
+  "builder.fields.typeSelect": "Select",
+  "builder.fields.typeMultiSelect": "Multi-select",
+  "builder.fields.typeCheckbox": "Checkbox",
+  "builder.fields.typeRadio": "Radio",
+  "builder.actions.addField": "Add question",
   "builder.fieldType.text": "Text",
   "builder.fieldType.textarea": "Textarea",
   "builder.fieldType.number": "Number",
@@ -1302,7 +1371,7 @@ function OrderedBuilderSections({
   return groups.map((group, index) => ({ group, index, rank: ranks.get(sectionGroupName(group) ?? "questions") ?? order.length })).sort((left, right) => left.rank - right.rank || left.index - right.index).map(({ group }) => group);
 }
 function fieldTypeKey(type) {
-  return `builder.fieldType.${type}`;
+  return import_core2.DEFAULT_FIELD_TYPE_DEFINITIONS.find((definition) => definition.type === type)?.labelKey ?? `builder.fieldType.${type}`;
 }
 function operatorKey(operator) {
   return `builder.operator.${operator}`;
@@ -1463,7 +1532,8 @@ function FormBuilder({
   const resolvedComponents = { ...DEFAULT_COMPONENTS, ...componentOverrides };
   const components = {
     ...GUARDED_COMPONENTS,
-    renderIcon: resolvedComponents.renderIcon
+    renderIcon: resolvedComponents.renderIcon,
+    renderFieldTypeIcon: resolvedComponents.renderFieldTypeIcon
   };
   const defaultStylesDisabled = disableDefaultStyles || unstyled;
   const builderClass = (value) => defaultStylesDisabled ? void 0 : value;
@@ -1494,6 +1564,12 @@ function FormBuilder({
       if (typeof value === "string" || typeof value === "number") translatorParams[name] = value;
     }
     const translated = translator?.translate(key, locale, translatorParams);
+    if (translated !== void 0 && translated !== key) return translated;
+    const alias = BUILDER_TRANSLATION_ALIASES[key];
+    if (alias !== void 0) {
+      const aliased = translator?.translate(alias, locale, translatorParams);
+      if (aliased !== void 0 && aliased !== alias) return aliased;
+    }
     return translated === void 0 ? interpolate(BUILDER_DEFAULTS[key] ?? key, params) : translated;
   };
   const pagesEnabled = features?.pages ?? true;
@@ -2229,6 +2305,7 @@ function FormBuilder({
                     index,
                     currentLocale: editingLocale,
                     translate,
+                    ...slots === void 0 ? {} : { slots },
                     ...policy === void 0 ? {} : { policy },
                     ...features === void 0 ? {} : { features },
                     readOnly,
@@ -2600,7 +2677,7 @@ function FormBuilder({
                 action: "addField",
                 disabled: initialFieldType === null || maxFieldsReached,
                 onClick: addField,
-                children: translate("builder.addQuestion")
+                children: translate(BUILDER_TRANSLATION_KEYS.ADD_FIELD)
               }
             ) })
           ] }) })
@@ -3878,6 +3955,8 @@ function FormRenderer(props) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BUILDER_TRANSLATION_ALIASES,
+  BUILDER_TRANSLATION_KEYS,
   FormBuilder,
   FormProvider,
   FormRenderer,

package/dist/index.d.cts

@@ -1,6 +1,7 @@
+import { QuestionType, FormField, ChoiceOption, FormPage, FormSchema, DisplayCondition, JsonValue, SchemaIssue, FormPolicy, Question, FieldOption, TranslationReport, ValidationError, FormValues, TranslationAdapter, AsyncTranslationAdapter, PopulateTranslationOptions, FormValue, ValidationIssue, AnswerValidationResult, FieldType } from '@form-engine-ts/core';
+export { QuestionType } from '@form-engine-ts/core';
 import * as react from 'react';
 import { ReactNode, ComponentType, KeyboardEvent, MouseEvent } from 'react';
-import { QuestionType, FormField, ChoiceOption, FormPage, FormSchema, DisplayCondition, JsonValue, SchemaIssue, FormPolicy, FieldOption, TranslationReport, ValidationError, FormValues, TranslationAdapter, AsyncTranslationAdapter, PopulateTranslationOptions, FormValue, ValidationIssue, AnswerValidationResult, FieldType } from '@form-engine-ts/core';
 import { SensitiveDataFinding } from '@form-engine-ts/privacy';
 
 interface SubmissionAttempt {
@@ -180,13 +181,24 @@ interface BuilderTextInputProps extends InputComponentProps {
 interface BuilderTextAreaProps extends InputComponentProps {
     readonly rows?: number;
 }
-interface BuilderSelectOption {
+interface BuilderSelectOption<T extends string = string> {
     readonly label: string;
-    readonly value: string;
+    readonly value: T;
+    readonly icon?: ReactNode;
+    readonly description?: string;
     readonly disabled?: boolean;
+    readonly kind?: string;
+    readonly metadata?: Readonly<Record<string, unknown>>;
+}
+interface SelectComponentProps extends InputComponentProps {
+    readonly options: readonly (string | BuilderSelectOption)[];
+    readonly renderOption?: (option: BuilderSelectOption) => ReactNode;
+    readonly renderValue?: (option: BuilderSelectOption | undefined) => ReactNode;
 }
 interface BuilderSelectProps extends InputComponentProps {
     readonly options: readonly BuilderSelectOption[];
+    readonly renderOption?: (option: BuilderSelectOption) => ReactNode;
+    readonly renderValue?: (option: BuilderSelectOption | undefined) => ReactNode;
 }
 interface BuilderCheckboxProps extends ComponentBaseProps {
     readonly name?: string;
@@ -229,6 +241,7 @@ interface FormBuilderComponents {
         readonly message: string;
     }>;
     readonly renderIcon?: (actionType: BuilderActionIconType) => ReactNode;
+    readonly renderFieldTypeIcon?: (type: QuestionType) => ReactNode;
 }
 type FormBuilderActions = Omit<FormBuilderResult, "schema" | "validationIssues">;
 interface ManualTranslationTarget {
@@ -265,6 +278,21 @@ interface BuilderFieldEditorSlotProps extends BuilderSlotBaseProps {
         readonly localization?: boolean;
         readonly conditions?: boolean;
     };
+    readonly slots?: Pick<FormBuilderSlots, "fieldTypeSelect" | "fieldEditorHeader">;
+}
+interface FieldTypeSelectSlotProps {
+    readonly currentType: QuestionType;
+    readonly allowedTypes: readonly QuestionType[];
+    readonly onChangeType: (nextType: QuestionType) => void;
+    readonly disabled?: boolean;
+    readonly readOnly?: boolean;
+    readonly renderIcon?: (type: QuestionType) => ReactNode;
+}
+interface FieldEditorHeaderSlotProps {
+    readonly field: Question;
+    readonly index: number;
+    readonly totalFields: number;
+    readonly actions: FormBuilderActions;
 }
 interface BuilderOptionEditorSlotProps extends BuilderSlotBaseProps {
     readonly field: FormField & {
@@ -309,6 +337,8 @@ type FormBuilderSectionName = "basicSettings" | "completionMessage" | "questions
 interface FormBuilderSlots {
     readonly toolbar?: ComponentType<BuilderToolbarSlotProps>;
     readonly fieldEditor?: ComponentType<BuilderFieldEditorSlotProps>;
+    readonly fieldTypeSelect?: ComponentType<FieldTypeSelectSlotProps>;
+    readonly fieldEditorHeader?: ComponentType<FieldEditorHeaderSlotProps>;
     readonly optionEditor?: ComponentType<BuilderOptionEditorSlotProps>;
     readonly pages?: ComponentType<BuilderPagesSlotProps>;
     readonly localization?: ComponentType<BuilderLocalizationSlotProps>;
@@ -555,6 +585,23 @@ interface FieldState {
 }
 declare function useField(fieldId: string): FieldState;
 
+declare const BUILDER_TRANSLATION_KEYS: {
+    readonly ADD_FIELD: "builder.actions.addField";
+    readonly SELECT_FIELD_TYPE: "builder.fields.selectType";
+    readonly SELECT_LOCALE_TO_ADD: "builder.localization.selectLocaleToAdd";
+    readonly FIELD_TYPE_TEXT: "builder.fields.typeText";
+    readonly FIELD_TYPE_TEXTAREA: "builder.fields.typeTextarea";
+    readonly FIELD_TYPE_NUMBER: "builder.fields.typeNumber";
+    readonly FIELD_TYPE_RATING: "builder.fields.typeRating";
+    readonly FIELD_TYPE_RADIO: "builder.fields.typeRadio";
+    readonly FIELD_TYPE_CHECKBOX: "builder.fields.typeCheckbox";
+    readonly FIELD_TYPE_SELECT: "builder.fields.typeSelect";
+    readonly FIELD_TYPE_MULTI_SELECT: "builder.fields.typeMultiSelect";
+};
+type BuilderTranslationKey = (typeof BUILDER_TRANSLATION_KEYS)[keyof typeof BUILDER_TRANSLATION_KEYS];
+/** Legacy keys are checked when an older catalog does not contain a canonical key. */
+declare const BUILDER_TRANSLATION_ALIASES: Readonly<Record<string, string>>;
+
 interface FieldComponentProps {
     readonly field: FormField;
     readonly value: FormValue;
@@ -601,4 +648,4 @@ interface StandaloneFormRendererProps extends FormRendererPresentationProps {
 type FormRendererProps = FormRendererPresentationProps | StandaloneFormRendererProps;
 declare function FormRenderer(props: FormRendererProps): react.JSX.Element;
 
-export { type BeforeSubmit, type BuilderActionContext, type BuilderActionError, type BuilderActionIconType, type BuilderActionResult, type BuilderButtonProps, type BuilderCheckboxProps, type BuilderErrorMessageProps, type BuilderFactories, type BuilderFieldEditorSlotProps, type BuilderFieldsetProps, type BuilderIconButtonProps, type BuilderIdKind, type BuilderLocalizationSlotProps, type BuilderOptionEditorSlotProps, type BuilderPagesSlotProps, type BuilderPolicy, type BuilderSectionProps, type BuilderSelectOption, type BuilderSelectProps, type BuilderSlotActions, type BuilderTextAreaProps, type BuilderTextInputProps, type BuilderTextTarget, type BuilderToolbarSlotProps, type BuilderTranslationActionsSlotProps, type ComponentBaseProps, type FieldComponentProps, type FieldComponents, type FieldState, FormBuilder, type FormBuilderActions, type FormBuilderComponents, type FormBuilderFeatures, type FormBuilderOptions, type FormBuilderProps, type FormBuilderResult, type FormBuilderSectionName, type FormBuilderSlots, type FormCompletionSlotProps, type FormContextValue, type FormFieldsSlotProps, FormProvider, type FormProviderProps, FormRenderer, type FormRendererMessages, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlots, type FormServerErrorPayload, FormSubmissionError, type FormSubmitHandler, type FormSubmitState, type FormSubmitStatus, type FormSubmittedAnswerItem, type FormSuccessRenderMode, type IconButtonProps, type InputComponentProps, type LocalizationSummaryContext, type ManualTranslationContext, type ManualTranslationTarget, type RenderSubmitButtonProps, type StandaloneFormRendererProps, type SubmissionAttempt, type SubmissionAttemptStore, type SubmissionConfirmationRenderMode, type SubmissionConfirmationSlotProps, type SubmissionGuard, type SubmissionGuardResult, type SubmissionProtectionProps, type SubmissionReceipt, type SubmissionReceiptQuery, type SubmissionReceiptStore, type SubmitContext, type SubmitResponse, type SubmitResult, type SubmitStatus, type UseSubmissionReceiptsResult, createLocalStorageSubmissionAttemptStore, createLocalStorageSubmissionReceiptStore, resolveInitialFieldType, submissionReceiptQueryKey, useField, useForm, useFormBuilder, useSubmissionReceipts };
+export { BUILDER_TRANSLATION_ALIASES, BUILDER_TRANSLATION_KEYS, type BeforeSubmit, type BuilderActionContext, type BuilderActionError, type BuilderActionIconType, type BuilderActionResult, type BuilderButtonProps, type BuilderCheckboxProps, type BuilderErrorMessageProps, type BuilderFactories, type BuilderFieldEditorSlotProps, type BuilderFieldsetProps, type BuilderIconButtonProps, type BuilderIdKind, type BuilderLocalizationSlotProps, type BuilderOptionEditorSlotProps, type BuilderPagesSlotProps, type BuilderPolicy, type BuilderSectionProps, type BuilderSelectOption, type BuilderSelectProps, type BuilderSlotActions, type BuilderTextAreaProps, type BuilderTextInputProps, type BuilderTextTarget, type BuilderToolbarSlotProps, type BuilderTranslationActionsSlotProps, type BuilderTranslationKey, type ComponentBaseProps, type FieldComponentProps, type FieldComponents, type FieldEditorHeaderSlotProps, type FieldState, type FieldTypeSelectSlotProps, FormBuilder, type FormBuilderActions, type FormBuilderComponents, type FormBuilderFeatures, type FormBuilderOptions, type FormBuilderProps, type FormBuilderResult, type FormBuilderSectionName, type FormBuilderSlots, type FormCompletionSlotProps, type FormContextValue, type FormFieldsSlotProps, FormProvider, type FormProviderProps, FormRenderer, type FormRendererMessages, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlots, type FormServerErrorPayload, FormSubmissionError, type FormSubmitHandler, type FormSubmitState, type FormSubmitStatus, type FormSubmittedAnswerItem, type FormSuccessRenderMode, type IconButtonProps, type InputComponentProps, type LocalizationSummaryContext, type ManualTranslationContext, type ManualTranslationTarget, type RenderSubmitButtonProps, type SelectComponentProps, type StandaloneFormRendererProps, type SubmissionAttempt, type SubmissionAttemptStore, type SubmissionConfirmationRenderMode, type SubmissionConfirmationSlotProps, type SubmissionGuard, type SubmissionGuardResult, type SubmissionProtectionProps, type SubmissionReceipt, type SubmissionReceiptQuery, type SubmissionReceiptStore, type SubmitContext, type SubmitResponse, type SubmitResult, type SubmitStatus, type UseSubmissionReceiptsResult, createLocalStorageSubmissionAttemptStore, createLocalStorageSubmissionReceiptStore, resolveInitialFieldType, submissionReceiptQueryKey, useField, useForm, useFormBuilder, useSubmissionReceipts };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
+import { QuestionType, FormField, ChoiceOption, FormPage, FormSchema, DisplayCondition, JsonValue, SchemaIssue, FormPolicy, Question, FieldOption, TranslationReport, ValidationError, FormValues, TranslationAdapter, AsyncTranslationAdapter, PopulateTranslationOptions, FormValue, ValidationIssue, AnswerValidationResult, FieldType } from '@form-engine-ts/core';
+export { QuestionType } from '@form-engine-ts/core';
 import * as react from 'react';
 import { ReactNode, ComponentType, KeyboardEvent, MouseEvent } from 'react';
-import { QuestionType, FormField, ChoiceOption, FormPage, FormSchema, DisplayCondition, JsonValue, SchemaIssue, FormPolicy, FieldOption, TranslationReport, ValidationError, FormValues, TranslationAdapter, AsyncTranslationAdapter, PopulateTranslationOptions, FormValue, ValidationIssue, AnswerValidationResult, FieldType } from '@form-engine-ts/core';
 import { SensitiveDataFinding } from '@form-engine-ts/privacy';
 
 interface SubmissionAttempt {
@@ -180,13 +181,24 @@ interface BuilderTextInputProps extends InputComponentProps {
 interface BuilderTextAreaProps extends InputComponentProps {
     readonly rows?: number;
 }
-interface BuilderSelectOption {
+interface BuilderSelectOption<T extends string = string> {
     readonly label: string;
-    readonly value: string;
+    readonly value: T;
+    readonly icon?: ReactNode;
+    readonly description?: string;
     readonly disabled?: boolean;
+    readonly kind?: string;
+    readonly metadata?: Readonly<Record<string, unknown>>;
+}
+interface SelectComponentProps extends InputComponentProps {
+    readonly options: readonly (string | BuilderSelectOption)[];
+    readonly renderOption?: (option: BuilderSelectOption) => ReactNode;
+    readonly renderValue?: (option: BuilderSelectOption | undefined) => ReactNode;
 }
 interface BuilderSelectProps extends InputComponentProps {
     readonly options: readonly BuilderSelectOption[];
+    readonly renderOption?: (option: BuilderSelectOption) => ReactNode;
+    readonly renderValue?: (option: BuilderSelectOption | undefined) => ReactNode;
 }
 interface BuilderCheckboxProps extends ComponentBaseProps {
     readonly name?: string;
@@ -229,6 +241,7 @@ interface FormBuilderComponents {
         readonly message: string;
     }>;
     readonly renderIcon?: (actionType: BuilderActionIconType) => ReactNode;
+    readonly renderFieldTypeIcon?: (type: QuestionType) => ReactNode;
 }
 type FormBuilderActions = Omit<FormBuilderResult, "schema" | "validationIssues">;
 interface ManualTranslationTarget {
@@ -265,6 +278,21 @@ interface BuilderFieldEditorSlotProps extends BuilderSlotBaseProps {
         readonly localization?: boolean;
         readonly conditions?: boolean;
     };
+    readonly slots?: Pick<FormBuilderSlots, "fieldTypeSelect" | "fieldEditorHeader">;
+}
+interface FieldTypeSelectSlotProps {
+    readonly currentType: QuestionType;
+    readonly allowedTypes: readonly QuestionType[];
+    readonly onChangeType: (nextType: QuestionType) => void;
+    readonly disabled?: boolean;
+    readonly readOnly?: boolean;
+    readonly renderIcon?: (type: QuestionType) => ReactNode;
+}
+interface FieldEditorHeaderSlotProps {
+    readonly field: Question;
+    readonly index: number;
+    readonly totalFields: number;
+    readonly actions: FormBuilderActions;
 }
 interface BuilderOptionEditorSlotProps extends BuilderSlotBaseProps {
     readonly field: FormField & {
@@ -309,6 +337,8 @@ type FormBuilderSectionName = "basicSettings" | "completionMessage" | "questions
 interface FormBuilderSlots {
     readonly toolbar?: ComponentType<BuilderToolbarSlotProps>;
     readonly fieldEditor?: ComponentType<BuilderFieldEditorSlotProps>;
+    readonly fieldTypeSelect?: ComponentType<FieldTypeSelectSlotProps>;
+    readonly fieldEditorHeader?: ComponentType<FieldEditorHeaderSlotProps>;
     readonly optionEditor?: ComponentType<BuilderOptionEditorSlotProps>;
     readonly pages?: ComponentType<BuilderPagesSlotProps>;
     readonly localization?: ComponentType<BuilderLocalizationSlotProps>;
@@ -555,6 +585,23 @@ interface FieldState {
 }
 declare function useField(fieldId: string): FieldState;
 
+declare const BUILDER_TRANSLATION_KEYS: {
+    readonly ADD_FIELD: "builder.actions.addField";
+    readonly SELECT_FIELD_TYPE: "builder.fields.selectType";
+    readonly SELECT_LOCALE_TO_ADD: "builder.localization.selectLocaleToAdd";
+    readonly FIELD_TYPE_TEXT: "builder.fields.typeText";
+    readonly FIELD_TYPE_TEXTAREA: "builder.fields.typeTextarea";
+    readonly FIELD_TYPE_NUMBER: "builder.fields.typeNumber";
+    readonly FIELD_TYPE_RATING: "builder.fields.typeRating";
+    readonly FIELD_TYPE_RADIO: "builder.fields.typeRadio";
+    readonly FIELD_TYPE_CHECKBOX: "builder.fields.typeCheckbox";
+    readonly FIELD_TYPE_SELECT: "builder.fields.typeSelect";
+    readonly FIELD_TYPE_MULTI_SELECT: "builder.fields.typeMultiSelect";
+};
+type BuilderTranslationKey = (typeof BUILDER_TRANSLATION_KEYS)[keyof typeof BUILDER_TRANSLATION_KEYS];
+/** Legacy keys are checked when an older catalog does not contain a canonical key. */
+declare const BUILDER_TRANSLATION_ALIASES: Readonly<Record<string, string>>;
+
 interface FieldComponentProps {
     readonly field: FormField;
     readonly value: FormValue;
@@ -601,4 +648,4 @@ interface StandaloneFormRendererProps extends FormRendererPresentationProps {
 type FormRendererProps = FormRendererPresentationProps | StandaloneFormRendererProps;
 declare function FormRenderer(props: FormRendererProps): react.JSX.Element;
 
-export { type BeforeSubmit, type BuilderActionContext, type BuilderActionError, type BuilderActionIconType, type BuilderActionResult, type BuilderButtonProps, type BuilderCheckboxProps, type BuilderErrorMessageProps, type BuilderFactories, type BuilderFieldEditorSlotProps, type BuilderFieldsetProps, type BuilderIconButtonProps, type BuilderIdKind, type BuilderLocalizationSlotProps, type BuilderOptionEditorSlotProps, type BuilderPagesSlotProps, type BuilderPolicy, type BuilderSectionProps, type BuilderSelectOption, type BuilderSelectProps, type BuilderSlotActions, type BuilderTextAreaProps, type BuilderTextInputProps, type BuilderTextTarget, type BuilderToolbarSlotProps, type BuilderTranslationActionsSlotProps, type ComponentBaseProps, type FieldComponentProps, type FieldComponents, type FieldState, FormBuilder, type FormBuilderActions, type FormBuilderComponents, type FormBuilderFeatures, type FormBuilderOptions, type FormBuilderProps, type FormBuilderResult, type FormBuilderSectionName, type FormBuilderSlots, type FormCompletionSlotProps, type FormContextValue, type FormFieldsSlotProps, FormProvider, type FormProviderProps, FormRenderer, type FormRendererMessages, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlots, type FormServerErrorPayload, FormSubmissionError, type FormSubmitHandler, type FormSubmitState, type FormSubmitStatus, type FormSubmittedAnswerItem, type FormSuccessRenderMode, type IconButtonProps, type InputComponentProps, type LocalizationSummaryContext, type ManualTranslationContext, type ManualTranslationTarget, type RenderSubmitButtonProps, type StandaloneFormRendererProps, type SubmissionAttempt, type SubmissionAttemptStore, type SubmissionConfirmationRenderMode, type SubmissionConfirmationSlotProps, type SubmissionGuard, type SubmissionGuardResult, type SubmissionProtectionProps, type SubmissionReceipt, type SubmissionReceiptQuery, type SubmissionReceiptStore, type SubmitContext, type SubmitResponse, type SubmitResult, type SubmitStatus, type UseSubmissionReceiptsResult, createLocalStorageSubmissionAttemptStore, createLocalStorageSubmissionReceiptStore, resolveInitialFieldType, submissionReceiptQueryKey, useField, useForm, useFormBuilder, useSubmissionReceipts };
+export { BUILDER_TRANSLATION_ALIASES, BUILDER_TRANSLATION_KEYS, type BeforeSubmit, type BuilderActionContext, type BuilderActionError, type BuilderActionIconType, type BuilderActionResult, type BuilderButtonProps, type BuilderCheckboxProps, type BuilderErrorMessageProps, type BuilderFactories, type BuilderFieldEditorSlotProps, type BuilderFieldsetProps, type BuilderIconButtonProps, type BuilderIdKind, type BuilderLocalizationSlotProps, type BuilderOptionEditorSlotProps, type BuilderPagesSlotProps, type BuilderPolicy, type BuilderSectionProps, type BuilderSelectOption, type BuilderSelectProps, type BuilderSlotActions, type BuilderTextAreaProps, type BuilderTextInputProps, type BuilderTextTarget, type BuilderToolbarSlotProps, type BuilderTranslationActionsSlotProps, type BuilderTranslationKey, type ComponentBaseProps, type FieldComponentProps, type FieldComponents, type FieldEditorHeaderSlotProps, type FieldState, type FieldTypeSelectSlotProps, FormBuilder, type FormBuilderActions, type FormBuilderComponents, type FormBuilderFeatures, type FormBuilderOptions, type FormBuilderProps, type FormBuilderResult, type FormBuilderSectionName, type FormBuilderSlots, type FormCompletionSlotProps, type FormContextValue, type FormFieldsSlotProps, FormProvider, type FormProviderProps, FormRenderer, type FormRendererMessages, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlots, type FormServerErrorPayload, FormSubmissionError, type FormSubmitHandler, type FormSubmitState, type FormSubmitStatus, type FormSubmittedAnswerItem, type FormSuccessRenderMode, type IconButtonProps, type InputComponentProps, type LocalizationSummaryContext, type ManualTranslationContext, type ManualTranslationTarget, type RenderSubmitButtonProps, type SelectComponentProps, type StandaloneFormRendererProps, type SubmissionAttempt, type SubmissionAttemptStore, type SubmissionConfirmationRenderMode, type SubmissionConfirmationSlotProps, type SubmissionGuard, type SubmissionGuardResult, type SubmissionProtectionProps, type SubmissionReceipt, type SubmissionReceiptQuery, type SubmissionReceiptStore, type SubmitContext, type SubmitResponse, type SubmitResult, type SubmitStatus, type UseSubmissionReceiptsResult, createLocalStorageSubmissionAttemptStore, createLocalStorageSubmissionReceiptStore, resolveInitialFieldType, submissionReceiptQueryKey, useField, useForm, useFormBuilder, useSubmissionReceipts };

package/dist/index.js

@@ -99,6 +99,7 @@ function createLocalStorageSubmissionAttemptStore(options = {}) {
 
 // src/builder.tsx
 import {
+  DEFAULT_FIELD_TYPE_DEFINITIONS,
   populateSchemaTranslations
 } from "@form-engine-ts/core";
 import { Children, createContext, isValidElement, useContext, useState } from "react";
@@ -743,6 +744,33 @@ function useFormBuilder({
   };
 }
 
+// src/i18n.ts
+var BUILDER_TRANSLATION_KEYS = {
+  ADD_FIELD: "builder.actions.addField",
+  SELECT_FIELD_TYPE: "builder.fields.selectType",
+  SELECT_LOCALE_TO_ADD: "builder.localization.selectLocaleToAdd",
+  FIELD_TYPE_TEXT: "builder.fields.typeText",
+  FIELD_TYPE_TEXTAREA: "builder.fields.typeTextarea",
+  FIELD_TYPE_NUMBER: "builder.fields.typeNumber",
+  FIELD_TYPE_RATING: "builder.fields.typeRating",
+  FIELD_TYPE_RADIO: "builder.fields.typeRadio",
+  FIELD_TYPE_CHECKBOX: "builder.fields.typeCheckbox",
+  FIELD_TYPE_SELECT: "builder.fields.typeSelect",
+  FIELD_TYPE_MULTI_SELECT: "builder.fields.typeMultiSelect"
+};
+var BUILDER_TRANSLATION_ALIASES = {
+  "builder.actions.addField": "builder.addQuestion",
+  "builder.localization.selectLocaleToAdd": "builder.selectLocaleToAdd",
+  "builder.fields.typeText": "builder.fieldType.text",
+  "builder.fields.typeTextarea": "builder.fieldType.textarea",
+  "builder.fields.typeNumber": "builder.fieldType.number",
+  "builder.fields.typeRating": "builder.fieldType.rating",
+  "builder.fields.typeRadio": "builder.fieldType.radio",
+  "builder.fields.typeCheckbox": "builder.fieldType.checkbox",
+  "builder.fields.typeSelect": "builder.fieldType.select",
+  "builder.fields.typeMultiSelect": "builder.fieldType.multi-select"
+};
+
 // src/builder.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function DefaultButton({
@@ -813,6 +841,26 @@ function defaultIconFor(actionType) {
       return "\u6587";
   }
 }
+function defaultFieldTypeIcon(type) {
+  switch (type) {
+    case "text":
+      return "T";
+    case "textarea":
+      return "\u2261";
+    case "number":
+      return "#";
+    case "rating":
+      return "\u2605";
+    case "select":
+      return "\u25BE";
+    case "multi-select":
+      return "\u2611";
+    case "checkbox":
+      return "\u25A1";
+    case "radio":
+      return "\u25C9";
+  }
+}
 function DefaultTextInput({
   id,
   className,
@@ -925,8 +973,15 @@ function DefaultSelect({
   helperText,
   value,
   onChange,
-  options
+  onKeyDown,
+  options,
+  renderOption,
+  renderValue
 }) {
+  const normalizedOptions = options.map(
+    (option) => typeof option === "string" ? { value: option, label: option } : option
+  );
+  const selectedOption = normalizedOptions.find((option) => option.value === value);
   const labelElement = label === void 0 ? null : id === void 0 ? /* @__PURE__ */ jsx("span", { children: label }) : /* @__PURE__ */ jsx("label", { htmlFor: id, children: label });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     labelElement,
@@ -944,9 +999,11 @@ function DefaultSelect({
         "aria-invalid": error === true ? true : void 0,
         value,
         onChange: (event) => onChange(event.currentTarget.value),
-        children: options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
+        onKeyDown,
+        children: normalizedOptions.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, disabled: option.disabled, children: renderOption === void 0 ? option.label : renderOption(option) }, option.value))
       }
     ),
+    renderValue === void 0 ? null : /* @__PURE__ */ jsx("output", { children: renderValue(selectedOption) }),
     helperText === void 0 || helperText.length === 0 ? null : /* @__PURE__ */ jsx("small", { id: ariaDescribedBy, children: helperText })
   ] });
 }
@@ -1034,7 +1091,8 @@ var DEFAULT_COMPONENTS = {
   Section: DefaultSection,
   Fieldset: DefaultFieldset,
   ErrorMessage: DefaultErrorMessage,
-  renderIcon: defaultIconFor
+  renderIcon: defaultIconFor,
+  renderFieldTypeIcon: defaultFieldTypeIcon
 };
 var BuilderPrimitiveContext = createContext({
   components: DEFAULT_COMPONENTS,
@@ -1235,6 +1293,16 @@ var BUILDER_DEFAULTS = {
   "builder.actions.close": "Close",
   "builder.actions.dragHandle": "Reorder",
   "builder.translationUnavailable": "Provide an async translation adapter to enable automatic translation.",
+  "builder.fields.selectType": "Select field type",
+  "builder.fields.typeText": "Text",
+  "builder.fields.typeTextarea": "Textarea",
+  "builder.fields.typeNumber": "Number",
+  "builder.fields.typeRating": "Rating",
+  "builder.fields.typeSelect": "Select",
+  "builder.fields.typeMultiSelect": "Multi-select",
+  "builder.fields.typeCheckbox": "Checkbox",
+  "builder.fields.typeRadio": "Radio",
+  "builder.actions.addField": "Add question",
   "builder.fieldType.text": "Text",
   "builder.fieldType.textarea": "Textarea",
   "builder.fieldType.number": "Number",
@@ -1271,7 +1339,7 @@ function OrderedBuilderSections({
   return groups.map((group, index) => ({ group, index, rank: ranks.get(sectionGroupName(group) ?? "questions") ?? order.length })).sort((left, right) => left.rank - right.rank || left.index - right.index).map(({ group }) => group);
 }
 function fieldTypeKey(type) {
-  return `builder.fieldType.${type}`;
+  return DEFAULT_FIELD_TYPE_DEFINITIONS.find((definition) => definition.type === type)?.labelKey ?? `builder.fieldType.${type}`;
 }
 function operatorKey(operator) {
   return `builder.operator.${operator}`;
@@ -1432,7 +1500,8 @@ function FormBuilder({
   const resolvedComponents = { ...DEFAULT_COMPONENTS, ...componentOverrides };
   const components = {
     ...GUARDED_COMPONENTS,
-    renderIcon: resolvedComponents.renderIcon
+    renderIcon: resolvedComponents.renderIcon,
+    renderFieldTypeIcon: resolvedComponents.renderFieldTypeIcon
   };
   const defaultStylesDisabled = disableDefaultStyles || unstyled;
   const builderClass = (value) => defaultStylesDisabled ? void 0 : value;
@@ -1463,6 +1532,12 @@ function FormBuilder({
       if (typeof value === "string" || typeof value === "number") translatorParams[name] = value;
     }
     const translated = translator?.translate(key, locale, translatorParams);
+    if (translated !== void 0 && translated !== key) return translated;
+    const alias = BUILDER_TRANSLATION_ALIASES[key];
+    if (alias !== void 0) {
+      const aliased = translator?.translate(alias, locale, translatorParams);
+      if (aliased !== void 0 && aliased !== alias) return aliased;
+    }
     return translated === void 0 ? interpolate(BUILDER_DEFAULTS[key] ?? key, params) : translated;
   };
   const pagesEnabled = features?.pages ?? true;
@@ -2198,6 +2273,7 @@ function FormBuilder({
                     index,
                     currentLocale: editingLocale,
                     translate,
+                    ...slots === void 0 ? {} : { slots },
                     ...policy === void 0 ? {} : { policy },
                     ...features === void 0 ? {} : { features },
                     readOnly,
@@ -2569,7 +2645,7 @@ function FormBuilder({
                 action: "addField",
                 disabled: initialFieldType === null || maxFieldsReached,
                 onClick: addField,
-                children: translate("builder.addQuestion")
+                children: translate(BUILDER_TRANSLATION_KEYS.ADD_FIELD)
               }
             ) })
           ] }) })
@@ -3865,6 +3941,8 @@ function FormRenderer(props) {
   );
 }
 export {
+  BUILDER_TRANSLATION_ALIASES,
+  BUILDER_TRANSLATION_KEYS,
   FormBuilder,
   FormProvider,
   FormRenderer,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@form-engine-ts/react",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "publishConfig": {
     "access": "public"
   },
@@ -42,8 +42,8 @@
     "typescript"
   ],
   "dependencies": {
-    "@form-engine-ts/core": "3.0.0",
-    "@form-engine-ts/privacy": "3.0.0"
+    "@form-engine-ts/core": "3.2.0",
+    "@form-engine-ts/privacy": "3.2.0"
   },
   "peerDependencies": {
     "react": ">=18.2 <20",