@uxf/form 1.0.0-beta.30 → 1.0.0-beta.32

package/combobox/combobox.js

@@ -20,6 +20,6 @@ function Combobox(props) {
         field.onBlur();
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
     };
-    return (react_1.default.createElement(combobox_1.Combobox, { id: props.id, name: props.name, value: field.value, onChange: (value) => field.onChange(value === null || value === void 0 ? void 0 : value.id), onFocus: props.onFocus, onBlur: onBlur, placeholder: props.placeholder, className: props.className, label: props.label, options: props.options, disabled: props.options.length === 0 || props.disabled, error: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message, invalid: fieldState.invalid, ref: field.ref, required: props.required, readOnly: props.readOnly }));
+    return (react_1.default.createElement(combobox_1.Combobox, { id: props.id, name: props.name, value: field.value, onChange: (value) => field.onChange(value), onFocus: props.onFocus, onBlur: onBlur, placeholder: props.placeholder, className: props.className, label: props.label, options: props.options, isDisabled: props.options.length === 0 || props.isDisabled, error: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message, isInvalid: fieldState.invalid, ref: field.ref, isRequired: props.isRequired, isReadOnly: props.isReadOnly, helperText: props.helperText }));
 }
 exports.Combobox = Combobox;

package/combobox/combobox.stories.js

@@ -17,7 +17,9 @@ const options = [
     { id: "three", label: "Option three" },
 ];
 function Default() {
-    return (react_1.default.createElement(form_1.Form, null, ({ control }) => (react_1.default.createElement("div", { className: "space-y-4" },
-        react_1.default.createElement(combobox_1.Combobox, { label: "Combobox form", name: "combobox", control: control, placeholder: "placeholder", options: options, id: "form-combobox" })))));
+    return (react_1.default.createElement(form_1.Form, null, ({ control }) => (react_1.default.createElement("div", { className: "space-y-8" },
+        react_1.default.createElement(combobox_1.Combobox, { label: "Combobox form", name: "combobox1", control: control, placeholder: "placeholder", options: options, id: "form-combobox", helperText: "Za\u010Dn\u011Bte ps\u00E1t pro vyhled\u00E1v\u00E1n\u00ED..." }),
+        react_1.default.createElement(combobox_1.Combobox, { label: "Combobox form required", name: "combobox-required", control: control, placeholder: "placeholder", options: options, id: "form-combobox", isRequired: true, helperText: "Za\u010Dn\u011Bte ps\u00E1t pro vyhled\u00E1v\u00E1n\u00ED..." }),
+        react_1.default.createElement(combobox_1.Combobox, { label: "Combobox form disabled", name: "combobox-disabled", control: control, placeholder: "placeholder", options: options, id: "form-combobox", isDisabled: true })))));
 }
 exports.Default = Default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/form",
-  "version": "1.0.0-beta.30",
+  "version": "1.0.0-beta.32",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -13,7 +13,7 @@
   "author": "UX Fans s.r.o",
   "license": "MIT",
   "dependencies": {
-    "@uxf/ui": "^1.0.0-beta.30",
+    "@uxf/ui": "^1.0.0-beta.32",
     "react-hook-form": "latest"
   }
 }

package/select/select.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { SelectProps as UISelectProps } from "@uxf/ui/select";
 import { FieldValues, UseControllerProps } from "react-hook-form";
-export declare type SelectProps<FormData extends FieldValues> = UseControllerProps<FormData> & Omit<UISelectProps, "defaultValue" | "invalid" | "name" | "onChange" | "value">;
+export declare type SelectProps<FormData extends FieldValues> = UseControllerProps<FormData> & Omit<UISelectProps, "defaultValue" | "isInvalid" | "name" | "onChange" | "value">;
 export declare function Select<FormData extends Record<string, any>>(props: SelectProps<FormData>): JSX.Element;

package/select/select.js

@@ -8,7 +8,7 @@ const select_1 = require("@uxf/ui/select");
 const react_hook_form_1 = require("react-hook-form");
 const react_1 = __importDefault(require("react"));
 function Select(props) {
-    var _a;
+    var _a, _b;
     const { field, fieldState } = (0, react_hook_form_1.useController)({
         control: props.control,
         name: props.name,
@@ -20,6 +20,6 @@ function Select(props) {
         field.onBlur();
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
     };
-    return (react_1.default.createElement(select_1.Select, { id: props.id, name: props.name, value: field.value, onChange: (value) => field.onChange(value === null || value === void 0 ? void 0 : value.id), onFocus: props.onFocus, onBlur: onBlur, placeholder: props.placeholder, className: props.className, label: props.label, options: props.options, disabled: props.options.length === 0 || props.disabled, error: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message, invalid: fieldState.invalid, ref: field.ref, required: props.required, readOnly: props.readOnly }));
+    return (react_1.default.createElement(select_1.Select, { id: props.id, name: props.name, value: field.value, onChange: (value) => field.onChange(value), onFocus: props.onFocus, onBlur: onBlur, placeholder: props.placeholder, className: props.className, label: props.label, options: props.options, isDisabled: props.options.length === 0 || props.isDisabled, helperText: (_b = (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message) !== null && _b !== void 0 ? _b : props.helperText, isInvalid: fieldState.invalid, ref: field.ref, isRequired: props.isRequired, isReadOnly: props.isReadOnly }));
 }
 exports.Select = Select;

package/select/select.stories.js

@@ -18,6 +18,8 @@ const options = [
 ];
 function Default() {
     return (react_1.default.createElement(form_1.Form, null, ({ control }) => (react_1.default.createElement("div", { className: "space-y-4" },
-        react_1.default.createElement(select_1.Select, { label: "Select form", name: "select", control: control, placeholder: "placeholder", options: options, id: "form-select" })))));
+        react_1.default.createElement(select_1.Select, { label: "Select form", name: "select", control: control, placeholder: "placeholder", options: options, id: "form-select" }),
+        react_1.default.createElement(select_1.Select, { label: "Select form disabled", name: "select", control: control, placeholder: "placeholder", options: options, id: "form-select", isDisabled: true }),
+        react_1.default.createElement(select_1.Select, { label: "Select form with helper text", name: "select", control: control, placeholder: "placeholder", options: options, id: "form-select", helperText: "Choose one option" })))));
 }
 exports.Default = Default;

