@uxf/form 10.0.0-beta.4 → 10.0.0-beta.40

package/checkbox-input/checkbox-input.js

@@ -32,7 +32,7 @@ function CheckboxInput(props) {
         field.onChange(value);
         (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
     };
-    return (react_1.default.createElement(checkbox_input_1.CheckboxInput, { className: props.className, id: id, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, ref: field.ref, value: (_c = field.value) !== null && _c !== void 0 ? _c : (!props.nullable ? false : undefined) }));
+    return (react_1.default.createElement(checkbox_input_1.CheckboxInput, { className: props.className, id: id, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, ref: field.ref, size: props.size, value: (_c = field.value) !== null && _c !== void 0 ? _c : (!props.nullable ? false : undefined) }));
 }
 exports.CheckboxInput = CheckboxInput;
 CheckboxInput.displayName = "UxfFormCheckboxInput";

package/file-input/file-input.js

@@ -32,7 +32,7 @@ function FileInput(props) {
         field.onChange(value);
         (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
     };
-    return (react_1.default.createElement(file_input_1.FileInput, { accept: props.accept, className: props.className, form: props.form, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, id: id, isClearable: props.isClearable, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, ref: field.ref, size: props.size, value: field.value, variant: props.variant }));
+    return (react_1.default.createElement(file_input_1.FileInput, { accept: props.accept, className: props.className, form: props.form, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, id: id, isClearable: props.isClearable, isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, onUploadError: props.onUploadError, onUploadFile: props.onUploadFile, placeholder: props.placeholder, ref: field.ref, size: props.size, value: field.value, variant: props.variant }));
 }
 exports.FileInput = FileInput;
 FileInput.displayName = "FileInput";

package/file-input/file-input.stories.js

