@reykjavik/hanna-react 0.10.169 → 0.10.170

package/Alert.d.ts

@@ -11,7 +11,7 @@ type AlertType = 'info' | 'success' | 'warning' | 'error' | 'critical';
 export declare const alertTypes: Record<string, 1>;
 export type AlertProps = {
     type: AlertType;
-    /** Defaults to `true` if an `onClose` handler or a `closeUrl` is passaed */
+    /** Defaults to `true` if an `onClose` or `closeUrl` handlers are passaed */
     closable?: boolean;
     /** The alert content */
     children?: ReactNode;
@@ -25,7 +25,7 @@ export type AlertProps = {
     instantShow?: boolean;
 } & SSRSupportProps & EitherObj<{
     /**
-     * Seconds until the Alert auto-closes.
+     * Number of **seconds** until the Alert auto-closes.
      * Mosueover and keyboard focus resets the timer.  \
      * NOTE: An `onClosed` handler is required when using this option.
      */

package/Alert.js

@@ -10,25 +10,42 @@ const env_js_1 = require("./utils/env.js");
 const utils_js_1 = require("./utils.js");
 // FIXME: Eventually import from @reykjavik/hanna-css
 const AlertCloseTransitionDuration = 400;
+/** How much to extend the remaining time when the auto-closing is interrupted (frozen) by mouseover or keyboard focus */
+const FREEZE_EXTENSION_MS = 750;
 const useAutoClosing = (autoClose, props) => {
-    const [temp, setTemp] = (0, react_1.useState)(0);
+    const startTime = (0, react_1.useRef)(Date.now());
+    const remainingMs = (0, react_1.useRef)(autoClose);
+    const [frost, setFrost] = (0, react_1.useState)(0);
     if (!autoClose) {
-        return { autoClosing: false };
+        return { autoCloseIn: undefined };
     }
     const thaw = (e) => {
-        setTemp((temp) => temp + 1);
+        // When it's about to thaw, make set a new start time to base future
+        // "remaining time" calculations on.
+        if (frost === 1) {
+            startTime.current = Date.now();
+        }
+        setFrost((frost) => frost - 1);
         const handler = props[e.type.startsWith('blur') ? 'onBlur' : 'onMouseLeave'];
-        // @ts-expect-error  (Proper fix ends up as too much code for this extreme edge case)
         handler && handler(e);
     };
     const freeze = (e) => {
-        setTemp((temp) => temp - 1);
+        // When there's no frost and it's about to freeze, make note
+        // of the remaining time. Furhter freezes should not update this.
+        if (!frost) {
+            console.log(remainingMs.current);
+            // Calculate the currently remaining time based on the last start time.
+            const newRemainingMs = remainingMs.current - (Date.now() - startTime.current);
+            // Extend the remainint time a bit to give usees some leeway,
+            // but never extend it beyond the original autoClose value.
+            remainingMs.current = Math.min(newRemainingMs + FREEZE_EXTENSION_MS, autoClose);
+        }
+        setFrost((frost) => frost + 1);
         const handler = props[e.type.startsWith('focus') ? 'onFocus' : 'onMouseEnter'];
-        // @ts-expect-error  (Resolving ends up as too much code for this extreme edge case)
         handler && handler(e);
     };
     return {
-        autoClosing: temp === 0,
+        autoCloseIn: frost === 0 ? remainingMs.current : undefined,
         autoClosingProps: Object.assign({ onMouseEnter: freeze, onMouseLeave: thaw, onFocus: freeze, onBlur: thaw }, (env_js_1.isPreact && {
             onfocusin: (e) => e.currentTarget !== e.target && freeze(e),
             onfocusout: (e) => e.currentTarget !== e.target && thaw(e),
@@ -51,7 +68,7 @@ exports.alertTypes = {
 const Alert = (props) => {
     var _a;
     const { type, childrenHTML, children, onClose, closeUrl, ssr, onClosed, instantShow, wrapperProps, } = props;
-    const autoClose = Math.max(props.autoClose || 0, 0);
+    const autoClose = Math.max(props.autoClose || 0, 0) * 1000;
     const closable = (_a = props.closable) !== null && _a !== void 0 ? _a : !!(onClose || (onClosed && !autoClose) || closeUrl != null);
     const closing = (0, react_1.useRef)();
     const isBrowser = (0, utils_js_1.useIsBrowserSide)(ssr);
@@ -76,13 +93,13 @@ const Alert = (props) => {
             }, AlertCloseTransitionDuration);
         }
     }, [onClose, onClosed]);
-    const { autoClosing, autoClosingProps } = useAutoClosing(autoClose, props);
+    const { autoCloseIn, autoClosingProps } = useAutoClosing(autoClose, props);
     (0, react_1.useEffect)(() => {
-        if (autoClosing) {
+        if (autoCloseIn) {
             let autoCloseTimeout;
             autoCloseTimeout = setTimeout(() => {
                 closeAlert();
-            }, autoClose * 1000);
+            }, autoCloseIn);
             return () => {
                 if (autoCloseTimeout) {
                     clearTimeout(autoCloseTimeout);
@@ -94,7 +111,7 @@ const Alert = (props) => {
                 }
             };
         }
-    }, [closeAlert, autoClosing, autoClose]);
+    }, [closeAlert, autoCloseIn]);
     return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('Alert', [!!exports.alertTypes[type] && type, closable && 'closable'], (wrapperProps || {}).className), role: "alert", hidden: !open || undefined }, autoClosingProps),
         childrenHTML ? (react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: childrenHTML } })) : (children),
         ' ',

package/CHANGELOG.md

