@reykjavik/hanna-react 0.10.168 → 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,23 @@
 
 - ... <!-- 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_
+
+- `Modal`:
+  - fix: Togling `open` prop works unreliably in modern React versions
+- `Multiselect`:
+  - fix: Stop `'Escape'` key events bubbling and causing side-effects (e.g.
+    closing a parent `Modal`)
+
 ## 0.10.168
 
 _2026-02-23_

package/Multiselect.js

@@ -152,6 +152,7 @@ const Multiselect = (props) => {
         }
         else if (e.key === 'Escape') {
             e.preventDefault();
+            e.stopPropagation();
             inputElm.blur();
             inputElm.focus();
             toggleOpen(false);

package/_abstract/_AbstractModal.js

@@ -82,17 +82,6 @@ const AbstractModal = (props) => {
             }, closeDelay);
         }
     };
-    // ---
-    // Update open state when props.open changes. Icky but simple.
-    const lastPropsOpen = (0, react_1.useRef)(openProp);
-    if (openProp !== lastPropsOpen.current && openProp !== open) {
-        lastPropsOpen.current = openProp;
-        // these update state during render, which aborts the current render
-        // and triggers an immediate rerender.
-        openProp ? openModal() : closeModal();
-    }
-    lastPropsOpen.current = openProp;
-    // ---
     const closeOnCurtainClick = isFickle &&
         ((e) => {
             if (e.target === e.currentTarget) {
@@ -118,6 +107,13 @@ const AbstractModal = (props) => {
         return () => removeFromModalStack(privateDomId);
     }, [] // eslint-disable-line react-hooks/exhaustive-deps
     );
+    (0, react_1.useEffect)(() => {
+        if (openProp === open) {
+            return;
+        }
+        openProp ? openModal() : closeModal();
+    }, [openProp] // eslint-disable-line react-hooks/exhaustive-deps
+    );
     const PortalOrFragment = props.portal !== false ? _Portal_js_1.Portal : react_1.Fragment;
     const closeButtonLabel = txt.closeButtonLabel || txt.closeButton;
     const { onClick, className } = wrapperProps;

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/esm/Multiselect.js

@@ -148,6 +148,7 @@ export const Multiselect = (props) => {
         }
         else if (e.key === 'Escape') {
             e.preventDefault();
+            e.stopPropagation();
             inputElm.blur();
             inputElm.focus();
             toggleOpen(false);

package/esm/_abstract/_AbstractModal.js

@@ -78,17 +78,6 @@ export const AbstractModal = (props) => {
             }, closeDelay);
         }
     };
-    // ---
-    // Update open state when props.open changes. Icky but simple.
-    const lastPropsOpen = useRef(openProp);
-    if (openProp !== lastPropsOpen.current && openProp !== open) {
-        lastPropsOpen.current = openProp;
-        // these update state during render, which aborts the current render
-        // and triggers an immediate rerender.
-        openProp ? openModal() : closeModal();
-    }
-    lastPropsOpen.current = openProp;
-    // ---
     const closeOnCurtainClick = isFickle &&
         ((e) => {
             if (e.target === e.currentTarget) {
@@ -114,6 +103,13 @@ export const AbstractModal = (props) => {
         return () => removeFromModalStack(privateDomId);
     }, [] // eslint-disable-line react-hooks/exhaustive-deps
     );
+    useEffect(() => {
+        if (openProp === open) {
+            return;
+        }
+        openProp ? openModal() : closeModal();
+    }, [openProp] // eslint-disable-line react-hooks/exhaustive-deps
+    );
     const PortalOrFragment = props.portal !== false ? Portal : Fragment;
     const closeButtonLabel = txt.closeButtonLabel || txt.closeButton;
     const { onClick, className } = wrapperProps;

package/package.json

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