@@ -21,7 +21,7 @@ const DUMMY_FILE = {
 };
 function Default() {
     const storyFormFileInputs = (control, mode) => (react_1.default.createElement("div", { className: "space-y-4" },
-        react_1.default.createElement(file_input_1.FileInput, { control: control, label: "Default file input", name: `default-${mode}`, onUploadFile: uploadFIle_mock_1.uploadFile, isClearable: true }),
+        react_1.default.createElement(file_input_1.FileInput, { control: control, label: "Default file input", name: `default-${mode}`, onUploadFile: uploadFIle_mock_1.uploadFile, isClearable: true, placeholder: "Nahraj soubor" }),
         react_1.default.createElement(file_input_1.FileInput, { control: control, id: `required-${mode}`, isRequired: true, label: "Required file input", name: `required-${mode}`, onUploadFile: uploadFIle_mock_1.uploadFile }),
         react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit")));
     return (react_1.default.createElement(storybook_form_1.StorybookForm, { defaultValues: { "default-light": DUMMY_FILE } }, ({ control }) => (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },

package/number-input/number-input.d.ts

@@ -2,14 +2,12 @@ import { TextInputProps as UITextInputProps } from "@uxf/ui/text-input";
 import { FieldValues, UseControllerProps } from "react-hook-form";
 import React from "react";
 import { FormControlProps } from "@uxf/ui/types";
-type OnChangeHandler = FormControlProps<string>["onChange"];
 export type NumberInputProps<FormData extends FieldValues> = UseControllerProps<FormData> & Omit<UITextInputProps, "inputMode" | "isInvalid" | "maxLength" | "minLength" | "name" | "onChange" | "value" | "type"> & {
     decimalPlaces?: number;
-    onChange?: OnChangeHandler;
+    onChange?: FormControlProps<number>["onChange"];
     requiredMessage?: string;
 };
 export declare function NumberInput<FormData extends FieldValues>(props: NumberInputProps<FormData>): React.JSX.Element;
 export declare namespace NumberInput {
     var displayName: string;
 }
-export {};

package/number-input/number-input.js

@@ -41,15 +41,27 @@ function NumberInput(props) {
     };
     const onKeyDown = (event) => {
         var _a;
-        if (event.key === "e") {
-            event.preventDefault();
+        // Allow special keys
+        const specialKeys = ["Backspace", "Delete", "ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"];
+        // Allow keys for copy/paste/select/cut
+        const controlKeys = ["v", "V", "c", "C", "x", "X", "a", "A"];
+        // Allow digits and decimal point (.,)
+        const allowedDigits = /[0-9+\-.,]/;
+        const key = event.key;
+        // Check if the key is allowed
+        if (!specialKeys.includes(key) && !allowedDigits.test(key)) {
+            // Check if Ctrl or Command key is pressed along with control key
+            if (!(event.ctrlKey || event.metaKey) || !controlKeys.includes(key)) {
+                event.preventDefault();
+            }
         }
         (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, event);
     };
     const onChange = (value, event) => {
         var _a;
-        field.onChange(value);
-        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
+        const parsedValue = props.decimalPlaces ? parseFloat(value) : parseInt(value, 10);
+        field.onChange(parsedValue);
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, parsedValue, event);
     };
     return (react_1.default.createElement(text_input_1.TextInput, { autoComplete: props.autoComplete, className: props.className, enterKeyHint: props.enterKeyHint, form: props.form, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, hiddenLabel: props.hiddenLabel, id: id, inputMode: props.decimalPlaces ? "decimal" : "numeric", isDisabled: props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, onKeyDown: onKeyDown, pattern: props.pattern, placeholder: props.placeholder, step: props.decimalPlaces ? Number(0).toFixed(props.decimalPlaces - 1) + "1" : props.step, ref: field.ref, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, type: "number", value: (_e = field.value) !== null && _e !== void 0 ? _e : "", variant: props.variant }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/form",
-  "version": "10.0.0-beta.4",
+  "version": "10.0.0-beta.40",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -12,7 +12,7 @@
   "author": "UX Fans s.r.o",
   "license": "MIT",
   "dependencies": {
-    "@uxf/ui": "10.0.0-beta.4",
+    "@uxf/ui": "10.0.0-beta.40",
     "react-hook-form": "7.44.3",
     "coordinate-parser": "1.0.7"
   }

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

@@ -1,8 +1,8 @@
-import { RadioGroupOptionValue, RadioGroupProps as UIRadioGroupProps } from "@uxf/ui/radio-group";
+import { RadioGroupOptionValueId, RadioGroupProps as UIRadioGroupProps } from "@uxf/ui/radio-group";
 import React from "react";
 import { FieldValues, UseControllerProps } from "react-hook-form";
 import { FormControlProps } from "@uxf/ui/types";
-type OnChangeHandler = FormControlProps<RadioGroupOptionValue | null>["onChange"];
+type OnChangeHandler = FormControlProps<RadioGroupOptionValueId | null>["onChange"];
 export type RadioGroupProps<FormData extends FieldValues> = UseControllerProps<FormData> & Omit<UIRadioGroupProps, "isInvalid" | "name" | "onChange" | "value"> & {
     onChange?: OnChangeHandler;
     requiredMessage?: string;

package/radio-group/radio-group.js

@@ -32,7 +32,7 @@ function RadioGroup(props) {
         field.onChange(value);
         (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
     };
-    return (react_1.default.createElement(radio_group_1.RadioGroup, { className: props.className, forceColumn: props.forceColumn, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, hiddenLabel: props.hiddenLabel, id: id, isDisabled: props.options.length === 0 || props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, ref: field.ref, style: props.style, value: (_e = field.value) !== null && _e !== void 0 ? _e : null, variant: props.variant }));
+    return (react_1.default.createElement(radio_group_1.RadioGroup, { className: props.className, forceColumn: props.forceColumn, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, hiddenLabel: props.hiddenLabel, id: id, isDisabled: props.options.length === 0 || props.isDisabled, isFocused: props.isFocused, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, radioSize: props.radioSize, ref: field.ref, style: props.style, value: (_e = field.value) !== null && _e !== void 0 ? _e : null, variant: props.variant }));
 }
 exports.RadioGroup = RadioGroup;
 RadioGroup.displayName = "UxfFormRadioGroup";

package/radio-group/radio-group.stories.js

@@ -14,15 +14,15 @@ exports.default = {
 };
 const options = [
     {
-        value: "1",
+        id: "1",
         label: "Radio one",
     },
     {
-        value: "2",
+        id: "2",
         label: "Radio two",
     },
     {
-        value: "3",
+        id: "3",
         label: "Radio three-sixty",
     },
 ];

package/select/select.js

@@ -32,7 +32,7 @@ function Select(props) {
         field.onChange(value);
         (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
     };
-    return (react_1.default.createElement(select_1.Select, { className: props.className, dropdownPlacement: props.dropdownPlacement, forwardRef: field.ref, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, hiddenLabel: props.hiddenLabel, id: id, isClearable: props.isClearable, isDisabled: props.options.length === 0 || props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, placeholder: props.placeholder, value: field.value }));
+    return (react_1.default.createElement(select_1.Select, { className: props.className, dropdownPlacement: props.dropdownPlacement, forwardRef: field.ref, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, hiddenLabel: props.hiddenLabel, id: id, isClearable: props.isClearable, isDisabled: props.options.length === 0 || props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, placeholder: props.placeholder, renderOption: props.renderOption, renderSelectedOption: props.renderSelectedOption, value: field.value }));
 }
 exports.Select = Select;
 Select.displayName = "UxfFormSelect";