@uxf/form 11.17.2 → 11.18.0

package/checkbox-input/checkbox-input.stories.js

@@ -14,8 +14,8 @@ exports.default = {
 };
 function Default() {
     const storyFormCheckboxes = (control) => (react_1.default.createElement("div", { className: "space-y-2" },
-        react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "CheckboxInput form", name: "checkbox1", control: control, isRequired: true }),
-        react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "CheckboxInput form required", name: "checkbox-required", control: control }),
+        react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "CheckboxInput form", name: "checkbox1", control: control }),
+        react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "CheckboxInput form required", name: "checkbox-required", control: control, isRequired: true }),
         react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "CheckboxInput form disabled", name: "checkbox-disabled", control: control, isDisabled: true }),
         react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "CheckboxInput form readOnly", name: "checkbox-readonly", control: control, isReadOnly: true }),
         react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit")));

package/dropzone/dropzone.stories.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
 const button_1 = require("@uxf/ui/button");
 const message_1 = require("@uxf/ui/message");
+const get_dropzone_state_1 = require("@uxf/ui/utils/get-dropzone-state");
 const upload_file_mock_1 = require("@uxf/ui/utils/mocks/upload-file.mock");
 const validator_exceptions_1 = require("@uxf/ui/utils/validator/validator-exceptions");
 const react_1 = __importDefault(require("react"));
@@ -52,14 +53,17 @@ function Default() {
             alert("Maximální velikost souboru je 1\xa0MB.");
         }
     };
-    const storyFormDropzone = (control) => (react_1.default.createElement("div", { className: "space-y-8" },
-        react_1.default.createElement(index_1.Dropzone, { accept: {
-                "image/png": [".png"],
-            }, control: control, helperText: "Allow multiple files, 1MB max file size, only .png", isRequired: true, label: "Use drag and drop or click to upload", name: "dropzone", onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, maxFileSize: 1024 * 1024 }),
-        react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit"),
-        react_1.default.createElement(index_1.Dropzone.List, { control: control, errorText: "Oops, n\u011Bco se pokazilo", name: "dropzone", onRemoveConfirm: onRemoveConfirm })));
-    return (react_1.default.createElement(storybook_form_1.StorybookForm, { defaultValues: { dropzone: DUMMY_FILES } }, ({ control }) => (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
-            react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" }, storyFormDropzone(control)))))));
+    return (react_1.default.createElement(storybook_form_1.StorybookForm, { defaultValues: { dropzone: DUMMY_FILES } }, ({ control, watch }) => {
+        const { status } = (0, get_dropzone_state_1.getDropzoneState)(watch("dropzone"));
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
+                react_1.default.createElement("div", { className: "space-y-2 p-20 lg:w-1/2" },
+                    react_1.default.createElement("div", { className: "space-y-8" },
+                        react_1.default.createElement(index_1.Dropzone, { accept: {
+                                "image/png": [".png"],
+                            }, control: control, helperText: "Allow multiple files, 1MB max file size, only .png", isDisabled: status === "UPLOADING", isRequired: true, label: "Use drag and drop or click to upload", name: "dropzone", onUploadError: onUploadError, onUploadFile: upload_file_mock_1.uploadFile, maxFileSize: 1024 * 1024 }),
+                        react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit"),
+                        react_1.default.createElement(index_1.Dropzone.List, { control: control, errorText: "Oops, n\u011Bco se pokazilo", name: "dropzone", onRemoveConfirm: onRemoveConfirm }))))));
+    }));
 }
 exports.Default = Default;

package/multi-combobox/multi-combobox.js

@@ -31,7 +31,7 @@ function MultiCombobox(props) {
         field.onChange(value);
         (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
     };
-    return (react_1.default.createElement(multi_combobox_1.MultiCombobox, { className: props.className, dropdownPlacement: props.dropdownPlacement, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, hiddenLabel: props.hiddenLabel, iconName: props.iconName, id: id, isDisabled: ((_e = props.options) === null || _e === void 0 ? void 0 : _e.length) === 0 || props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, loadOptions: props.loadOptions, name: field.name, noQueryMessage: props.noQueryMessage, notFoundMessage: props.notFoundMessage, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, placeholder: props.placeholder, ref: field.ref, rightAddon: props.rightAddon, rightElement: props.rightElement, style: props.style, value: field.value, withCheckboxes: props.withCheckboxes }));
+    return (react_1.default.createElement(multi_combobox_1.MultiCombobox, { className: props.className, dropdownMaxHeight: props.dropdownMaxHeight, dropdownPlacement: props.dropdownPlacement, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, hiddenLabel: props.hiddenLabel, iconName: props.iconName, id: id, isDisabled: ((_e = props.options) === null || _e === void 0 ? void 0 : _e.length) === 0 || props.isDisabled, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, loadOptions: props.loadOptions, name: field.name, noQueryMessage: props.noQueryMessage, notFoundMessage: props.notFoundMessage, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, placeholder: props.placeholder, ref: field.ref, rightAddon: props.rightAddon, rightElement: props.rightElement, style: props.style, value: field.value, withCheckboxes: props.withCheckboxes }));
 }
 exports.MultiCombobox = MultiCombobox;
 MultiCombobox.displayName = "UxfFormMultiCombobox";

