@uxf/ui 11.53.1 → 11.53.2

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/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.53.2",
     "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.53.2",
+        "@uxf/core-react": "11.53.2",
         "@uxf/datepicker": "11.50.0",
-        "@uxf/styles": "11.53.1",
+        "@uxf/styles": "11.53.2",
         "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";