@@ -4,6 +4,13 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.170
+
+_2026-03-10_
+
+- `Alert`:
+  - fix: On freeze only extend auto-closing alerts' remaining time by a bit
+
 ## 0.10.169
 
 _2026-02-24_

package/esm/Alert.d.ts

@@ -11,7 +11,7 @@ type AlertType = 'info' | 'success' | 'warning' | 'error' | 'critical';
 export declare const alertTypes: Record<string, 1>;
 export type AlertProps = {
     type: AlertType;
-    /** Defaults to `true` if an `onClose` handler or a `closeUrl` is passaed */
+    /** Defaults to `true` if an `onClose` or `closeUrl` handlers are passaed */
     closable?: boolean;
     /** The alert content */
     children?: ReactNode;
@@ -25,7 +25,7 @@ export type AlertProps = {
     instantShow?: boolean;
 } & SSRSupportProps & EitherObj<{
     /**
-     * Seconds until the Alert auto-closes.
+     * Number of **seconds** until the Alert auto-closes.
      * Mosueover and keyboard focus resets the timer.  \
      * NOTE: An `onClosed` handler is required when using this option.
      */

package/esm/Alert.js

@@ -6,25 +6,42 @@ import { isPreact } from './utils/env.js';
 import { useIsBrowserSide, } from './utils.js';
 // FIXME: Eventually import from @reykjavik/hanna-css
 const AlertCloseTransitionDuration = 400;
+/** How much to extend the remaining time when the auto-closing is interrupted (frozen) by mouseover or keyboard focus */
+const FREEZE_EXTENSION_MS = 750;
 const useAutoClosing = (autoClose, props) => {
-    const [temp, setTemp] = useState(0);
+    const startTime = useRef(Date.now());
+    const remainingMs = useRef(autoClose);
+    const [frost, setFrost] = useState(0);
     if (!autoClose) {
-        return { autoClosing: false };
+        return { autoCloseIn: undefined };
     }
     const thaw = (e) => {
-        setTemp((temp) => temp + 1);
+        // When it's about to thaw, make set a new start time to base future
+        // "remaining time" calculations on.
+        if (frost === 1) {
+            startTime.current = Date.now();
+        }
+        setFrost((frost) => frost - 1);
         const handler = props[e.type.startsWith('blur') ? 'onBlur' : 'onMouseLeave'];
-        // @ts-expect-error  (Proper fix ends up as too much code for this extreme edge case)
         handler && handler(e);
     };
     const freeze = (e) => {
-        setTemp((temp) => temp - 1);
+        // When there's no frost and it's about to freeze, make note
+        // of the remaining time. Furhter freezes should not update this.
+        if (!frost) {
+            console.log(remainingMs.current);
+            // Calculate the currently remaining time based on the last start time.
+            const newRemainingMs = remainingMs.current - (Date.now() - startTime.current);
+            // Extend the remainint time a bit to give usees some leeway,
+            // but never extend it beyond the original autoClose value.
+            remainingMs.current = Math.min(newRemainingMs + FREEZE_EXTENSION_MS, autoClose);
+        }
+        setFrost((frost) => frost + 1);
         const handler = props[e.type.startsWith('focus') ? 'onFocus' : 'onMouseEnter'];
-        // @ts-expect-error  (Resolving ends up as too much code for this extreme edge case)
         handler && handler(e);
     };
     return {
-        autoClosing: temp === 0,
+        autoCloseIn: frost === 0 ? remainingMs.current : undefined,
         autoClosingProps: Object.assign({ onMouseEnter: freeze, onMouseLeave: thaw, onFocus: freeze, onBlur: thaw }, (isPreact && {
             onfocusin: (e) => e.currentTarget !== e.target && freeze(e),
             onfocusout: (e) => e.currentTarget !== e.target && thaw(e),
@@ -47,7 +64,7 @@ export const alertTypes = {
 export const Alert = (props) => {
     var _a;
     const { type, childrenHTML, children, onClose, closeUrl, ssr, onClosed, instantShow, wrapperProps, } = props;
-    const autoClose = Math.max(props.autoClose || 0, 0);
+    const autoClose = Math.max(props.autoClose || 0, 0) * 1000;
     const closable = (_a = props.closable) !== null && _a !== void 0 ? _a : !!(onClose || (onClosed && !autoClose) || closeUrl != null);
     const closing = useRef();
     const isBrowser = useIsBrowserSide(ssr);
@@ -72,13 +89,13 @@ export const Alert = (props) => {
             }, AlertCloseTransitionDuration);
         }
     }, [onClose, onClosed]);
-    const { autoClosing, autoClosingProps } = useAutoClosing(autoClose, props);
+    const { autoCloseIn, autoClosingProps } = useAutoClosing(autoClose, props);
     useEffect(() => {
-        if (autoClosing) {
+        if (autoCloseIn) {
             let autoCloseTimeout;
             autoCloseTimeout = setTimeout(() => {
                 closeAlert();
-            }, autoClose * 1000);
+            }, autoCloseIn);
             return () => {
                 if (autoCloseTimeout) {
                     clearTimeout(autoCloseTimeout);
@@ -90,7 +107,7 @@ export const Alert = (props) => {
                 }
             };
         }
-    }, [closeAlert, autoClosing, autoClose]);
+    }, [closeAlert, autoCloseIn]);
     return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('Alert', [!!alertTypes[type] && type, closable && 'closable'], (wrapperProps || {}).className), role: "alert", hidden: !open || undefined }, autoClosingProps),
         childrenHTML ? (React.createElement("div", { dangerouslySetInnerHTML: { __html: childrenHTML } })) : (children),
         ' ',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.169",
+	"version": "0.10.170",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",