@uxf/ui 11.53.2 → 11.54.0

package/avatar/avatar.d.ts

@@ -1,5 +1,6 @@
-import React, { HTMLAttributes } from "react";
+import React, { HTMLAttributes, ReactNode } from "react";
 export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
     src?: string;
+    placeholder?: ReactNode;
 }
 export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;

package/avatar/avatar.js

@@ -28,7 +28,8 @@ const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importStar(require("react"));
 const icon_1 = require("../icon");
 exports.Avatar = (0, react_1.forwardRef)((props, ref) => {
+    var _a;
     const avatarClassName = (0, cx_1.cx)("uxf-avatar", props.className);
-    return (react_1.default.createElement("div", { className: avatarClassName, ref: ref }, props.src ? react_1.default.createElement("img", { alt: "", className: "uxf-avatar__image", src: props.src }) : react_1.default.createElement(icon_1.Icon, { name: "user", size: 16 })));
+    return (react_1.default.createElement("div", { className: avatarClassName, ref: ref }, props.src ? (react_1.default.createElement("img", { alt: "", className: "uxf-avatar__image", src: props.src })) : (((_a = props.placeholder) !== null && _a !== void 0 ? _a : react_1.default.createElement(icon_1.Icon, { name: "user", size: 16 })))));
 });
 exports.Avatar.displayName = "UxfUiAvatar";

package/avatar-file-input/avatar-file-input.js

@@ -55,7 +55,7 @@ exports.AvatarFileInput = (0, react_1.forwardRef)((props, ref) => {
             inputNode.value = "";
         }
     };
-    return (react_1.default.createElement(form_component_1.FormComponent, { className: rootClassName, errorId: props.id, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, label: props.label, name: props.name },
+    return (react_1.default.createElement(form_component_1.FormComponent, { className: rootClassName, errorId: props.id, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label, name: props.name },
         react_1.default.createElement("div", { className: "uxf-avatar-file-input__inner-wrapper" },
             react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-avatar-file-input__input", stateClassName), onClick: onSelectFile },
                 react_1.default.createElement(_file_input_base_1._FileInputBase, { accept: (_c = props.accept) !== null && _c !== void 0 ? _c : "image/*", "aria-describedby": errorId, "aria-invalid": props.isInvalid, className: "uxf-avatar-file-input__input-element", form: props.form, id: id, isDisabled: props.isDisabled, isFocused: props.isFocused, 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: props.onUploadFile, ref: (0, compose_refs_1.composeRefs)(innerRef, ref), value: props.value }),

package/dropzone/dropzone.stories.js

@@ -28,6 +28,7 @@ const show_1 = require("@uxf/core-react/components/show");
 const is_not_empty_1 = require("@uxf/core/utils/is-not-empty");
 const handle_rejected_files_1 = require("@uxf/ui/dropzone/handle-rejected-files");
 const react_1 = __importStar(require("react"));
+const text_input_1 = require("../text-input");
 const toggle_1 = require("../toggle");
 const action_1 = require("../utils/action");
 const upload_file_mock_1 = require("../utils/mocks/upload-file.mock");
@@ -48,11 +49,10 @@ function Default() {
         react_1.default.createElement(toggle_1.Toggle, { label: "Only images upload", name: "toggle", onChange: () => setHasOnlyImagesAllowed((prev) => !prev), value: hasOnlyImagesAllowed }),
         react_1.default.createElement("div", { className: "flex items-center" },
             react_1.default.createElement(toggle_1.Toggle, { label: "Limit file count", name: "toggle", onChange: () => setIsFileCountLimited((prev) => !prev), value: isFileCountLimited }),
-            react_1.default.createElement("input", { className: "w-20", onChange: (event) => setFileCountLimit(parseInt(event.target.value, 10)), type: "number", value: fileCountLimit })),
+            react_1.default.createElement(text_input_1.TextInput, { className: "w-20", name: "limit-file-count", onChange: (value) => setFileCountLimit(parseInt(value, 10)), type: "number", value: fileCountLimit.toString() })),
         react_1.default.createElement("div", { className: "flex items-center" },
             react_1.default.createElement(toggle_1.Toggle, { label: "Limit file size", name: "toggle", onChange: () => setIsFileSizeLimited((prev) => !prev), value: isFileSizeLimited }),
-            react_1.default.createElement("input", { className: "w-20", onChange: (event) => setFileSizeLimit(parseInt(event.target.value, 10)), type: "number", value: fileSizeLimit }),
-            "MB"),
+            react_1.default.createElement(text_input_1.TextInput, { className: "w-28", name: "limit-file-size", onChange: (value) => setFileSizeLimit(parseInt(value, 10)), rightElement: "MB", type: "number", value: fileSizeLimit.toString() })),
         react_1.default.createElement(index_1.Dropzone, { accept: hasOnlyImagesAllowed ? { "image/*": [] } : undefined, isDisabled: isDisabled, label: "Use drag and drop or click to upload", maxFileSize: isFileSizeLimited ? fileSizeLimit * MB_SIZE : undefined, maxFilesCount: isFileCountLimited ? fileCountLimit : undefined, name: "dropzone-disabled-drag-and-drop", onChange: onChange, onDropRejected: (fileRejections) => (0, handle_rejected_files_1.handleRejectedFiles)(fileRejections, fileCountLimit), onUploadFile: upload_file_mock_1.uploadFile, value: files }),
         react_1.default.createElement(index_1.Dropzone.List, { className: "mt-6", errorText: "Chyba p\u0159i nahr\u00E1v\u00E1n\u00ED souboru", isDisabled: isDisabled, name: "dropzone-error-message", onChange: onChange, onRemoveConfirm: onRemoveConfirm, value: files }),
         react_1.default.createElement(show_1.Show, { when: (0, is_not_empty_1.isNotEmpty)(files) },

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/ui",
-    "version": "11.53.2",
+    "version": "11.54.0",
     "description": "",
     "publishConfig": {
         "access": "public"
@@ -23,10 +23,10 @@
     "dependencies": {
         "@floating-ui/react": "0.26.28",
         "@headlessui/react": "1.7.19",
-        "@uxf/core": "11.53.2",
-        "@uxf/core-react": "11.53.2",
+        "@uxf/core": "11.54.0",
+        "@uxf/core-react": "11.54.0",
         "@uxf/datepicker": "11.50.0",
-        "@uxf/styles": "11.53.2",
+        "@uxf/styles": "11.54.0",
         "color2k": "2.0.3",
         "dayjs": "1.11.13",
         "jump.js": "1.0.2",