package/multi-combobox/multi-combobox.stories.js

@@ -19,10 +19,16 @@ const options = [
     { id: "four", label: "Option four disabled", disabled: true },
     { id: "five", label: "Option five" },
     { id: "six", label: "Option six" },
+    { id: "seven", label: "Option seven" },
+    { id: "eight", label: "Option eight" },
+    { id: "nine", label: "Option nine" },
+    { id: "ten", label: "Option ten" },
+    { id: "twelve", label: "Option twelve" },
+    { id: "thirteen", label: "Option thirteen" },
 ];
 function Default() {
     const storyFormComboboxes = (control) => (react_1.default.createElement("div", { className: "space-y-8" },
-        react_1.default.createElement(multi_combobox_1.MultiCombobox, { control: control, helperText: "Za\u010Dn\u011Bte ps\u00E1t pro vyhled\u00E1v\u00E1n\u00ED...", id: "form-combobox", label: "Combobox form", name: "combobox1", options: options, placeholder: "Vyberte..." }),
+        react_1.default.createElement(multi_combobox_1.MultiCombobox, { control: control, dropdownMaxHeight: 350, helperText: "Za\u010Dn\u011Bte ps\u00E1t pro vyhled\u00E1v\u00E1n\u00ED...", id: "form-combobox", label: "Combobox form", name: "combobox1", options: options, placeholder: "Vyberte..." }),
         react_1.default.createElement(multi_combobox_1.MultiCombobox, { control: control, helperText: "Za\u010Dn\u011Bte ps\u00E1t pro vyhled\u00E1v\u00E1n\u00ED...", id: "form-combobox", label: "Combobox with checkboxes", name: "combobox-with-checkboxes", options: options, placeholder: "Vyberte...", withCheckboxes: true }),
         react_1.default.createElement(multi_combobox_1.MultiCombobox, { control: control, helperText: "Za\u010Dn\u011Bte ps\u00E1t pro vyhled\u00E1v\u00E1n\u00ED...", id: "form-combobox", isRequired: true, label: "Combobox form required", name: "combobox-required", options: options, placeholder: "Vyberte..." }),
         react_1.default.createElement(multi_combobox_1.MultiCombobox, { control: control, id: "form-combobox", isDisabled: true, label: "Combobox form disabled", name: "combobox-disabled", options: options, placeholder: "Vyberte..." }),

package/multi-select/multi-select.js

@@ -31,7 +31,7 @@ function MultiSelect(props) {
         field.onChange(value);
         (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, event);
     };
-    return (react_1.default.createElement(multi_select_1.MultiSelect, { className: props.className, dropdownPlacement: props.dropdownPlacement, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, hiddenLabel: props.hiddenLabel, iconName: props.iconName, 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, placeholder: props.placeholder, ref: field.ref, style: props.style, value: field.value, withPopover: props.withPopover }));
+    return (react_1.default.createElement(multi_select_1.MultiSelect, { className: props.className, dropdownMaxHeight: props.dropdownMaxHeight, dropdownPlacement: props.dropdownPlacement, dropdownStrategy: props.dropdownStrategy, helperText: (_d = (_c = fieldState.error) === null || _c === void 0 ? void 0 : _c.message) !== null && _d !== void 0 ? _d : props.helperText, hiddenLabel: props.hiddenLabel, iconName: props.iconName, 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, placeholder: props.placeholder, ref: field.ref, style: props.style, value: field.value, withPopover: props.withPopover }));
 }
 exports.MultiSelect = MultiSelect;
 MultiSelect.displayName = "UxfFormMultiSelect";

package/multi-select/multi-select.stories.js

@@ -19,10 +19,16 @@ const options = [
     { id: "four", label: "Option four" },
     { id: "five", label: "Option five" },
     { id: "six", label: "Option six" },
+    { id: "seven", label: "Option seven" },
+    { id: "eight", label: "Option eight" },
+    { id: "nine", label: "Option nine" },
+    { id: "ten", label: "Option ten" },
+    { id: "twelve", label: "Option twelve" },
+    { id: "thirteen", label: "Option thirteen" },
 ];
 function Default() {
     const storyFormMultiSelect = (control) => (react_1.default.createElement("div", { className: "space-y-8" },
-        react_1.default.createElement(multi_select_1.MultiSelect, { control: control, helperText: "Vyberte pros\u00EDm jednu nebo v\u00EDce mo\u017Enost\u00ED", id: "form-multi-select", label: "MultiSelect form", name: "multi-select", options: options, placeholder: "Vyberte..." }),
+        react_1.default.createElement(multi_select_1.MultiSelect, { control: control, dropdownMaxHeight: 350, helperText: "Vyberte pros\u00EDm jednu nebo v\u00EDce mo\u017Enost\u00ED", id: "form-multi-select", label: "MultiSelect form", name: "multi-select", options: options, placeholder: "Vyberte..." }),
         react_1.default.createElement(multi_select_1.MultiSelect, { control: control, id: "form-multi-select", label: "MultiSelect with popover", name: "multi-select-with-popover", options: options, placeholder: "Vyberte...", withPopover: true }),
         react_1.default.createElement(button_1.Button, { type: "submit" }, "Submit")));
     return (react_1.default.createElement(storybook_form_1.StorybookForm, { defaultValues: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/form",
-  "version": "11.17.2",
+  "version": "11.18.0",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -12,7 +12,7 @@
   "author": "UX Fans s.r.o",
   "license": "MIT",
   "dependencies": {
-    "@uxf/ui": "11.16.0",
+    "@uxf/ui": "11.18.0",
     "coordinate-parser": "1.0.7",
     "dayjs": "1.11.10",
     "react-hook-form": "7.51.0"

package/select/select.js

@@ -31,7 +31,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, dropdownClassName: props.dropdownClassName, dropdownMatchesInputWidth: props.dropdownMatchesInputWidth, dropdownPlacement: props.dropdownPlacement, dropdownStrategy: props.dropdownStrategy, 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, iconName: props.iconName, id: id, isClearable: props.isClearable, isDisabled: props.options.length === 0 || props.isDisabled, isFocused: props.isFocused, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, keyExtractor: props.keyExtractor, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, placeholder: props.placeholder, renderOption: props.renderOption, renderSelectedOption: props.renderSelectedOption, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, style: props.style, value: field.value, variant: props.variant }));
+    return (react_1.default.createElement(select_1.Select, { className: props.className, dropdownClassName: props.dropdownClassName, dropdownMatchesInputWidth: props.dropdownMatchesInputWidth, dropdownMaxHeight: props.dropdownMaxHeight, dropdownPlacement: props.dropdownPlacement, dropdownStrategy: props.dropdownStrategy, 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, iconName: props.iconName, id: id, isClearable: props.isClearable, isDisabled: props.options.length === 0 || props.isDisabled, isFocused: props.isFocused, isInvalid: !!fieldState.error, isReadOnly: props.isReadOnly, isRequired: props.isRequired, keyExtractor: props.keyExtractor, label: props.label, leftAddon: props.leftAddon, leftElement: props.leftElement, name: field.name, onBlur: onBlur, onChange: onChange, onFocus: props.onFocus, options: props.options, placeholder: props.placeholder, renderOption: props.renderOption, renderSelectedOption: props.renderSelectedOption, rightAddon: props.rightAddon, rightElement: props.rightElement, size: props.size, style: props.style, value: field.value, variant: props.variant }));
 }
 exports.Select = Select;
 Select.displayName = "UxfFormSelect";

package/select/select.stories.js

@@ -16,6 +16,13 @@ const options = [
     { id: "one", label: "Option one" },
     { id: "two", label: "Option two" },
     { id: "three", label: "Option three" },
+    { id: "four", label: "Option four" },
+    { id: "five", label: "Option five" },
+    { id: "six", label: "Option six" },
+    { id: "seven", label: "Option seven" },
+    { id: "eight", label: "Option eight" },
+    { id: "nine", label: "Option nine" },
+    { id: "ten", label: "Option ten" },
 ];
 const numberOptions = [
     { id: 0, label: "Option zero" },
@@ -24,7 +31,7 @@ const numberOptions = [
 ];
 function Default() {
     const storyFormSelects = (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", isClearable: true }),
+        react_1.default.createElement(select_1.Select, { dropdownMaxHeight: 350, label: "Select form", name: "select", control: control, placeholder: "placeholder", options: options, id: "form-select", isClearable: true }),
         react_1.default.createElement(select_1.Select, { label: "Select form disabled", name: "select-disabled", 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-helper-text", control: control, placeholder: "placeholder", options: options, id: "form-select", helperText: "Choose one option" }),
         react_1.default.createElement(select_1.Select, { label: "Select form with dropdown top", dropdownPlacement: "top", name: "select-dropdown-top", control: control, placeholder: "placeholder", options: options, id: "form-select" }),