package/text-input/text-input.js

@@ -34,6 +34,6 @@ function TextInput(props) {
         field.onBlur();
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
     };
-    return (react_1.default.createElement(text_input_1.TextInput, { id: props.id, name: props.name, value: field.value, onChange: field.onChange, onFocus: props.onFocus, onBlur: onBlur, isRequired: props.isRequired, isReadOnly: props.isReadOnly, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, helperText: (_b = (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message) !== null && _b !== void 0 ? _b : props.helperText, placeholder: props.placeholder, leftElement: props.leftElement, rightElement: props.rightElement, variant: props.variant, size: props.size, className: props.className, label: props.label, form: props.form, inputMode: props.inputMode, leftAddon: props.leftAddon, rightAddon: props.rightAddon, autoComplete: props.autoComplete, enterKeyHint: props.enterKeyHint }));
+    return (react_1.default.createElement(text_input_1.TextInput, { id: props.id, name: props.name, value: field.value, onChange: field.onChange, onFocus: props.onFocus, onBlur: onBlur, isRequired: props.isRequired, isReadOnly: props.isReadOnly, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, helperText: (_b = (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message) !== null && _b !== void 0 ? _b : props.helperText, placeholder: props.placeholder, leftElement: props.leftElement, rightElement: props.rightElement, variant: props.variant, size: props.size, className: props.className, label: props.label, form: props.form, inputMode: props.inputMode, leftAddon: props.leftAddon, rightAddon: props.rightAddon, autoComplete: props.autoComplete, enterKeyHint: props.enterKeyHint, type: props.type }));
 }
 exports.TextInput = TextInput;

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

@@ -16,6 +16,7 @@ function Default() {
         react_1.default.createElement(text_input_1.TextInput, { label: "Default input", name: "default", control: control }),
         react_1.default.createElement(text_input_1.TextInput, { label: "Required input", name: "required", control: control, isRequired: true }),
         react_1.default.createElement(text_input_1.TextInput, { label: "E-mail required input", name: "email", type: "email", control: control, isRequired: true }),
-        react_1.default.createElement(text_input_1.TextInput, { label: "Phone required input", name: "phone", type: "tel", control: control, isRequired: true })))));
+        react_1.default.createElement(text_input_1.TextInput, { label: "Phone required input", name: "phone", type: "tel", control: control, isRequired: true }),
+        react_1.default.createElement(text_input_1.TextInput, { label: "Password input", name: "password", type: "password", control: control })))));
 }
 exports.Default = Default;

package/textarea/textarea.js

@@ -29,23 +29,21 @@ const react_hook_form_1 = require("react-hook-form");
 const react_1 = __importStar(require("react"));
 function Textarea(props) {
     var _a;
-    const { control, rules = {}, shouldUnregister, autoComplete, className, disabled, disableAutoHeight, form, label, maxLength, minLength, onBlur, onFocus, placeholder, readOnly, required, rows, style, name, } = props;
     const { field, fieldState } = (0, react_hook_form_1.useController)({
-        control,
-        name,
+        control: props.control,
+        name: props.name,
         rules: {
-            required: required ? "Toto pole je povinné" : undefined,
-            ...rules,
+            required: props.required ? "Toto pole je povinné" : undefined,
+            ...props.rules,
         },
-        shouldUnregister,
+        shouldUnregister: props.shouldUnregister,
     });
     const _onBlur = (0, react_1.useCallback)((e) => {
+        var _a;
         field.onBlur();
-        if (onBlur) {
-            onBlur(e);
-        }
-    }, [field, onBlur]);
-    const inputId = `${form ? form + "__" : ""}${name}`;
-    return (react_1.default.createElement(textarea_1.Textarea, { error: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message, form: form, id: inputId, invalid: fieldState.invalid, name: field.name, onBlur: _onBlur, onChange: field.onChange, ref: field.ref, required: required, value: field.value || "", autoComplete: autoComplete, className: className, disabled: disabled, disableAutoHeight: disableAutoHeight, label: label, maxLength: maxLength, minLength: minLength, onFocus: onFocus, placeholder: placeholder, readOnly: readOnly, rows: rows, style: style }));
+        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    }, [field, props]);
+    const inputId = `${props.form ? props.form + "__" : ""}${name}`;
+    return (react_1.default.createElement(textarea_1.Textarea, { error: (_a = fieldState.error) === null || _a === void 0 ? void 0 : _a.message, form: props.form, id: inputId, invalid: fieldState.invalid, name: field.name, onBlur: _onBlur, onChange: field.onChange, ref: field.ref, required: props.required, value: field.value || "", autoComplete: props.autoComplete, className: props.className, disabled: props.disabled, disableAutoHeight: props.disableAutoHeight, label: props.label, maxLength: props.maxLength, minLength: props.minLength, onFocus: props.onFocus, placeholder: props.placeholder, readOnly: props.readOnly, rows: props.rows, style: props.style }));
 }
 exports.Textarea = Textarea;