@uxf/ui 11.53.1 → 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/css/flash-messages.css

@@ -34,6 +34,7 @@
     }
 
     &__dismissable {
+        max-height: 100vh;
         padding-top: theme("spacing.11");
 
         &:hover {
@@ -41,8 +42,10 @@
         }
 
         &.is-collapsed {
+            max-height: calc(var(--last-flash-message-height) + 60px);
             padding-right: theme("spacing.5");
             scrollbar-width: none;
+            transition: max-height 0.3s ease;
         }
     }
 

package/css/textarea.css

@@ -24,12 +24,15 @@
         display: block;
         outline: none;
         overflow-y: hidden;
-        resize: none;
         width: 100%;
 
         &::placeholder {
             color: theme("colors.gray.400");
         }
+
+        &--is-auto-height-enabled {
+            resize: none;
+        }
     }
 
     &.is-focused {

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/flash-messages/flash-messages.js

@@ -26,6 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FlashMessages = void 0;
 const react_1 = require("@headlessui/react");
 const use_clickable_props_1 = require("@uxf/core-react/hooks/use-clickable-props");
+const is_not_nil_1 = require("@uxf/core/utils/is-not-nil");
 const react_2 = __importStar(require("react"));
 const flash_message_1 = require("./flash-message");
 exports.FlashMessages = (0, react_2.forwardRef)((props, ref) => {
@@ -82,13 +83,20 @@ exports.FlashMessages = (0, react_2.forwardRef)((props, ref) => {
         closeAll: innerRef.current.closeAll,
         open: innerRef.current.open,
     }), []);
+    const dismissableContainerRef = (0, react_2.useRef)(null);
     const clickableProps = (0, use_clickable_props_1.useClickableProps)({
-        className: `uxf-flash-messages__dismissable ${isCollapsed ? "is-collapsed" : ""}`,
+        className: `uxf-flash-messages__dismissable ${isCollapsed ? "is-collapsed" : "is-expanded"}`,
         onMouseEnter: () => setIsCollapsed(false),
-        onMouseLeave: () => setIsCollapsed(true),
+        onMouseLeave: () => {
+            // scroll back down in case of having too many flash messages and scrolled up
+            if ((0, is_not_nil_1.isNotNil)(dismissableContainerRef.current)) {
+                dismissableContainerRef.current.scrollTop = dismissableContainerRef.current.scrollHeight;
+            }
+            setIsCollapsed(true);
+        },
     });
-    return notifications.length > 0 ? (react_2.default.createElement("div", { className: "uxf-flash-messages" },
-        dismissableNotifications.length > 0 && (react_2.default.createElement("div", { ...clickableProps },
+    return notifications.length > 0 ? (react_2.default.createElement("div", { className: "uxf-flash-messages", style: { "--last-flash-message-height": `${lastToastHeight}px` } },
+        dismissableNotifications.length > 0 && (react_2.default.createElement("div", { ref: dismissableContainerRef, ...clickableProps },
             react_2.default.createElement("div", null, dismissableNotifications.map((notification, index) => {
                 const isLast = index === dismissableNotifications.length - 1;
                 return (react_2.default.createElement(react_1.Transition, { appear: true, className: "uxf-flash-message-wrapper", enterFrom: "uxf-flash-message-wrapper--enter-from", enterTo: "uxf-flash-message-wrapper--enter-to", key: notification.id, ref: isLast ? lastToastRef : null, show: true, style: isLast

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/ui",
-    "version": "11.53.1",
+    "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.1",
-        "@uxf/core-react": "11.53.1",
+        "@uxf/core": "11.54.0",
+        "@uxf/core-react": "11.54.0",
         "@uxf/datepicker": "11.50.0",
-        "@uxf/styles": "11.53.1",
+        "@uxf/styles": "11.54.0",
         "color2k": "2.0.3",
         "dayjs": "1.11.13",
         "jump.js": "1.0.2",

package/textarea/textarea.js

@@ -34,7 +34,7 @@ const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importStar(require("react"));
 const form_component_1 = require("../form-component");
 exports.Textarea = (0, react_1.forwardRef)((props, ref) => {
-    var _a, _b;
+    var _a, _b, _c;
     const innerRef = (0, react_1.useRef)(null);
     const input = (0, use_input_focus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
     const generatedId = (0, react_1.useId)();
@@ -43,15 +43,17 @@ exports.Textarea = (0, react_1.forwardRef)((props, ref) => {
     const rootClassName = (0, cx_1.cx)("uxf-textarea", ((_b = props.isFocused) !== null && _b !== void 0 ? _b : 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, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.className);
     const handleChange = (event) => props.onChange(event.target.value, event);
     const focusTextareaOnWrapperClick = () => { var _a; return (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); };
+    const rows = (_c = props.rows) !== null && _c !== void 0 ? _c : 4;
     (0, use_isomorphic_layout_effect_1.useIsomorphicLayoutEffect)(() => {
         const node = innerRef.current;
         if (!node || props.disableAutoHeight) {
             return;
         }
-        (0, adjust_textarea_height_1.adjustTextareaHeight)(node, props.rows);
-    }, [props.disableAutoHeight, props.rows, props.value]);
+        const cleanup = (0, adjust_textarea_height_1.adjustTextareaHeight)(node, rows);
+        return () => cleanup();
+    }, [props.disableAutoHeight, rows]);
     return (react_1.default.createElement(form_component_1.FormComponent, { className: rootClassName, errorId: errorId, form: props.form, helperText: props.helperText, hiddenLabel: props.hiddenLabel, inputId: id, isRequired: props.isRequired, label: props.label, name: props.name },
         react_1.default.createElement("div", { className: "uxf-textarea__wrapper", onClick: focusTextareaOnWrapperClick, style: props.style },
-            react_1.default.createElement("textarea", { "aria-describedby": errorId, "aria-invalid": props.isInvalid, autoComplete: props.autoComplete, className: "uxf-textarea__element", disabled: props.isDisabled, form: props.form, id: id, maxLength: props.maxLength, minLength: props.minLength, name: props.name, onBlur: input.onBlur, onChange: handleChange, onFocus: input.onFocus, placeholder: props.placeholder, readOnly: props.isReadOnly, ref: (0, compose_refs_1.composeRefs)(innerRef, ref), required: props.isRequired, rows: props.rows, value: props.value }))));
+            react_1.default.createElement("textarea", { "aria-describedby": errorId, "aria-invalid": props.isInvalid, autoComplete: props.autoComplete, className: (0, cx_1.cx)("uxf-textarea__element", !props.disableAutoHeight && rows >= 1 && "uxf-textarea__element--is-auto-height-enabled"), disabled: props.isDisabled, form: props.form, id: id, maxLength: props.maxLength, minLength: props.minLength, name: props.name, onBlur: input.onBlur, onChange: handleChange, onFocus: input.onFocus, placeholder: props.placeholder, readOnly: props.isReadOnly, ref: (0, compose_refs_1.composeRefs)(innerRef, ref), required: props.isRequired, rows: rows, value: props.value }))));
 });
 exports.Textarea.displayName = "UxfUiTextarea";