@uxf/form 11.90.0 → 11.91.0

package/_code-generator/form-code-generator.js

@@ -45,7 +45,7 @@ export interface ${componentName}Props {
     defaultValues: ${componentName}Data;
 }
 
-export function mapToFormData(values: any): ${componentName}Data  {
+export function mapToFormData(): ${componentName}Data  {
     return {
 ${this.fields.map((field) => `        ${field.name}: values.TODO`).join(",\n")}
     }

package/checkbox-button/checkbox-button.d.ts

@@ -3,12 +3,11 @@ import React from "react";
 import { FieldValues } from "react-hook-form";
 import { ControlProps } from "../types";
 export type CheckboxButtonProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UICheckboxButtonProps, "isFocused" | "isInvalid" | "name" | "onChange" | "value"> & {
-    nullable?: boolean;
     onChange?: UICheckboxButtonProps["onChange"];
     requiredMessage?: string;
 };
 export type CheckboxButtonValue = boolean | undefined;
-export declare function CheckboxButton<FormData extends Record<string, any>>(props: CheckboxButtonProps<FormData>): React.JSX.Element;
+export declare function CheckboxButton<FormData extends FieldValues>(props: CheckboxButtonProps<FormData>): React.JSX.Element;
 export declare namespace CheckboxButton {
     var displayName: string;
 }

package/checkbox-button/checkbox-button.js

@@ -12,7 +12,7 @@ const react_1 = __importDefault(require("react"));
 const react_hook_form_1 = require("react-hook-form");
 const form_context_1 = require("../form-id-context/form-context");
 function CheckboxButton(props) {
-    var _a, _b;
+    var _a;
     const formContext = (0, form_context_1.useFormContext)();
     const t = (0, translations_1.useUxfTranslation)();
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${formContext.formId}__${props.name}`;
@@ -37,6 +37,6 @@ function CheckboxButton(props) {
         field.onChange(value);
         (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
     };
-    return (react_1.default.createElement(checkbox_button_1.CheckboxButton, { className: props.className, id: id, isDisabled: formContext.isFormDisabled || props.isDisabled, isInvalid: (0, is_not_nil_1.isNotNil)(fieldState.error), isReadOnly: formContext.isFormReadOnly || props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, ref: field.ref, style: props.style, value: (_b = field.value) !== null && _b !== void 0 ? _b : (!props.nullable ? false : undefined) }));
+    return (react_1.default.createElement(checkbox_button_1.CheckboxButton, { className: props.className, id: id, isDisabled: formContext.isFormDisabled || props.isDisabled, isInvalid: (0, is_not_nil_1.isNotNil)(fieldState.error), isReadOnly: formContext.isFormReadOnly || props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, ref: field.ref, style: props.style, value: field.value }));
 }
 CheckboxButton.displayName = "UxfFormCheckboxButton";

package/checkbox-input/checkbox-input.d.ts

@@ -3,13 +3,12 @@ import React from "react";
 import { FieldValues } from "react-hook-form";
 import { ControlProps } from "../types";
 export type CheckboxInputProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UICheckboxInputProps, "isFocused" | "isInvalid" | "name" | "onChange" | "value"> & {
-    nullable?: boolean;
     onChange?: UICheckboxInputProps["onChange"];
     requiredMessage?: string;
     onChangeConfirm?: (value: UICheckboxInputProps["value"]) => Promise<boolean>;
 };
 export type CheckboxInputValue = boolean | undefined;
-export declare function CheckboxInput<FormData extends Record<string, any>>(props: CheckboxInputProps<FormData>): React.JSX.Element;
+export declare function CheckboxInput<FormData extends FieldValues>(props: CheckboxInputProps<FormData>): React.JSX.Element;
 export declare namespace CheckboxInput {
     var displayName: string;
 }

package/checkbox-input/checkbox-input.js

@@ -12,7 +12,7 @@ const react_1 = __importDefault(require("react"));
 const react_hook_form_1 = require("react-hook-form");
 const form_context_1 = require("../form-id-context/form-context");
 function CheckboxInput(props) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const formContext = (0, form_context_1.useFormContext)();
     const t = (0, translations_1.useUxfTranslation)();
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${formContext.formId}__${props.name}`;
@@ -45,6 +45,6 @@ function CheckboxInput(props) {
             (_b = props.onChange) === null || _b === void 0 ? void 0 : _b.call(props, value, event);
         }
     };
-    return (react_1.default.createElement(checkbox_input_1.CheckboxInput, { className: props.className, helperText: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.helperText, hiddenLabel: props.hiddenLabel, id: id, isDisabled: formContext.isFormDisabled || props.isDisabled, isInvalid: (0, is_not_nil_1.isNotNil)(fieldState.error), isReadOnly: formContext.isFormReadOnly || props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, ref: field.ref, size: props.size, style: props.style, value: (_d = field.value) !== null && _d !== void 0 ? _d : (!props.nullable ? false : undefined) }));
+    return (react_1.default.createElement(checkbox_input_1.CheckboxInput, { className: props.className, helperText: (_c = (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : props.helperText, hiddenLabel: props.hiddenLabel, id: id, isDisabled: formContext.isFormDisabled || props.isDisabled, isInvalid: (0, is_not_nil_1.isNotNil)(fieldState.error), isReadOnly: formContext.isFormReadOnly || props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, ref: field.ref, size: props.size, style: props.style, value: field.value }));
 }
 CheckboxInput.displayName = "UxfFormCheckboxInput";

package/color-radio-group/color-radio-group.d.ts

@@ -8,7 +8,7 @@ export type ColorRadioGroupProps<FormData extends FieldValues> = ControlProps<Fo
     onChangeConfirm?: (value: UIColorRadioGroupProps["value"]) => Promise<boolean>;
 };
 export type ColorRadioGroupValue = `#${string}` | null;
-export declare function ColorRadioGroup<FormData extends Record<string, any>>(props: ColorRadioGroupProps<FormData>): React.JSX.Element;
+export declare function ColorRadioGroup<FormData extends FieldValues>(props: ColorRadioGroupProps<FormData>): React.JSX.Element;
 export declare namespace ColorRadioGroup {
     var displayName: string;
 }

package/combobox/combobox.d.ts

@@ -8,7 +8,7 @@ export type ComboboxProps<FormData extends FieldValues> = ControlProps<FormData>
     onChangeConfirm?: (value: UIComboboxProps["value"]) => Promise<boolean>;
 };
 export type ComboboxValue<Id extends ComboboxValueId> = UIComboboxValue<Id> | null;
-export declare function Combobox<FormData extends Record<string, any>>(props: ComboboxProps<FormData>): React.JSX.Element;
+export declare function Combobox<FormData extends FieldValues>(props: ComboboxProps<FormData>): React.JSX.Element;
 export declare namespace Combobox {
     var displayName: string;
 }

package/form-renderer/big-test-schema.d.ts

@@ -1,33 +1,32 @@
-export declare const schema: {
-    fields: ({
-        name: string;
-        type: string;
+import { FormSchema } from "./types";
+export interface BigTestFormValues {
+    id: number;
+    textRequired: string;
+    textNotRequired: string;
+    longTextRequired: string;
+    longTextNotRequired: string;
+    imageNotRequired: string;
+    fileNotRequired: string;
+    images: string[];
+    dateRequired: string;
+    dateNotRequired: string;
+    dateTimeRequired: string;
+    dateTimeNotRequired: string;
+    timeRequired: string;
+    timeNotRequired: string;
+    integerRequired: number;
+    integerNotRequired: number;
+    isBooleanNotRequired: boolean;
+    manyToManyBigTest: string[];
+    manyToOneBigTest: string;
+    embedded: {
+        value: number;
         label: string;
-        required: boolean;
-        readOnly: boolean;
-        editable: boolean;
-        autocomplete: string;
-        options: null;
-        fields: never[];
-    } | {
-        name: string;
-        type: string;
+    };
+    oneToMany: {
+        id: number;
+        value: number;
         label: string;
-        required: boolean;
-        readOnly: boolean;
-        editable: boolean;
-        autocomplete: null;
-        options: null;
-        fields: {
-            name: string;
-            type: string;
-            label: string;
-            required: boolean;
-            readOnly: boolean;
-            editable: boolean;
-            autocomplete: null;
-            options: null;
-            fields: never[];
-        }[];
-    })[];
-};
+    }[];
+}
+export declare const schema: FormSchema<BigTestFormValues>;

package/form-renderer/field/base-field.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { FieldValues } from "react-hook-form";
 import { FieldProps } from "../types";
-export declare function BaseField(props: FieldProps): React.JSX.Element;
+export declare function BaseField<FormData extends FieldValues>(props: FieldProps<FormData>): React.JSX.Element;
 export default BaseField;

package/form-renderer/field/embedded.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { FieldValues } from "react-hook-form";
 import { FieldProps } from "../types";
-declare function Field(props: FieldProps): React.JSX.Element | null;
+declare function Field<FormData extends FieldValues>(props: FieldProps<FormData>): React.JSX.Element | null;
 export default Field;

package/form-renderer/field/embedded.js

@@ -13,7 +13,10 @@ function Field(props) {
         var _a;
         const FieldComponent = (_a = props.fields[schema.type]) !== null && _a !== void 0 ? _a : props.fields.default;
         return (react_1.default.createElement("div", { key: i },
-            react_1.default.createElement(FieldComponent, { ...props, fieldSchema: { ...schema, label: `${props.fieldSchema.label} ${schema.label}` }, prefix: `${props.fieldSchema.name}.` })));
+            react_1.default.createElement(FieldComponent, { ...props, fieldSchema: {
+                    ...schema,
+                    label: `${props.fieldSchema.label} ${schema.label}`,
+                }, prefix: `${props.fieldSchema.name}.` })));
     })));
 }
 exports.default = Field;

