@reykjavik/hanna-react 0.10.127 → 0.10.128

package/CHANGELOG.md

@@ -4,6 +4,14 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.128
+
+_2024-07-01_
+
+- feat: Add prop `renderItemSubContent` to all checkbox and radio group
+  compnents — to support more advanced UI patterns.
+- feat: Add prop `allow` to `IframeBlock`
+
 ## 0.10.127
 
 _2024-06-27_

package/IframeBlock.d.ts

@@ -9,6 +9,7 @@ export type IframeBlockProps = {
     framed?: boolean;
     compact?: boolean;
     align?: 'right';
+    allow?: JSX.IntrinsicElements['iframe']['allow'];
 } & EitherObj<{
     /** Fixed height, no auto-resizing of the iframe  */
     height: number;

package/IframeBlock.js

@@ -14,11 +14,11 @@ const iframe_resizer_react_1 = tslib_1.__importDefault(require("iframe-resizer-r
  * ```
  */
 const IframeBlock = (props) => {
-    const { title, src, framed, compact, align } = props;
+    const { title, src, framed, compact, align, allow } = props;
     const className = (0, classUtils_1.modifiedClass)('IframeBlock', [framed && 'framed', compact && 'compact', align === 'right' && `align--${align}`], (props.wrapperProps || {}).className);
     if (typeof props.height === 'number') {
         const { wrapperProps, scrolling, height } = props;
-        return (react_1.default.createElement("iframe", Object.assign({}, wrapperProps, { className: className, title: title, src: src, 
+        return (react_1.default.createElement("iframe", Object.assign({}, wrapperProps, { className: className, title: title, src: src, allow: allow, 
             // hidden tiger: pass negative height to disable iframe-resizer but not set height explicitly
             // (Silly hack, don't rely on this)
             height: height < 0 ? undefined : height, 

package/_abstract/_TogglerGroup.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { FormFieldInputProps } from '../FormField.js';
 import { HTMLProps } from '../utils.js';
 import { TogglerInputProps } from './_TogglerInput.js';
@@ -25,6 +26,12 @@ export type TogglerGroupProps<T = 'default', Extras = {}> = {
         /** The updated value array */
         selectedValues: Array<string>;
     }) => void;
+    /**
+     * Render function that allows inserting content below each toggler
+     * (checkbox/radio) element, depending on the item's checked status
+     * (or other external state)
+     */
+    renderItemSubContent?: (option: TogglerGroupOption<T, Extras>, checked: boolean) => ReactNode;
 } & Omit<FormFieldInputProps, 'disabled'>;
 type _TogglerGroupProps = {
     bem: string;

package/_abstract/_TogglerGroup.js

@@ -9,7 +9,7 @@ const useDomid_js_1 = require("../utils/useDomid.js");
 const TogglerGroup = (props) => {
     const { 
     // id,
-    className, bem, disabled, readOnly, Toggler, onSelected, isRadio, inputProps = {}, } = props;
+    className, bem, disabled, readOnly, Toggler, onSelected, isRadio, renderItemSubContent, inputProps = {}, } = props;
     const [values, setValues] = (0, utils_js_1.useMixedControlState)(props, 'value', []);
     const name = (0, useDomid_js_1.useDomid)(props.name);
     const options = (0, react_1.useMemo)(() => {
@@ -25,7 +25,7 @@ const TogglerGroup = (props) => {
                 ? disabled.includes(i)
                 : disabled;
         const isChecked = values.includes(option.value);
-        return (react_1.default.createElement(Toggler, Object.assign({ key: i }, inputProps, { className: `${bem}__item`, name: name, Wrapper: "li" }, option, { label: option.label || option.value, onChange: (e) => {
+        const togglerProps = Object.assign(Object.assign(Object.assign(Object.assign({}, inputProps), { name: name }), option), { label: option.label || option.value, onChange: (e) => {
                 inputProps.onChange && inputProps.onChange(e);
                 const { value } = option;
                 const checked = e.currentTarget.checked;
@@ -35,7 +35,13 @@ const TogglerGroup = (props) => {
                 }
                 setValues(selectedValues);
                 onSelected && onSelected({ value, checked, option, selectedValues });
-            }, disabled: isDisabled, readOnly: readOnly, "aria-invalid": props['aria-invalid'], checked: isChecked })));
+            }, disabled: isDisabled, readOnly: readOnly, 'aria-invalid': props['aria-invalid'], checked: isChecked });
+        if (renderItemSubContent) {
+            return (react_1.default.createElement("li", { key: i, className: `${bem}__item` },
+                react_1.default.createElement(Toggler, Object.assign({}, togglerProps)),
+                renderItemSubContent(option, isChecked)));
+        }
+        return (react_1.default.createElement(Toggler, Object.assign({ key: i, className: `${bem}__item`, Wrapper: "li" }, togglerProps)));
     })));
 };
 exports.TogglerGroup = TogglerGroup;

package/esm/IframeBlock.d.ts

@@ -9,6 +9,7 @@ export type IframeBlockProps = {
     framed?: boolean;
     compact?: boolean;
     align?: 'right';
+    allow?: JSX.IntrinsicElements['iframe']['allow'];
 } & EitherObj<{
     /** Fixed height, no auto-resizing of the iframe  */
     height: number;

package/esm/IframeBlock.js

@@ -10,11 +10,11 @@ import IframeResizer from 'iframe-resizer-react';
  * ```
  */
 export const IframeBlock = (props) => {
-    const { title, src, framed, compact, align } = props;
+    const { title, src, framed, compact, align, allow } = props;
     const className = modifiedClass('IframeBlock', [framed && 'framed', compact && 'compact', align === 'right' && `align--${align}`], (props.wrapperProps || {}).className);
     if (typeof props.height === 'number') {
         const { wrapperProps, scrolling, height } = props;
-        return (React.createElement("iframe", Object.assign({}, wrapperProps, { className: className, title: title, src: src, 
+        return (React.createElement("iframe", Object.assign({}, wrapperProps, { className: className, title: title, src: src, allow: allow, 
             // hidden tiger: pass negative height to disable iframe-resizer but not set height explicitly
             // (Silly hack, don't rely on this)
             height: height < 0 ? undefined : height, 

package/esm/_abstract/_TogglerGroup.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { FormFieldInputProps } from '../FormField.js';
 import { HTMLProps } from '../utils.js';
 import { TogglerInputProps } from './_TogglerInput.js';
@@ -25,6 +26,12 @@ export type TogglerGroupProps<T = 'default', Extras = {}> = {
         /** The updated value array */
         selectedValues: Array<string>;
     }) => void;
+    /**
+     * Render function that allows inserting content below each toggler
+     * (checkbox/radio) element, depending on the item's checked status
+     * (or other external state)
+     */
+    renderItemSubContent?: (option: TogglerGroupOption<T, Extras>, checked: boolean) => ReactNode;
 } & Omit<FormFieldInputProps, 'disabled'>;
 type _TogglerGroupProps = {
     bem: string;

package/esm/_abstract/_TogglerGroup.js

@@ -5,7 +5,7 @@ import { useDomid } from '../utils/useDomid.js';
 export const TogglerGroup = (props) => {
     const { 
     // id,
-    className, bem, disabled, readOnly, Toggler, onSelected, isRadio, inputProps = {}, } = props;
+    className, bem, disabled, readOnly, Toggler, onSelected, isRadio, renderItemSubContent, inputProps = {}, } = props;
     const [values, setValues] = useMixedControlState(props, 'value', []);
     const name = useDomid(props.name);
     const options = useMemo(() => {
@@ -21,7 +21,7 @@ export const TogglerGroup = (props) => {
                 ? disabled.includes(i)
                 : disabled;
         const isChecked = values.includes(option.value);
-        return (React.createElement(Toggler, Object.assign({ key: i }, inputProps, { className: `${bem}__item`, name: name, Wrapper: "li" }, option, { label: option.label || option.value, onChange: (e) => {
+        const togglerProps = Object.assign(Object.assign(Object.assign(Object.assign({}, inputProps), { name: name }), option), { label: option.label || option.value, onChange: (e) => {
                 inputProps.onChange && inputProps.onChange(e);
                 const { value } = option;
                 const checked = e.currentTarget.checked;
@@ -31,6 +31,12 @@ export const TogglerGroup = (props) => {
                 }
                 setValues(selectedValues);
                 onSelected && onSelected({ value, checked, option, selectedValues });
-            }, disabled: isDisabled, readOnly: readOnly, "aria-invalid": props['aria-invalid'], checked: isChecked })));
+            }, disabled: isDisabled, readOnly: readOnly, 'aria-invalid': props['aria-invalid'], checked: isChecked });
+        if (renderItemSubContent) {
+            return (React.createElement("li", { key: i, className: `${bem}__item` },
+                React.createElement(Toggler, Object.assign({}, togglerProps)),
+                renderItemSubContent(option, isChecked)));
+        }
+        return (React.createElement(Toggler, Object.assign({ key: i, className: `${bem}__item`, Wrapper: "li" }, togglerProps)));
     })));
 };

package/package.json

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