@uxf/form 11.71.0 → 11.72.3

package/checkbox-list/checkbox-list.d.ts

@@ -1,7 +1,8 @@
 import { CheckboxInputProps as UICheckboxInputProps } from "@uxf/ui/checkbox-input";
 import { FormControlProps } from "@uxf/ui/types";
 import React, { ReactNode } from "react";
-import { FieldValues, UseControllerProps } from "react-hook-form";
+import { FieldValues } from "react-hook-form";
+import { ControlProps } from "../types";
 type ValueType = string | number;
 export type CheckboxListOption = {
     id: ValueType;
@@ -9,7 +10,7 @@ export type CheckboxListOption = {
     isDisabled?: boolean;
 };
 export type CheckboxListValue<T> = T[] | null;
-type CheckboxListProps<FormData extends FieldValues> = UseControllerProps<FormData> & Omit<UICheckboxInputProps, "isInvalid" | "name" | "onChange" | "value"> & {
+type CheckboxListProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UICheckboxInputProps, "isInvalid" | "name" | "onChange" | "value"> & {
     onChange?: FormControlProps<CheckboxListValue<string | number>>["onChange"];
     options: CheckboxListOption[];
     requiredMessage?: string;

package/checkbox-list/checkbox-list.js

@@ -15,7 +15,6 @@ function CheckboxList(props) {
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${formContext.formId}__${props.name}`;
     const { field, fieldState } = (0, react_hook_form_1.useController)({
         control: props.control,
-        defaultValue: props.defaultValue,
         name: props.name,
         rules: {
             required: props.isRequired ? props.requiredMessage || "Toto pole je povinné" : undefined,

package/form-renderer/field/base-field.js

@@ -51,9 +51,9 @@ function BaseField(props) {
         case "files":
         case "images":
             return (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(label_1.Label, null, label),
+                react_1.default.createElement(label_1.Label, { isRequired: isRequired }, label),
                 react_1.default.createElement("div", { className: "mb-3" },
-                    react_1.default.createElement(dropzone_input_1.DropzoneInput, { control: props.control, label: label, name: fieldName, onUploadFile: uploadHandler })),
+                    react_1.default.createElement(dropzone_input_1.DropzoneInput, { control: props.control, isRequired: isRequired, label: label, name: fieldName, onUploadFile: uploadHandler })),
                 react_1.default.createElement(dropzone_list_1.DropzoneList, { control: props.control, errorText: "Soubor se nepoda\u0159ilo nahr\u00E1t.", name: fieldName, onRemoveConfirm: (_g = props.overrides) === null || _g === void 0 ? void 0 : _g.onRemoveConfirm })));
         case "manyToMany":
             return (react_1.default.createElement(multi_combobox_1.MultiCombobox, { control: props.control, isDisabled: isDisabled, isRequired: isRequired, label: label, loadOptions: (term) => { var _a; return autocompleteHandler((_a = props.fieldSchema.autocomplete) !== null && _a !== void 0 ? _a : "", term); }, name: fieldName }));

package/money-input/money-input.d.ts

@@ -5,13 +5,17 @@ import { FieldValues } from "react-hook-form";
 import { ControlProps } from "../types";
 export type MoneyInputValue = Money | null;
 export type MoneyInputProps<FormData extends FieldValues> = Omit<ControlProps<FormData>, "defaultValue"> & Omit<FormControlProps<MoneyInputValue>, "value" | "onChange"> & {
-    id?: string;
-    requiredMessage?: string;
     defaultCurrency?: Currency;
+    id?: string;
     label?: string;
     leftAddon?: ReactNode;
     leftElement?: ReactNode;
+    max?: number;
+    maxMessage?: (value: MoneyInputValue) => string;
+    min?: number;
+    minMessage?: (value: MoneyInputValue) => string;
     onChange?: FormControlProps<MoneyInputValue>["onChange"];
+    requiredMessage?: string;
     rightAddon?: ReactNode;
 };
 export declare function MoneyInput<FormData extends FieldValues>(props: MoneyInputProps<FormData>): React.JSX.Element;

package/money-input/money-input.js

@@ -38,7 +38,7 @@ const CONTROL_KEYS = ["v", "V", "c", "C", "x", "X", "a", "A"];
 // Allow digits and decimal point (.,)
 const ALLOWED_KEYS = /[0-9+\-.,]/;
 function MoneyInput(props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const formContext = (0, form_context_1.useFormContext)();
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${formContext.formId}__${props.name}`;
     const { field, fieldState } = (0, react_hook_form_1.useController)({
@@ -46,11 +46,36 @@ function MoneyInput(props) {
         name: props.name,
         rules: {
             required: props.isRequired ? props.requiredMessage || "Toto pole je povinné" : undefined,
+            validate: {
+                validMinNumber: (value) => {
+                    if (!value) {
+                        return;
+                    }
+                    if (typeof props.min === "number" && !isNaN(props.min) && value.amount < props.min) {
+                        return props.minMessage
+                            ? props.minMessage(value)
+                            : `Hodnota musí být větší nebo rovna ${props.min}.`;
+                    }
+                },
+                validMaxNumber: (value) => {
+                    if (!value) {
+                        return;
+                    }
+                    if (typeof props.max === "number" && !isNaN(props.max) && value.amount > props.max) {
+                        return props.maxMessage
+                            ? props.maxMessage(value)
+                            : `Hodnota musí být menší nebo rovna ${props.max}.`;
+                    }
+                },
+                ...(typeof ((_b = props.rules) === null || _b === void 0 ? void 0 : _b.validate) === "function"
+                    ? { custom: props.rules.validate }
+                    : (_c = props.rules) === null || _c === void 0 ? void 0 : _c.validate),
+            },
             ...props.rules,
         },
         shouldUnregister: props.shouldUnregister,
     });
-    const [lastCurrency, setLastCurrency] = (0, react_1.useState)((_d = (_c = (_b = field.value) === null || _b === void 0 ? void 0 : _b.currency) !== null && _c !== void 0 ? _c : props.defaultCurrency) !== null && _d !== void 0 ? _d : "CZK");
+    const [lastCurrency, setLastCurrency] = (0, react_1.useState)((_f = (_e = (_d = field.value) === null || _d === void 0 ? void 0 : _d.currency) !== null && _e !== void 0 ? _e : props.defaultCurrency) !== null && _f !== void 0 ? _f : "CZK");
     (0, react_1.useEffect)(() => {
         var _a;
         if ((0, is_not_nil_1.isNotNil)(field.value) && ((_a = field.value) === null || _a === void 0 ? void 0 : _a.currency) !== lastCurrency) {
@@ -78,6 +103,6 @@ function MoneyInput(props) {
         field.onChange(newValue);
         (_c = props.onChange) === null || _c === void 0 ? void 0 : _c.call(props, newValue, event);
     };
-    return (react_1.default.createElement(text_input_1.TextInput, { className: "uxf-money-input uxf-input--no-spin-buttons", helperText: (_e = fieldState.error) === null || _e === void 0 ? void 0 : _e.message, id: id, inputMode: "decimal", isDisabled: formContext.isFormDisabled || props.isDisabled, isInvalid: Boolean(fieldState.error), isReadOnly: formContext.isFormReadOnly || props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, name: field.name, onChange: changeHandler, onKeyDown: keyDownHandler, ref: field.ref, rightAddon: props.rightAddon, rightElement: currencies_1.currencies[(_g = (_f = field.value) === null || _f === void 0 ? void 0 : _f.currency) !== null && _g !== void 0 ? _g : lastCurrency].symbol, step: 2, type: "number", value: (_j = (_h = field.value) === null || _h === void 0 ? void 0 : _h.amount) !== null && _j !== void 0 ? _j : "" }));
+    return (react_1.default.createElement(text_input_1.TextInput, { className: "uxf-money-input uxf-input--no-spin-buttons", helperText: (_g = fieldState.error) === null || _g === void 0 ? void 0 : _g.message, id: id, inputMode: "decimal", isDisabled: formContext.isFormDisabled || props.isDisabled, isInvalid: Boolean(fieldState.error), isReadOnly: formContext.isFormReadOnly || props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, name: field.name, onChange: changeHandler, onKeyDown: keyDownHandler, ref: field.ref, rightAddon: props.rightAddon, rightElement: currencies_1.currencies[(_j = (_h = field.value) === null || _h === void 0 ? void 0 : _h.currency) !== null && _j !== void 0 ? _j : lastCurrency].symbol, step: 2, type: "number", value: (_l = (_k = field.value) === null || _k === void 0 ? void 0 : _k.amount) !== null && _l !== void 0 ? _l : "" }));
 }
 MoneyInput.displayName = "UxfFormMoneyInput";

package/money-input/money-input.stories.js

@@ -9,7 +9,7 @@ const storybook_form_1 = require("../storybook/storybook-form");
 const money_input_1 = require("./money-input");
 function Default() {
     return (react_1.default.createElement(storybook_form_1.StorybookForm, { className: "space-y-4 p-4", defaultValues: { "default-value": { amount: "100", currency: "USD" } } }, ({ control }) => (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(money_input_1.MoneyInput, { control: control, label: "Default money input", name: "default" }),
+        react_1.default.createElement(money_input_1.MoneyInput, { control: control, label: "Default money input min100 max200", max: 200, min: 100, name: "default" }),
         react_1.default.createElement(money_input_1.MoneyInput, { control: control, defaultCurrency: "EUR", label: "Money input with default currency", name: "default-currency" }),
         react_1.default.createElement(money_input_1.MoneyInput, { control: control, label: "Money input with default value", name: "default-value" })))));
 }

package/number-input/number-input.js

@@ -21,13 +21,13 @@ function NumberInput(props) {
             max: typeof props.max === "number" && !isNaN(props.max)
                 ? {
                     value: props.max,
-                    message: (_b = props.maxMessage) !== null && _b !== void 0 ? _b : `Hodnota musí být menší nebo rovna než ${props.max}.`,
+                    message: (_b = props.maxMessage) !== null && _b !== void 0 ? _b : `Hodnota musí být menší nebo rovna ${props.max}.`,
                 }
                 : undefined,
             min: typeof props.min === "number" && !isNaN(props.min)
                 ? {
                     value: props.min,
-                    message: (_c = props.minMessage) !== null && _c !== void 0 ? _c : `Hodnota musí být větší nebo rovna než ${props.min}.`,
+                    message: (_c = props.minMessage) !== null && _c !== void 0 ? _c : `Hodnota musí být větší nebo rovna ${props.min}.`,
                 }
                 : undefined,
             required: props.isRequired ? props.requiredMessage || "Toto pole je povinné" : undefined,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/form",
-    "version": "11.71.0",
+    "version": "11.72.3",
     "description": "",
     "publishConfig": {
         "access": "public"
@@ -16,7 +16,7 @@
     },
     "license": "MIT",
     "dependencies": {
-        "@uxf/ui": "11.71.0",
+        "@uxf/ui": "11.72.3",
         "coordinate-parser": "1.0.7",
         "dayjs": "1.11.13",
         "react-hook-form": "7.53.0"

package/password-input/password-input.d.ts

@@ -1,8 +1,9 @@
 import { TextInputProps as UITextInputProps } from "@uxf/ui/text-input";
 import { FormControlProps } from "@uxf/ui/types";
 import React, { ReactNode } from "react";
-import { FieldValues, UseControllerProps } from "react-hook-form";
-export type PasswordInputProps<FormData extends FieldValues> = UseControllerProps<FormData> & Omit<UITextInputProps, "isFocused" | "isInvalid" | "max" | "min" | "name" | "onChange" | "value" | "type"> & {
+import { FieldValues } from "react-hook-form";
+import { ControlProps } from "../types";
+export type PasswordInputProps<FormData extends FieldValues> = ControlProps<FormData> & Omit<UITextInputProps, "isFocused" | "isInvalid" | "max" | "min" | "name" | "onChange" | "value" | "type"> & {
     minLengthMessage?: string;
     onChange?: FormControlProps<string | null>["onChange"];
     renderVisibilitySetter?: (isVisible: boolean, onToggle: () => void) => ReactNode;

package/password-input/password-input.js

@@ -62,7 +62,6 @@ function PasswordInput(props) {
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${formContext.formId}__${props.name}`;
     const { field, fieldState } = (0, react_hook_form_1.useController)({
         control: props.control,
-        defaultValue: props.defaultValue,
         name: props.name,
         shouldUnregister: props.shouldUnregister,
         rules: {