@reykjavik/hanna-react 0.10.165 → 0.10.166

package/CHANGELOG.md

@@ -4,6 +4,15 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.166
+
+_2026-02-16_
+
+- `Modal`:
+  - feat: Allow `children` to be render function receiving `closeModal`
+    dispacther and `visible` state
+  - feat: Deprecate `render` prop in favor of `children` as render function
+
 ## 0.10.165
 
 _2026-01-23_

package/_abstract/_AbstractModal.d.ts

@@ -85,12 +85,26 @@ export type AbstractModalProps = {
      */
     portal?: boolean;
 } & EitherObj<{
-    /** Render function that receives a `closeModal` action dispatcher. */
+    /**
+     * @deprecated  Use children instead  (Will be removed in v0.11)
+     *
+     * Render function that receives a `closeModal` action dispatcher.
+     */
     render: (props: {
         closeModal(): void;
     }) => ReactNode;
 }, {
-    children: ReactNode;
+    /** Either a `ReactNode` or render function */
+    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>;
 export declare const AbstractModal: (props: AbstractModalProps_private) => JSX.Element;

package/_abstract/_AbstractModal.js

@@ -48,7 +48,8 @@ exports.defaultAbstractModalTexts = {
 // eslint-disable-next-line complexity
 const AbstractModal = (props) => {
     var _a;
-    const { bem, modifier, closeDelay = 500, wrapperProps = {}, ssr } = props;
+    const { bem, modifier, closeDelay = 500, wrapperProps = {}, ssr, render, // eslint-disable-line deprecation/deprecation
+    children, } = props;
     // eslint-disable-next-line deprecation/deprecation
     const isFickle = !((_a = props.stable) !== null && _a !== void 0 ? _a : props.fickle === false) || undefined;
     const txt = (0, i18n_1.getTexts)(props, exports.defaultAbstractModalTexts);
@@ -128,7 +129,11 @@ const AbstractModal = (props) => {
             : closeOnCurtainClick || onClick, id: domid }),
         isBrowser && react_1.default.createElement(FocusTrap_js_1.FocusTrap, { atTop: true }),
         react_1.default.createElement("div", { className: (0, hanna_utils_1.modifiedClass)(bem, modifier), ref: modalElmRef },
-            props.render ? props.render({ closeModal }) : props.children,
+            render
+                ? render({ closeModal })
+                : typeof children === 'function'
+                    ? children({ closeModal, visible })
+                    : 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/_abstract/_AbstractModal.d.ts

@@ -85,12 +85,26 @@ export type AbstractModalProps = {
      */
     portal?: boolean;
 } & EitherObj<{
-    /** Render function that receives a `closeModal` action dispatcher. */
+    /**
+     * @deprecated  Use children instead  (Will be removed in v0.11)
+     *
+     * Render function that receives a `closeModal` action dispatcher.
+     */
     render: (props: {
         closeModal(): void;
     }) => ReactNode;
 }, {
-    children: ReactNode;
+    /** Either a `ReactNode` or render function */
+    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>;
 export declare const AbstractModal: (props: AbstractModalProps_private) => JSX.Element;

package/esm/_abstract/_AbstractModal.js

@@ -44,7 +44,8 @@ export const defaultAbstractModalTexts = {
 // eslint-disable-next-line complexity
 export const AbstractModal = (props) => {
     var _a;
-    const { bem, modifier, closeDelay = 500, wrapperProps = {}, ssr } = props;
+    const { bem, modifier, closeDelay = 500, wrapperProps = {}, ssr, render, // eslint-disable-line deprecation/deprecation
+    children, } = props;
     // eslint-disable-next-line deprecation/deprecation
     const isFickle = !((_a = props.stable) !== null && _a !== void 0 ? _a : props.fickle === false) || undefined;
     const txt = getTexts(props, defaultAbstractModalTexts);
@@ -124,7 +125,11 @@ export const AbstractModal = (props) => {
             : closeOnCurtainClick || onClick, id: domid }),
         isBrowser && React.createElement(FocusTrap, { atTop: true }),
         React.createElement("div", { className: modifiedClass(bem, modifier), ref: modalElmRef },
-            props.render ? props.render({ closeModal }) : props.children,
+            render
+                ? render({ closeModal })
+                : typeof children === 'function'
+                    ? children({ closeModal, visible })
+                    : 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.165",
+	"version": "0.10.166",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",