package/form-renderer/field/one-to-many.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { FieldValues } from "react-hook-form";
 import { FieldProps } from "../types";
-declare function Field(props: FieldProps): React.JSX.Element;
+declare function Field<FormData extends FieldValues>(props: FieldProps<FormData>): React.JSX.Element;
 export default Field;

package/form-renderer/field/one-to-many.js

@@ -38,7 +38,10 @@ const icon_button_1 = require("@uxf/ui/icon-button");
 const react_1 = __importStar(require("react"));
 const react_hook_form_1 = require("react-hook-form");
 function Field(props) {
-    const { fields, remove, append } = (0, react_hook_form_1.useFieldArray)({ control: props.control, name: props.fieldSchema.name });
+    const { fields, remove, append } = (0, react_hook_form_1.useFieldArray)({
+        control: props.control,
+        name: props.fieldSchema.name,
+    });
     const t = (0, translations_1.useUxfTranslation)();
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("p", { className: "mb-2 font-medium" }, props.fieldSchema.label),

package/form-renderer/form-renderer.d.ts

@@ -2,15 +2,15 @@ import { FormProps as UXFFormProps } from "@uxf/form/form";
 import React, { FunctionComponent } from "react";
 import { FieldValues, FormState } from "react-hook-form";
 import { FormRendererFields, FormSchema } from "./types";
-type SubmitButtonComponent<TFieldValues extends FieldValues = FieldValues> = FunctionComponent<{
-    formState: FormState<TFieldValues>;
+type SubmitButtonComponent<FormData extends FieldValues = FieldValues> = FunctionComponent<{
+    formState: FormState<FormData>;
 }>;
-interface FormRendererProps<T extends FieldValues> extends Omit<UXFFormProps<T>, "children"> {
+interface FormRendererProps<FormData extends FieldValues> extends Omit<UXFFormProps<FormData>, "children"> {
     className?: string;
-    schema: FormSchema;
-    fields: FormRendererFields;
+    schema: FormSchema<FormData>;
+    fields: FormRendererFields<FormData>;
     isEditing?: boolean;
-    SubmitButton?: SubmitButtonComponent<T>;
+    SubmitButton?: SubmitButtonComponent<FormData>;
 }
 export declare function FormRenderer<T extends FieldValues>(props: FormRendererProps<T>): React.JSX.Element;
 export {};

package/form-renderer/form-renderer.stories.js

@@ -18,6 +18,6 @@ const fields = {
     oneToMany: one_to_many_1.default,
 };
 function Example() {
-    const formApi = (0, react_hook_form_1.useForm)({ defaultValues: {} });
-    return react_1.default.createElement(form_renderer_1.FormRenderer, { fields: fields, formApi: formApi, id: "example-form", onSubmit: console.log, schema: big_test_schema_1.schema });
+    const formApi = (0, react_hook_form_1.useForm)();
+    return (react_1.default.createElement(form_renderer_1.FormRenderer, { fields: fields, formApi: formApi, id: "example-form", onSubmit: console.log, schema: big_test_schema_1.schema }));
 }

package/form-renderer/mapper.d.ts

@@ -1,2 +1,4 @@
+import { AnyObject } from "@uxf/core/types";
+import { FieldValues } from "react-hook-form";
 import { FormSchema } from "./types";
-export declare const mapToRequestObject: (values: any, schema: FormSchema) => any;
+export declare const mapToRequestObject: <FormData extends FieldValues = AnyObject>(values: AnyObject, schema: FormSchema<FormData>) => AnyObject;

package/form-renderer/types.d.ts

@@ -2,38 +2,38 @@ import { Autocomplete } from "@uxf/core/api/autocomplete";
 import { OnUploadFileHandler } from "@uxf/core/types";
 import { DropzoneFile } from "@uxf/ui/dropzone/types";
 import { FunctionComponent } from "react";
-import { Control } from "react-hook-form";
-export interface FieldSchema {
+import { Control, FieldValues, Path } from "react-hook-form";
+export interface FieldSchema<FormData extends FieldValues> {
     autocomplete: string | null;
-    name: string;
+    name: Path<FormData>;
     type: string;
     label: string;
     required: boolean;
     readOnly: boolean;
     editable: boolean;
-    fields: FieldSchema[];
+    fields: FieldSchema<FieldValues>[];
     options: Array<{
         id: string | number;
         label: string;
     }> | null;
 }
-export interface FormSchema {
-    fields: FieldSchema[];
+export interface FormSchema<FormData extends FieldValues> {
+    fields: FieldSchema<FormData>[];
 }
-export interface FieldProps {
-    fieldSchema: FieldSchema;
-    fields: FormRendererFields;
+export interface FieldProps<FormData extends FieldValues> {
+    fieldSchema: FieldSchema<FormData>;
+    fields: FormRendererFields<FormData>;
     isEditing?: boolean;
     prefix?: string;
-    control: Control<any>;
+    control: Control<FormData>;
     overrides?: {
         autocomplete?: Autocomplete;
         upload?: OnUploadFileHandler;
         onRemoveConfirm?: (file: DropzoneFile) => Promise<boolean>;
     };
 }
-export type FieldComponent = FunctionComponent<FieldProps>;
-export type FormRendererFields = {
-    [type: string]: FieldComponent;
-    default: FieldComponent;
+export type FieldComponent<FormData extends FieldValues> = FunctionComponent<FieldProps<FormData>>;
+export type FormRendererFields<FormData extends FieldValues> = {
+    [type: string]: FieldComponent<FormData>;
+    default: FieldComponent<FormData>;
 };

package/multi-combobox/multi-combobox.d.ts

@@ -8,7 +8,7 @@ export type MultiComboboxProps<FormData extends FieldValues> = ControlProps<Form
     onChangeConfirm?: (value: UIMultiComboboxProps["value"]) => Promise<boolean>;
 };
 export type MultiComboboxValue<Id> = MultiComboboxOption<Id>[] | null;
-export declare function MultiCombobox<FormData extends Record<string, any>>(props: MultiComboboxProps<FormData>): React.JSX.Element;
+export declare function MultiCombobox<FormData extends FieldValues>(props: MultiComboboxProps<FormData>): React.JSX.Element;
 export declare namespace MultiCombobox {
     var displayName: string;
 }

package/multi-select/multi-select.d.ts

@@ -9,7 +9,7 @@ export type MultiSelectProps<FormData extends FieldValues> = ControlProps<FormDa
     onChangeConfirm?: (value: UIMultiSelectProps["value"]) => Promise<boolean>;
 };
 export type MultiSelectValue<T extends SelectableId> = T[] | null;
-export declare function MultiSelect<FormData extends Record<string, any>>(props: MultiSelectProps<FormData>): React.JSX.Element;
+export declare function MultiSelect<FormData extends FieldValues>(props: MultiSelectProps<FormData>): React.JSX.Element;
 export declare namespace MultiSelect {
     var displayName: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/form",
-    "version": "11.90.0",
+    "version": "11.91.0",
     "description": "",
     "publishConfig": {
         "access": "public"
@@ -16,9 +16,9 @@
     },
     "license": "MIT",
     "dependencies": {
-        "@uxf/core": "11.90.0",
-        "@uxf/core-react": "11.90.0",
-        "@uxf/ui": "11.90.0",
+        "@uxf/core": "11.91.0",
+        "@uxf/core-react": "11.91.0",
+        "@uxf/ui": "11.91.0",
         "coordinate-parser": "1.0.7",
         "dayjs": "1.11.19",
         "react-hook-form": "7.68.0"

package/radio-group/radio-group.d.ts

@@ -8,7 +8,7 @@ export type RadioGroupProps<FormData extends FieldValues> = ControlProps<FormDat
     onChangeConfirm?: (value: UIRadioGroupProps["value"]) => Promise<boolean>;
 };
 export type RadioGroupValue<T extends RadioGroupOptionValueId> = T | null;
-export declare function RadioGroup<FormData extends Record<string, any>>(props: RadioGroupProps<FormData>): React.JSX.Element;
+export declare function RadioGroup<FormData extends FieldValues>(props: RadioGroupProps<FormData>): React.JSX.Element;
 export declare namespace RadioGroup {
     var displayName: string;
 }

package/select/select.d.ts

@@ -8,7 +8,7 @@ export type SelectProps<FormData extends FieldValues> = ControlProps<FormData> &
     onChangeConfirm?: (value: UISelectProps["value"]) => Promise<boolean>;
 };
 export type SelectValue<T extends UISelectValue> = T | null;
-export declare function Select<FormData extends Record<string, any>>(props: SelectProps<FormData>): React.JSX.Element;
+export declare function Select<FormData extends FieldValues>(props: SelectProps<FormData>): React.JSX.Element;
 export declare namespace Select {
     var displayName: string;
 }

package/storybook/form-data-printer.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
-interface FormDataPrinterProps {
-    control: any;
+import { Control, FieldValues } from "react-hook-form";
+interface FormDataPrinterProps<FormData extends FieldValues> {
+    control: Control<FormData>;
 }
-export declare function FormDataPrinter(props: FormDataPrinterProps): React.JSX.Element;
+export declare function FormDataPrinter<FormData extends FieldValues>(props: FormDataPrinterProps<FormData>): React.JSX.Element;
 export {};

package/textarea/textarea.d.ts

@@ -7,7 +7,7 @@ export type TextareaProps<FormData extends FieldValues> = ControlProps<FormData>
     requiredMessage?: string;
 };
 export type TextareaValue = string | null;
-export declare function Textarea<FormData extends Record<string, any>>(props: TextareaProps<FormData>): React.JSX.Element;
+export declare function Textarea<FormData extends FieldValues>(props: TextareaProps<FormData>): React.JSX.Element;
 export declare namespace Textarea {
     var displayName: string;
 }

package/toggle/toggle.d.ts

@@ -3,12 +3,10 @@ import React from "react";
 import { FieldValues } from "react-hook-form";
 import { ControlProps } from "../types";
 export type ToggleProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UIToggleProps, "isFocused" | "isInvalid" | "name" | "onChange" | "value"> & {
-    nullable?: boolean;
     onChange?: UIToggleProps["onChange"];
     requiredMessage?: string;
 };
-export type ToggleValue = boolean | undefined;
-export declare function Toggle<FormData extends Record<string, any>>(props: ToggleProps<FormData>): React.JSX.Element;
+export declare function Toggle<FormData extends FieldValues>(props: ToggleProps<FormData>): React.JSX.Element;
 export declare namespace Toggle {
     var displayName: string;
 }

package/toggle/toggle.js

@@ -12,7 +12,7 @@ const react_1 = __importDefault(require("react"));
 const react_hook_form_1 = require("react-hook-form");
 const form_context_1 = require("../form-id-context/form-context");
 function Toggle(props) {
-    var _a, _b;
+    var _a;
     const formContext = (0, form_context_1.useFormContext)();
     const t = (0, translations_1.useUxfTranslation)();
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${formContext.formId}__${props.name}`;
@@ -35,6 +35,6 @@ function Toggle(props) {
         field.onChange(value);
         (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
     };
-    return (react_1.default.createElement(toggle_1.Toggle, { className: props.className, hiddenLabel: props.hiddenLabel, id: id, isDisabled: formContext.isFormDisabled || props.isDisabled, isInvalid: (0, is_not_nil_1.isNotNil)(fieldState.error), isReadOnly: formContext.isFormReadOnly || props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, ref: field.ref, style: props.style, value: (_b = field.value) !== null && _b !== void 0 ? _b : (!props.nullable ? false : undefined), variant: props.variant }));
+    return (react_1.default.createElement(toggle_1.Toggle, { className: props.className, hiddenLabel: props.hiddenLabel, id: id, isDisabled: formContext.isFormDisabled || props.isDisabled, isInvalid: (0, is_not_nil_1.isNotNil)(fieldState.error), isReadOnly: formContext.isFormReadOnly || props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, ref: field.ref, style: props.style, value: field.value, variant: props.variant }));
 }
 Toggle.displayName = "UxfFormToggle";