@uxf/ui 10.8.1 → 10.9.0

package/_file-input-base/file-input-base.d.ts

@@ -8,6 +8,6 @@ export interface FileInputBaseProps extends FormControlProps<FileResponse | null
     id?: string;
     maxFileSize?: number;
     onUploadError?: (err: unknown) => void;
-    onUploadFile: (file: File | undefined) => Promise<FileResponse | null>;
+    onUploadFile: (file: File) => Promise<FileResponse>;
 }
 export declare const _FileInputBase: React.ForwardRefExoticComponent<FileInputBaseProps & React.RefAttributes<HTMLInputElement>>;

package/_file-input-base/file-input-base.js

@@ -42,9 +42,6 @@ exports._FileInputBase = (0, react_1.forwardRef)((props, ref) => {
                 (_b = props.onUploadError) === null || _b === void 0 ? void 0 : _b.call(props, err);
             }
         }
-        else {
-            props.onChange(null, e);
-        }
     };
     return (react_1.default.createElement("input", { accept: props.accept, "aria-invalid": props.isInvalid, "aria-describedby": props["aria-describedby"], className: props.className, disabled: props.isDisabled, form: props.form, id: props.id, name: props.name, onBlur: props.onBlur, onChange: onChange, onFocus: props.onFocus, readOnly: props.isReadOnly, ref: ref, required: props.isRequired, tabIndex: props.isDisabled ? -1 : undefined, type: "file" }));
 });

package/alert-bubble/alert-bubble.d.ts

@@ -1,8 +1,10 @@
 import { FC } from "react";
+import { IconName } from "../icon/types";
 import { AlertBubbleColor, AlertBubbleSize } from "./theme";
 export interface AlertBubbleProps {
     className?: string;
     color?: AlertBubbleColor;
+    icon?: IconName;
     size?: AlertBubbleSize;
 }
 export declare const AlertBubble: FC<AlertBubbleProps>;

package/alert-bubble/alert-bubble.js

@@ -14,9 +14,9 @@ const ICON = {
     success: "check",
 };
 const AlertBubble = (props) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-alert-bubble", `uxf-alert-bubble--color-${(_a = props.color) !== null && _a !== void 0 ? _a : "default"}`, `uxf-alert-bubble--size-${(_b = props.size) !== null && _b !== void 0 ? _b : "default"}`, props.className) },
-        react_1.default.createElement(icon_1.Icon, { className: "uxf-alert-bubble__icon", name: ICON[(_c = props.color) !== null && _c !== void 0 ? _c : "default"] })));
+        react_1.default.createElement(icon_1.Icon, { className: "uxf-alert-bubble__icon", name: (_c = props.icon) !== null && _c !== void 0 ? _c : ICON[(_d = props.color) !== null && _d !== void 0 ? _d : "default"] })));
 };
 exports.AlertBubble = AlertBubble;
 exports.AlertBubble.displayName = "UxfUiAlertBubble";

package/dropzone/dropzone-input.d.ts

@@ -15,6 +15,6 @@ export interface DropzoneInputProps extends FormControlProps<DropzoneFile[] | un
     noClick?: boolean;
     noDrag?: boolean;
     onUploadError?: (err: unknown) => void;
-    onUploadFile: (file: File | undefined, options?: UploadOptions) => Promise<FileResponse | null>;
+    onUploadFile: (file: File, options?: UploadOptions) => Promise<FileResponse>;
 }
 export declare const DropzoneInput: React.ForwardRefExoticComponent<DropzoneInputProps & React.RefAttributes<HTMLDivElement>>;

package/file-input/file-input.js

@@ -26,6 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileInput = void 0;
 const classes_1 = require("@uxf/core/constants/classes");
 const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
+const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const cx_1 = require("@uxf/core/utils/cx");
 const context_1 = require("@uxf/ui/context");
 const input_1 = require("@uxf/ui/input");
