@reykjavik/hanna-react 0.10.164 → 0.10.166

package/Alert.js

@@ -47,9 +47,12 @@ exports.alertTypes = {
     error: 1,
     critical: 1,
 };
+// eslint-disable-next-line complexity
 const Alert = (props) => {
-    const { type, childrenHTML, children, onClose, closeUrl, closable = !!(onClose || closeUrl != null), ssr, onClosed, instantShow, wrapperProps, } = props;
+    var _a;
+    const { type, childrenHTML, children, onClose, closeUrl, ssr, onClosed, instantShow, wrapperProps, } = props;
     const autoClose = Math.max(props.autoClose || 0, 0);
+    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);
     const [open, setOpen] = (0, react_1.useState)(instantShow || !isBrowser);

package/CHANGELOG.md

@@ -4,6 +4,24 @@
 
 - ... <!-- 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_
+
+- `Alert`:
+  - feat: Auto-show close button if `onClosed` is set without `autoClose`
+- `Picture`:
+  - feat: Add prop `inline` to support inlined SVGs
+
 ## 0.10.164
 
 _2026-01-20_

package/Picture.d.ts

@@ -1,6 +1,6 @@
-import { ImagePropsLinked } from './_abstract/_Image.js';
+import { ImageProps } from './_abstract/_Image.js';
 import { WrapperElmProps } from './utils.js';
-export type PictureProps = ImagePropsLinked & {
+export type PictureProps = ImageProps & {
     contain?: boolean;
     className?: string;
 } & WrapperElmProps;

package/Picture.js

@@ -4,6 +4,9 @@ exports.Picture = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const _Image_js_1 = require("./_abstract/_Image.js");
-const Picture = (props) => (react_1.default.createElement(_Image_js_1.Image, Object.assign({}, props, { bem: "Picture", modifier: props.contain && 'contain' })));
+const Picture = (props) => (react_1.default.createElement(_Image_js_1.Image, Object.assign({}, props, { bem: "Picture", modifier: [
+        props.contain && 'contain',
+        props.inline && /\.svg(?:\?|$)/i.test(props.src) && 'inlined',
+    ] })));
 exports.Picture = Picture;
 exports.default = exports.Picture;

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/Alert.js

@@ -43,9 +43,12 @@ export const alertTypes = {
     error: 1,
     critical: 1,
 };
+// eslint-disable-next-line complexity
 export const Alert = (props) => {
-    const { type, childrenHTML, children, onClose, closeUrl, closable = !!(onClose || closeUrl != null), ssr, onClosed, instantShow, wrapperProps, } = props;
+    var _a;
+    const { type, childrenHTML, children, onClose, closeUrl, ssr, onClosed, instantShow, wrapperProps, } = props;
     const autoClose = Math.max(props.autoClose || 0, 0);
+    const closable = (_a = props.closable) !== null && _a !== void 0 ? _a : !!(onClose || (onClosed && !autoClose) || closeUrl != null);
     const closing = useRef();
     const isBrowser = useIsBrowserSide(ssr);
     const [open, setOpen] = useState(instantShow || !isBrowser);

package/esm/Picture.d.ts

@@ -1,6 +1,6 @@
-import { ImagePropsLinked } from './_abstract/_Image.js';
+import { ImageProps } from './_abstract/_Image.js';
 import { WrapperElmProps } from './utils.js';
-export type PictureProps = ImagePropsLinked & {
+export type PictureProps = ImageProps & {
     contain?: boolean;
     className?: string;
 } & WrapperElmProps;

package/esm/Picture.js

@@ -1,4 +1,7 @@
 import React from 'react';
 import { Image } from './_abstract/_Image.js';
-export const Picture = (props) => (React.createElement(Image, Object.assign({}, props, { bem: "Picture", modifier: props.contain && 'contain' })));
+export const Picture = (props) => (React.createElement(Image, Object.assign({}, props, { bem: "Picture", modifier: [
+        props.contain && 'contain',
+        props.inline && /\.svg(?:\?|$)/i.test(props.src) && 'inlined',
+    ] })));
 export default Picture;

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.164",
+	"version": "0.10.166",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",