@reykjavik/hanna-react 0.10.167 → 0.10.169

package/CHANGELOG.md

@@ -4,6 +4,25 @@
 
 - ... <!-- Add new lines here. -->
 
+## 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_
+
+- `Modal`:
+  - fix: `children` render function not invoked correctly
+  - fix: Drop redundant `visible` flag for the `children` render function —
+    (It was always `true`)
+
 ## 0.10.167
 
 _2026-02-17_

package/Modal.js

@@ -6,16 +6,19 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const _AbstractModal_js_1 = require("./_abstract/_AbstractModal.js");
 exports.defaultModalTexts = _AbstractModal_js_1.defaultAbstractModalTexts;
 const Modal = (props) => {
-    const { bling, render, children } = props;
-    return (react_1.default.createElement(_AbstractModal_js_1.AbstractModal, Object.assign({}, props, { bem: "Modal", render: (renderProps) => {
-            const _children = render ? render(renderProps) : children;
-            return bling ? (react_1.default.createElement(react_1.default.Fragment, null,
-                _children,
-                react_1.default.createElement("div", { className: "Modal__blings" },
-                    react_1.default.createElement("div", { className: "Modal__blings__inner" }, bling)))) : (_children);
-        }, 
-        // Required since props might contain children
-        children: undefined })));
+    const { bling, render, // eslint-disable-line deprecation/deprecation
+    children, } = props;
+    return (react_1.default.createElement(_AbstractModal_js_1.AbstractModal, Object.assign({}, props, { bem: "Modal", render: undefined }), (renderProps) => {
+        const _children = render
+            ? render(renderProps)
+            : typeof children === 'function'
+                ? children(renderProps)
+                : children;
+        return bling ? (react_1.default.createElement(react_1.default.Fragment, null,
+            _children,
+            react_1.default.createElement("div", { className: "Modal__blings" },
+                react_1.default.createElement("div", { className: "Modal__blings__inner" }, bling)))) : (_children);
+    }));
 };
 exports.Modal = Modal;
 exports.default = exports.Modal;

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.d.ts

@@ -98,12 +98,6 @@ export type AbstractModalProps = {
     children: ReactNode | ((props: {
         /** Action dispacher that initiates modal closing action */
         closeModal(): void;
-        /**
-         * Whether the modal is visible or not. The `onOpen` and `onClosed`
-         * callbacks are triggered once the modal has become fully visible or
-         * fully hidden.
-         */
-        visible: boolean;
     }) => ReactNode);
 }> & WrapperElmProps<'div', 'hidden' | 'role'> & SSRSupportProps;
 type AbstractModalProps_private = AbstractModalProps & BemProps<true>;

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;
@@ -132,7 +128,7 @@ const AbstractModal = (props) => {
             render
                 ? render({ closeModal })
                 : typeof children === 'function'
-                    ? children({ closeModal, visible })
+                    ? children({ closeModal })
                     : children,
             isBrowser && !props.noCloseButton && (react_1.default.createElement("button", { className: `${bem}__closebutton`, type: "button", onClick: closeModal, "aria-label": closeButtonLabel, "aria-controls": domid, title: closeButtonLabel }, txt.closeButton))),
         isBrowser && react_1.default.createElement(FocusTrap_js_1.FocusTrap, null)))));

package/esm/Modal.js

@@ -2,15 +2,18 @@ import React from 'react';
 import { AbstractModal, defaultAbstractModalTexts, } from './_abstract/_AbstractModal.js';
 export const defaultModalTexts = defaultAbstractModalTexts;
 export const Modal = (props) => {
-    const { bling, render, children } = props;
-    return (React.createElement(AbstractModal, Object.assign({}, props, { bem: "Modal", render: (renderProps) => {
-            const _children = render ? render(renderProps) : children;
-            return bling ? (React.createElement(React.Fragment, null,
-                _children,
-                React.createElement("div", { className: "Modal__blings" },
-                    React.createElement("div", { className: "Modal__blings__inner" }, bling)))) : (_children);
-        }, 
-        // Required since props might contain children
-        children: undefined })));
+    const { bling, render, // eslint-disable-line deprecation/deprecation
+    children, } = props;
+    return (React.createElement(AbstractModal, Object.assign({}, props, { bem: "Modal", render: undefined }), (renderProps) => {
+        const _children = render
+            ? render(renderProps)
+            : typeof children === 'function'
+                ? children(renderProps)
+                : children;
+        return bling ? (React.createElement(React.Fragment, null,
+            _children,
+            React.createElement("div", { className: "Modal__blings" },
+                React.createElement("div", { className: "Modal__blings__inner" }, bling)))) : (_children);
+    }));
 };
 export default Modal;

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.d.ts

@@ -98,12 +98,6 @@ export type AbstractModalProps = {
     children: ReactNode | ((props: {
         /** Action dispacher that initiates modal closing action */
         closeModal(): void;
-        /**
-         * Whether the modal is visible or not. The `onOpen` and `onClosed`
-         * callbacks are triggered once the modal has become fully visible or
-         * fully hidden.
-         */
-        visible: boolean;
     }) => ReactNode);
 }> & WrapperElmProps<'div', 'hidden' | 'role'> & SSRSupportProps;
 type AbstractModalProps_private = AbstractModalProps & BemProps<true>;

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;
@@ -128,7 +124,7 @@ export const AbstractModal = (props) => {
             render
                 ? render({ closeModal })
                 : typeof children === 'function'
-                    ? children({ closeModal, visible })
+                    ? children({ closeModal })
                     : children,
             isBrowser && !props.noCloseButton && (React.createElement("button", { className: `${bem}__closebutton`, type: "button", onClick: closeModal, "aria-label": closeButtonLabel, "aria-controls": domid, title: closeButtonLabel }, txt.closeButton))),
         isBrowser && React.createElement(FocusTrap, null)))));

package/package.json

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