@@ -51,13 +52,21 @@ exports.FileInput = (0, react_1.forwardRef)((props, ref) => {
         setIsUploading(false);
         return response;
     };
+    const onChange = (value, event) => {
+        const inputNode = innerRef.current;
+        // this ensures that the input is cleared after the upload, so there is no problem with uploading the same file again
+        if (!value && inputNode) {
+            inputNode.value = "";
+        }
+        props.onChange(value, event);
+    };
     return (react_1.default.createElement(form_component_1.FormComponent, { className: (0, cx_1.cx)(input.focused && classes_1.CLASSES.IS_FOCUSED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY), errorId: errorId, form: props.form, helperText: props.helperText, inputId: id, isRequired: props.isRequired, label: props.label, hiddenLabel: props.hiddenLabel },
         react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(_file_input_base_1._FileInputBase, { accept: props.accept, "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: `uxf-file-input__input ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, form: props.form, id: id, isDisabled: props.isDisabled || isUploading, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, maxFileSize: props.maxFileSize, name: props.name, onBlur: input.onBlur, onChange: props.onChange, onFocus: input.onFocus, onUploadError: props.onUploadError, onUploadFile: onUploadFile, ref: ref, value: props.value }),
+            react_1.default.createElement(_file_input_base_1._FileInputBase, { accept: props.accept, "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: `uxf-file-input__input ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}`, form: props.form, id: id, isDisabled: props.isDisabled || isUploading, isInvalid: props.isInvalid, isReadOnly: props.isReadOnly, isRequired: props.isRequired, maxFileSize: props.maxFileSize, name: props.name, onBlur: input.onBlur, onChange: onChange, onFocus: input.onFocus, onUploadError: props.onUploadError, onUploadFile: onUploadFile, ref: (0, composeRefs_1.composeRefs)(ref, innerRef), value: props.value }),
             react_1.default.createElement("label", { className: (0, cx_1.cx)("uxf-input", "uxf-file-input__label", input.focused && classes_1.CLASSES.IS_FOCUSED, (props.isDisabled || props.isReadOnly) && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, isUploading && classes_1.CLASSES.IS_LOADING, isUploading && "uxf-file-input__label--has-right-addon", `uxf-input--size-${(_b = props.size) !== null && _b !== void 0 ? _b : "default"}`, `uxf-input--variant-${(_c = props.variant) !== null && _c !== void 0 ? _c : "default"}`), htmlFor: id },
                 react_1.default.createElement("div", { className: "uxf-input__left-addon uxf-file-input__label__button" }, !isUploading ? ((_d = props.uploadButtonLabel) !== null && _d !== void 0 ? _d : "Vyberte soubor") : (react_1.default.createElement(loader_1.Loader, { className: "uxf-file-input__label__loader", size: "sm" }))),
                 react_1.default.createElement("div", { className: "uxf-file-input__label__wrapper" },
                     (context === null || context === void 0 ? void 0 : context.domain) && props.value ? (react_1.default.createElement("a", { className: "uxf-file-input__label__wrapper__file-name-link", href: (0, get_file_url_1.getFileUrl)(context.domain, props.value), target: "_blank", rel: "noreferrer noopenner" }, fileName)) : (react_1.default.createElement("span", { className: "uxf-file-input__label__wrapper__file-name" }, fileName)),
-                    props.value && !props.isDisabled && !props.isReadOnly && props.isClearable && (react_1.default.createElement(input_1.Input.RemoveButton, { onChange: props.onChange })))))));
+                    props.value && !props.isDisabled && !props.isReadOnly && props.isClearable && (react_1.default.createElement(input_1.Input.RemoveButton, { onChange: onChange })))))));
 });
 exports.FileInput.displayName = "UxfUiFileInput";

package/message/message-content.d.ts

@@ -1,4 +1,5 @@
 import { FC, ReactNode } from "react";
