@uxf/form 11.39.0 → 11.40.0

package/package.json

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

package/text-input/text-input.d.ts

@@ -9,12 +9,20 @@ export type TextInputProps<FormData extends FieldValues> = ControlProps<FormData
     type: "email";
     invalidEmailMessage?: string;
     invalidPhoneMessage?: never;
+    invalidUrlMessage?: never;
 } | {
     type: "tel";
-    invalidEmailMessage?: never;
     invalidPhoneMessage?: string;
+    invalidEmailMessage?: never;
+    invalidUrlMessage?: never;
+} | {
+    type: "url";
+    invalidUrlMessage?: string;
+    invalidPhoneMessage?: never;
+    invalidEmailMessage?: never;
 } | {
     invalidEmailMessage?: never;
+    invalidUrlMessage?: never;
     invalidPhoneMessage?: never;
     type?: "password" | "search" | "text" | "url";
 });

package/text-input/text-input.js

@@ -11,8 +11,9 @@ const react_hook_form_1 = require("react-hook-form");
 const form_id_context_1 = require("../form-id-context");
 const EMAIL_REGEXP = /^(([^<>()[\]\\.,;:\s@À-ÖÙ-öù-ÿĀ-žḀ-ỿ"]+(\.[^<>()[\]\\.,;:\s@À-ÖÙ-öù-ÿĀ-žḀ-ỿ"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 const PHONE_REGEXP = /^(\+)?[\d\s]*$/;
+const URL_REGEXP = /^[a-zA-Z0-9-]+\.[a-zA-Z]{2,}$/;
 function TextInput(props) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     const formId = (0, form_id_context_1.useFormIdContext)();
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : `${formId}__${props.name}`;
     const { field, fieldState } = (0, react_hook_form_1.useController)({
@@ -28,9 +29,14 @@ function TextInput(props) {
                 : props.type === "tel"
                     ? {
                         value: PHONE_REGEXP,
-                        message: (_c = props.invalidPhoneMessage) !== null && _c !== void 0 ? _c : "Zadaný telefon není ve správném formátu",
+                        message: (_c = props.invalidPhoneMessage) !== null && _c !== void 0 ? _c : "Zadaný telefon není ve\xa0správném formátu",
                     }
-                    : undefined,
+                    : props.type === "url"
+                        ? {
+                            value: URL_REGEXP,
+                            message: (_d = props.invalidUrlMessage) !== null && _d !== void 0 ? _d : "Zadaný odkaz není ve\xa0správném formátu",
+                        }
+                        : undefined,
             ...props.rules,
         },
         shouldUnregister: props.shouldUnregister,
@@ -45,6 +51,6 @@ function TextInput(props) {
         field.onChange(value);
         (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
     };
-    return (react_1.default.createElement(text_input_1.TextInput, { autoComplete: props.autoComplete, autoFocus: props.autoFocus, className: props.className, enterKeyHint: props.enterKeyHint, form: props.form, helperText: (_e = (_d = fieldState.error) === null || _d === void 0 ? void 0 : _d.message) !== null && _e !== void 0 ? _e : props.helperText, hiddenLabel: props.hiddenLabel, id: id, inputMode: props.inputMode, isDisabled: props.isDisabled, isInvalid: (0, is_not_nil_1.isNotNil)(fieldState.error), isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, maxLength: props.maxLength, minLength: props.minLength, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, onKeyDown: props.onKeyDown, placeholder: props.placeholder, ref: field.ref, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, style: props.style, type: props.type, value: (_f = field.value) !== null && _f !== void 0 ? _f : "", variant: props.variant }));
+    return (react_1.default.createElement(text_input_1.TextInput, { autoComplete: props.autoComplete, autoFocus: props.autoFocus, className: props.className, enterKeyHint: props.enterKeyHint, form: props.form, helperText: (_f = (_e = fieldState.error) === null || _e === void 0 ? void 0 : _e.message) !== null && _f !== void 0 ? _f : props.helperText, hiddenLabel: props.hiddenLabel, id: id, inputMode: props.inputMode, isDisabled: props.isDisabled, isInvalid: (0, is_not_nil_1.isNotNil)(fieldState.error), isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, maxLength: props.maxLength, minLength: props.minLength, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, onKeyDown: props.onKeyDown, placeholder: props.placeholder, ref: field.ref, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, style: props.style, type: props.type, value: (_g = field.value) !== null && _g !== void 0 ? _g : "", variant: props.variant }));
 }
 TextInput.displayName = "UxfFormTextInput";

package/text-input/text-input.stories.js

@@ -17,6 +17,7 @@ function Default() {
         react_1.default.createElement(text_input_1.TextInput, { autoComplete: "off", control: control, label: "Default input", name: "default", placeholder: "Zadejte..." }),
         react_1.default.createElement(text_input_1.TextInput, { control: control, isRequired: true, label: "Required input", name: "required", placeholder: "Zadejte..." }),
         react_1.default.createElement(text_input_1.TextInput, { control: control, isRequired: true, label: "E-mail required input", name: "email", placeholder: "Zadejte...", type: "email" }),
+        react_1.default.createElement(text_input_1.TextInput, { control: control, isRequired: true, label: "Required url input with validation", name: "url", placeholder: "Zadejte...", type: "url" }),
         react_1.default.createElement(text_input_1.TextInput, { control: control, isRequired: true, label: "Phone required input", name: "phone", placeholder: "Zadejte...", type: "tel" }),
         react_1.default.createElement(text_input_1.TextInput, { control: control, label: "Password input", name: "password", placeholder: "Zadejte...", type: "password" }),
         react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit")));