finform-react-builder 1.14.0 → 1.16.0

package/dist/components/FinForm/index.d.ts

@@ -6,5 +6,6 @@ export { CustomButtons } from './CustomButtons';
 export { generateSchema } from './generateSchema';
 export { fetchApiData, hasApiConfig, getApiConfig, shouldShowField, useApiData } from './apiUtils';
 export * from './inputs';
-export type { FieldConfig, AutomationFieldConfig, ValidationRule, FormButton, ButtonGroup, FormTitle, FormTheme, FinFormProps, ApiConfig, } from './types';
+export * from './utils/phoneUtils';
+export type { FieldConfig, MobileField, AutomationFieldConfig, ValidationRule, FormButton, ButtonGroup, FormTitle, FormTheme, FinFormProps, ApiConfig, } from './types';
 export { buildFinformTestIds, resolveFieldTestIds } from './testIds';

package/dist/components/FinForm/inputs/FinDateField.d.ts

@@ -1,12 +1,36 @@
 import { default as React } from 'react';
-import { TextFieldProps } from '@mui/material';
-export type FinDateFieldProps = TextFieldProps & {
+export declare const DEFAULT_DATE_FORMAT = "DD-MM-YYYY";
+/** Map dayjs format tokens to a human placeholder (DD/MM/YYYY, etc.). */
+export declare function dateFormatToPlaceholder(format: string): string;
+export type FinDateFieldProps = {
+    value?: string | null;
+    onChange?: (value: string) => void;
+    onBlur?: () => void;
+    name?: string;
+    /** Dayjs format for typed input + display (e.g. DD-MM-YYYY). */
+    dateFormat?: string;
+    minDate?: string;
+    maxDate?: string;
     label?: React.ReactNode;
     labelPosition?: 'inner' | 'top' | 'none';
     labelVariant?: 'caption' | 'body2' | 'subtitle2' | 'h6';
+    disabled?: boolean;
+    error?: boolean;
+    helperText?: React.ReactNode;
+    fullWidth?: boolean;
+    size?: 'small' | 'medium';
+    placeholder?: string;
+    sx?: any;
     inputTestId?: string;
     labelTestId?: string;
     errorTestId?: string;
-    [key: string]: any;
+    /** @deprecated Use minDate / maxDate props. Kept for FieldRenderer backward compat. */
+    inputProps?: {
+        min?: string;
+        max?: string;
+        [key: string]: unknown;
+    };
+    id?: string;
+    required?: boolean;
 };
 export declare const FinDateField: React.FC<FinDateFieldProps>;

package/dist/components/FinForm/inputs/FinEditableGrid.d.ts

@@ -45,6 +45,8 @@ export type GridColumn = {
     };
     sx?: any;
     cellSx?: any;
+    /** Per-column dayjs format override for date columns. */
+    dateFormat?: string;
 };
 export interface FinEditableGridProps {
     name: string;
@@ -68,6 +70,8 @@ export interface FinEditableGridProps {
     setValue?: (name: string, value: any, options?: any) => void;
     rowSelectionMode?: "single" | "multi";
     rowSelectionKey?: string;
+    /** Form-level dayjs date format for date columns. */
+    dateFormat?: string;
 }
 export declare const FinEditableGrid: React.FC<FinEditableGridProps>;
 export default FinEditableGrid;

package/dist/components/FinForm/inputs/FinMobileField.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+import { DialCodeOption } from '../utils/phoneUtils';
+export type FinMobileFieldProps = {
+    id?: string;
+    value?: any;
+    onChange?: (val: string) => void;
+    onBlur?: () => void;
+    labelText?: string;
+    label?: string;
+    labelVariant?: 'caption' | 'body2' | 'subtitle2' | 'h6';
+    placeholder?: string;
+    disabled?: boolean;
+    hasError?: boolean;
+    helperText?: string;
+    dialCodes?: DialCodeOption[];
+    defaultDialCode?: string;
+    mobilePrefixes?: string[];
+    storeFormat?: string;
+    phoneExamples?: string[];
+    name?: string;
+    inputTestId?: string;
+    labelTestId?: string;
+    errorTestId?: string;
+};
+/**
+ * Mobile phone field: dial-code select + national number.
+ * Visual tokens match FinTextField (8px radius, outlined, theme input tokens).
+ * Stored value is national store-format string (not E.164).
+ */
+export declare const FinMobileField: React.FC<FinMobileFieldProps>;
+export default FinMobileField;

package/dist/components/FinForm/inputs/index.d.ts

@@ -1,4 +1,5 @@
 export * from './FinTextField';
+export * from './FinMobileField';
 export * from './FinSelect';
 export * from './FinAutocomplete';
 export * from './FinCheckbox';

package/dist/components/FinForm/types.d.ts

@@ -35,7 +35,7 @@ export interface BaseField {
     title?: string;
     name: string;
     label: string;
-    type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'select' | 'checkbox' | 'checkboxGroup' | 'toggle' | 'radio' | 'switch' | 'autocomplete' | 'date' | 'textarea' | 'image' | 'title' | 'section' | 'component' | 'finuiHeader' | 'tabs' | 'grid' | 'listcards' | 'dragdroplist';
+    type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'mobile' | 'select' | 'checkbox' | 'checkboxGroup' | 'toggle' | 'radio' | 'switch' | 'autocomplete' | 'date' | 'textarea' | 'image' | 'title' | 'section' | 'component' | 'finuiHeader' | 'tabs' | 'grid' | 'listcards' | 'dragdroplist';
     placeholder?: string;
     labelPosition?: 'inner' | 'top' | 'none';
     labelVariant?: 'caption' | 'body2' | 'subtitle2' | 'h6';
@@ -80,6 +80,27 @@ export interface NumberField extends BaseField {
     min?: number;
     max?: number;
 }
+/** Mobile phone with dial-code dropdown; store value is national store-format string (not E.164). */
+export interface MobileField extends BaseField {
+    type: 'mobile';
+    minLength?: number;
+    maxLength?: number;
+    pattern?: string;
+    /** Dial-code options (digits without "+"), e.g. [{ dial_code: "260", label: "ZM" }] */
+    dialCodes?: Array<{
+        dial_code: string;
+        label?: string;
+        iso?: string;
+    }>;
+    /** Default dial code digits without "+" */
+    defaultDialCode?: string;
+    /** Optional national prefix allowlist */
+    mobilePrefixes?: string[];
+    /** Expected store shape, e.g. "0XXXXXXXXX" */
+    storeFormat?: string;
+    /** Example strings for helper / paste hints */
+    phoneExamples?: string[];
+}
 export interface SelectField extends BaseField {
     type: 'select';
     options?: Array<{
@@ -153,6 +174,8 @@ export interface DateField extends BaseField {
     type: 'date';
     minDate?: string;
     maxDate?: string;
+    /** Per-field dayjs format override (e.g. DD-MM-YYYY). Falls back to FinForm dateFormat. */
+    dateFormat?: string;
 }
 export interface ImageField extends BaseField {
     type: 'image';
@@ -340,7 +363,7 @@ export interface DragDropListField extends Omit<BaseField, 'helperText'> {
     helperText?: React.ReactNode | string;
     sx?: any;
 }
-export type FieldConfig = TextField | NumberField | SelectField | CheckboxField | CheckboxGroupField | ToggleField | RadioField | SwitchField | AutocompleteField | DateField | ImageField | TitleField | SectionField | ComponentField | FinUiHeaderField | TabsField | GridField | ListCardsField | DragDropListField;
+export type FieldConfig = TextField | NumberField | MobileField | SelectField | CheckboxField | CheckboxGroupField | ToggleField | RadioField | SwitchField | AutocompleteField | DateField | ImageField | TitleField | SectionField | ComponentField | FinUiHeaderField | TabsField | GridField | ListCardsField | DragDropListField;
 export type AutomationFieldConfig = FieldConfig & {
     testId?: string;
     automation?: {
@@ -422,6 +445,11 @@ export interface FinFormProps {
     };
     /** Prefix for stable data-testid attributes on generated form controls (e.g. "client-profile"). */
     testIdPrefix?: string;
+    /**
+     * Dayjs format for all date fields (e.g. DD-MM-YYYY, MM-DD-YYYY, YYYY-MM-DD).
+     * Host app should map company regional settings to this value.
+     */
+    dateFormat?: string;
 }
 export interface FieldRendererProps {
     field: FieldConfig;
@@ -432,6 +460,8 @@ export interface FieldRendererProps {
     formData?: Record<string, any>;
     setValue?: (name: string, value: any, options?: any) => void;
     testIdPrefix?: string;
+    /** Form-level dayjs date format inherited by date fields. */
+    dateFormat?: string;
 }
 export interface FinInputTestIdProps {
     inputTestId?: string;

package/dist/components/FinForm/utils/phoneUtils.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Generic phone normalize / display helpers for FinMobileField.
+ * Country rules come from field props — no country hardcoding.
+ */
+export type DialCodeOption = {
+    dial_code: string;
+    label?: string;
+    iso?: string;
+};
+export type PhoneNormalizeOptions = {
+    dialCode?: string;
+    storeFormat?: string;
+    prefixes?: string[];
+};
+export type PhoneDisplayParts = {
+    dialCode: string;
+    national: string;
+};
+/** Digits only. */
+export declare function digitsOnly(value: unknown): string;
+/** Strip leading zeros from a dial code string ("0260" → "260", "+260" → "260"). */
+export declare function normalizeDialCode(dialCode: unknown): string;
+/**
+ * Parse storeFormat like "0XXXXXXXXX":
+ * - leadingDigits: literal digit prefix ("0")
+ * - xCount: number of X placeholders (9)
+ * - totalLen: expected national length (10)
+ */
+export declare function parseStoreFormat(storeFormat?: string): {
+    leadingDigits: string;
+    xCount: number;
+    totalLen: number;
+};
+/**
+ * Normalize any common input shape into the national store format.
+ * Accepts: "+260971234567", "0971234567", "971234567", with spaces/dashes.
+ */
+export declare function normalizePhoneToStoreFormat(raw: unknown, options?: PhoneNormalizeOptions): string;
+/**
+ * Split a stored national value for UI: dial code + national digits.
+ */
+export declare function parsePhoneDisplayParts(stored: unknown, options?: {
+    dialCode?: string;
+    dialCodes?: DialCodeOption[];
+}): PhoneDisplayParts;
+/**
+ * Validate a store-format national number.
+ */
+export declare function validatePhone(storeValue: unknown, options?: {
+    pattern?: string | RegExp;
+    prefixes?: string[];
+    message?: string;
+}): {
+    valid: boolean;
+    message?: string;
+};