+import { IconName } from "../icon/types";
 import { MessageColor, MessageVariant } from "./theme";
 export interface ConfirmProps {
     CustomIconComponent?: ReactNode;
@@ -8,6 +9,7 @@ export interface ConfirmProps {
     className?: string;
     color: MessageColor;
     description?: string;
+    icon?: IconName;
     onAccept?: () => void;
     onCancel?: () => void;
     onClose: () => void;

package/message/message-content.js

@@ -28,7 +28,7 @@ const MessageContent = (props) => {
     const isCentered = props.variant === "centered";
     return (react_1.default.createElement("div", { className: `uxf-message__content ${(_a = props.className) !== null && _a !== void 0 ? _a : ""}` },
         react_1.default.createElement("div", { className: "uxf-message__content-wrapper" },
-            props.CustomIconComponent !== null ? (react_1.default.createElement("div", { className: "uxf-message__icon-wrapper" }, (_b = props.CustomIconComponent) !== null && _b !== void 0 ? _b : (react_1.default.createElement(alert_bubble_1.AlertBubble, { className: "uxf-message__alert-bubble", color: props.color, size: isCentered ? "default" : "xs" })))) : null,
+            props.CustomIconComponent !== null ? (react_1.default.createElement("div", { className: "uxf-message__icon-wrapper" }, (_b = props.CustomIconComponent) !== null && _b !== void 0 ? _b : (react_1.default.createElement(alert_bubble_1.AlertBubble, { className: "uxf-message__alert-bubble", color: props.color, icon: props.icon, size: isCentered ? "default" : "xs" })))) : null,
             react_1.default.createElement("div", { className: "uxf-message__text-content" },
                 react_1.default.createElement("h2", { className: "uxf-message__title" }, props.title),
                 react_1.default.createElement("p", { className: "uxf-message__description" }, props.description)),

package/message/message.d.ts

@@ -1,17 +1,19 @@
 import React, { ReactNode } from "react";
+import { IconName } from "../icon/types";
 import { MessageColor, MessageVariant } from "./theme";
 export interface MessageProps {
     CustomIconComponent?: ReactNode;
+    acceptLabel?: string;
+    cancelLabel: string;
     children?: ReactNode;
     className?: string;
-    onCancel?: () => void;
+    color: MessageColor;
+    description?: string;
+    icon?: IconName;
     onAccept?: () => void;
+    onCancel?: () => void;
     title: string;
-    description?: string;
-    acceptLabel?: string;
-    cancelLabel: string;
     variant?: MessageVariant;
-    color: MessageColor;
 }
 export interface MessageRef {
     close: () => void;

package/message/message.js

@@ -42,6 +42,6 @@ exports.Message = (0, react_1.forwardRef)((props, ref) => {
         message: innerRef.current.message,
     }), []);
     return content ? (react_1.default.createElement(dialog_1.Dialog, { className: (0, cx_1.cx)("uxf-message", `uxf-message--variant-${(_a = content.variant) !== null && _a !== void 0 ? _a : "simple"}`, `uxf-message--color-${content.color}`, content.className), disableBackdropClose: true, onClose: close, open: !!content },
-        react_1.default.createElement(message_content_1.MessageContent, { CustomIconComponent: content.CustomIconComponent, acceptLabel: content.acceptLabel, cancelLabel: content.cancelLabel, color: content.color, description: content.description, onAccept: content.onAccept, onCancel: content.onCancel, onClose: close, title: content.title, variant: content.variant }, content.children))) : null;
+        react_1.default.createElement(message_content_1.MessageContent, { CustomIconComponent: content.CustomIconComponent, acceptLabel: content.acceptLabel, cancelLabel: content.cancelLabel, color: content.color, description: content.description, icon: content.icon, onAccept: content.onAccept, onCancel: content.onCancel, onClose: close, title: content.title, variant: content.variant }, content.children))) : null;
 });
 exports.Message.displayName = "UxfUiMessage";

package/multi-combobox/_multi-combobox-base.js

@@ -108,6 +108,11 @@ exports._MultiComboboxBase = (0, react_3.forwardRef)((props, ref) => {
             ? (_f = props.allOptionsSelectedMessage) !== null && _f !== void 0 ? _f : "Všechny možnosti jsou již vybrány"
             : (_g = props.notFoundMessage) !== null && _g !== void 0 ? _g : "Nic nenalezeno";
     const withoutPopover = !props.withPopover;
+    const onBlur = (e) => {
+        var _a;
+        setQuery("");
+        (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    };
     return (react_3.default.createElement(react_2.Combobox, { as: "div", by: "id", className: (0, cx_1.cx)(withoutPopover && "uxf-form-component", "uxf-multi-combobox", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), disabled: props.isDisabled || props.isReadOnly, multiple: true, onChange: handleComboboxValueChange, value: selectedOptions }, (renderProps) => {
         var _a, _b;
         const inputElement = (react_3.default.createElement(react_3.default.Fragment, null,
@@ -116,15 +121,14 @@ exports._MultiComboboxBase = (0, react_3.forwardRef)((props, ref) => {
                 props.leftElement && react_3.default.createElement(input_1.Input.LeftElement, null, props.leftElement),
                 react_3.default.createElement("div", { className: "uxf-multi-combobox__selected-options" },
                     selectedOptions.map((item) => (react_3.default.createElement(chip_1.Chip, { className: "uxf-multi-combobox__input-chip", color: item.color, key: item.id, onClose: item.disabled ? undefined : handleRemove(item.id), size: "large", suppressFocus: true }, item.label))),
-                    react_3.default.createElement(react_2.Combobox.Input, { autoComplete: "off", className: "uxf-multi-combobox__input", onChange: handleInputChange, onKeyDown: handleInputKeyDown, placeholder: props.placeholder, type: "text", value: query })),
+                    react_3.default.createElement(react_2.Combobox.Input, { autoComplete: "off", className: "uxf-multi-combobox__input", onBlur: onBlur, onChange: handleInputChange, onKeyDown: handleInputKeyDown, placeholder: props.placeholder, type: "text", value: query })),
                 props.rightAddon && react_3.default.createElement(input_1.Input.RightAddon, null, props.rightAddon),
                 props.rightElement && react_3.default.createElement(input_1.Input.RightElement, null, props.rightElement),
                 react_3.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-select-base__arrow-icon", (props.withPopover ? props.isPopoverOpen : renderProps.open) && classes_1.CLASSES.IS_OPEN), name: iconName })),
             renderProps.open && (react_3.default.createElement(react_1.FloatingPortal, null,
                 react_3.default.createElement(react_2.Combobox.Options, { className: (0, cx_1.cx)("uxf-dropdown", `uxf-dropdown--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, `uxf-dropdown--variant-${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`, dropdown.placement === "bottom" && "uxf-dropdown--bottom", dropdown.placement === "top" && "uxf-dropdown--top"), ref: dropdown.refs.setFloating, static: true, style: dropdown.floatingStyles }, filteredData.length > 0 ? (filteredData.map((option) => {
                     var _a, _b, _c, _d;
-                    const label = (_b = (_a = props.renderOption) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : option.label;
-                    return (react_3.default.createElement(OptionElement, { option: option, key: (_d = (_c = props.keyExtractor) === null || _c === void 0 ? void 0 : _c.call(props, option)) !== null && _d !== void 0 ? _d : option.id, label: label, handleCheckboxChange: handleCheckboxChange(option.id), withCheckboxes: props.withCheckboxes, withoutPopover: withoutPopover }));
+                    return (react_3.default.createElement(OptionElement, { option: option, key: (_b = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : option.id, label: (_d = (_c = props.renderOption) === null || _c === void 0 ? void 0 : _c.call(props, option)) !== null && _d !== void 0 ? _d : option.label, handleCheckboxChange: handleCheckboxChange(option.id), withCheckboxes: props.withCheckboxes, withoutPopover: withoutPopover }));
                 })) : (react_3.default.createElement("div", { className: "uxf-dropdown__empty-wrapper" }, emptyMessage))))),
             props.helperText && withoutPopover && (react_3.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: props.errorId }, props.helperText))));
         return (react_3.default.createElement(react_3.default.Fragment, null, withoutPopover ? (react_3.default.createElement(react_3.default.Fragment, null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "10.8.1",
+  "version": "10.9.0",
   "description": "",
   "publishConfig": {
     "access": "public"

package/utils/mocks/upload-file.mock.d.ts

@@ -1,2 +1,2 @@
 import { FileResponse, UploadOptions } from "@uxf/ui/types";
-export declare function uploadFile(file: File | undefined, uploadOptions?: UploadOptions): Promise<FileResponse | null>;
+export declare function uploadFile(file: File, uploadOptions?: UploadOptions): Promise<FileResponse>;

package/utils/mocks/upload-file.mock.js

@@ -10,40 +10,37 @@ function getRandomUuid() {
         .join(""))
         .join("-");
 }
-async function uploadFile(file, uploadOptions) {
-    if (file) {
-        // axios.put("/api/upload", file, { signal: uploadOptions?.abortController?.signal, onUploadProgress: uploadOptions?.onUploadProgress });
-        return new Promise((resolve) => {
-            const time = file.size / 100;
-            const interval = time / 10;
-            let loaded = 0;
-            const intervalTimer = window.setInterval(() => {
-                var _a, _b;
-                if ((_a = uploadOptions === null || uploadOptions === void 0 ? void 0 : uploadOptions.abortController) === null || _a === void 0 ? void 0 : _a.signal.aborted) {
-                    clearInterval(intervalTimer);
-                    // eslint-disable-next-line @typescript-eslint/no-use-before-define
-                    clearTimeout(timeoutTimer);
-                    return;
-                }
-                loaded += (file.size / time) * interval;
-                (_b = uploadOptions === null || uploadOptions === void 0 ? void 0 : uploadOptions.onUploadProgress) === null || _b === void 0 ? void 0 : _b.call(uploadOptions, {
-                    lengthComputable: true,
-                    loaded,
-                    total: file.size,
-                });
-            }, interval);
-            const timeoutTimer = window.setTimeout(() => {
+function uploadFile(file, uploadOptions) {
+    // axios.put("/api/upload", file, { signal: uploadOptions?.abortController?.signal, onUploadProgress: uploadOptions?.onUploadProgress });
+    return new Promise((resolve) => {
+        const time = file.size / 100;
+        const interval = time / 10;
+        let loaded = 0;
+        const intervalTimer = window.setInterval(() => {
+            var _a, _b;
+            if ((_a = uploadOptions === null || uploadOptions === void 0 ? void 0 : uploadOptions.abortController) === null || _a === void 0 ? void 0 : _a.signal.aborted) {
                 clearInterval(intervalTimer);
+                // eslint-disable-next-line @typescript-eslint/no-use-before-define
                 clearTimeout(timeoutTimer);
-                resolve({
-                    id: Math.round(Math.random() * 100000000),
-                    uuid: getRandomUuid(),
-                    name: file.name,
-                    extension: file.name.split(".").slice(-1).join(""),
-                });
-            }, time);
-        });
-    }
-    return null;
+                return;
+            }
+            loaded += (file.size / time) * interval;
+            (_b = uploadOptions === null || uploadOptions === void 0 ? void 0 : uploadOptions.onUploadProgress) === null || _b === void 0 ? void 0 : _b.call(uploadOptions, {
+                lengthComputable: true,
+                loaded,
+                total: file.size,
+            });
+        }, interval);
+        const timeoutTimer = window.setTimeout(() => {
+            clearInterval(intervalTimer);
+            clearTimeout(timeoutTimer);
+            resolve({
+                id: Math.round(Math.random() * 100000000),
+                uuid: getRandomUuid(),
+                name: file.name,
+                extension: file.name.split(".").slice(-1).join(""),
+            });
+        }, time);
+    });
 }
 exports.uploadFile = uploadFile;