@reykjavik/hanna-react 0.10.127 → 0.10.129

package/CHANGELOG.md

@@ -4,6 +4,22 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.129
+
+_2024-07-16_
+
+- feat: Add prop `childrenHTML` to `Carousel` for Real Nasty Dirty Work™ —
+  primary use case is progressive enhancement of static HTML.
+- feat: Gracefully catch (and log) errors in Sprinkles' lifecycle methods
+
+## 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/_AbstractCarousel.d.ts

@@ -20,6 +20,12 @@ export type CarouselProps<I extends Record<string, unknown> = Record<string, nev
      * `<Fragment />` or some such.
      */
     itemCount?: number;
+}, {
+    /**
+     * HTML content that should be dangerously inserted directly into the
+     * `__itemlist` element
+     */
+    childrenHTML: string;
 }> & WrapperElmProps & DeprecatedSeenProp;
 type AbstractCarouselProps<I extends Record<string, unknown> = Record<string, unknown>, P extends Record<string, unknown> | undefined = Record<string, unknown>> = CarouselProps<I, P> & BemProps & {
     title?: string;

package/_abstract/_AbstractCarousel.js

@@ -24,17 +24,35 @@ const scrollXBy = (elm, deltaX) => {
 };
 // eslint-disable-next-line complexity
 const AbstractCarousel = (props) => {
-    const { title, items = [], Component, ComponentProps, bem = 'Carousel', modifier, ssr, className, wrapperProps, } = props;
+    const { title, items = [], Component, ComponentProps, childrenHTML, bem = 'Carousel', modifier, ssr, className, wrapperProps, } = props;
+    const isBrowser = (0, utils_js_1.useIsBrowserSide)(ssr);
     const children = !props.children
         ? undefined
         : Array.isArray(props.children)
             ? props.children.filter(hanna_utils_1.notNully)
             : [props.children];
     const [leftOffset, setLeftOffset] = (0, react_1.useState)();
-    const itemCount = props.itemCount != null ? props.itemCount : (children || items).length;
+    const htmlChildrenCount = (0, react_1.useMemo)(() => {
+        if (!(childrenHTML === null || childrenHTML === void 0 ? void 0 : childrenHTML.trim())) {
+            return;
+        }
+        if (!isBrowser) {
+            return 1; // Return arbitrary non-zero count to avoid early return below.
+            // During SSR (and initial hydration render) we want to render the
+            // Carousel component, even though we don't know the exact number of
+            // items yet.
+        }
+        const div = document.createElement('div');
+        div.innerHTML = childrenHTML;
+        return div.children.length;
+    }, [childrenHTML, isBrowser]);
+    const itemCount = props.itemCount != null
+        ? props.itemCount
+        : childrenHTML
+            ? htmlChildrenCount
+            : (children || items).length;
     const listRef = (0, react_1.useRef)(null);
     const [activeItem, setActiveItem] = (0, react_1.useState)(0);
-    const isBrowser = (0, utils_js_1.useIsBrowserSide)(ssr);
     // Since listElm gets unmounted and remounted based on isBrowser, we
     // wait for isBrowser is true before setting scroll and resize events.
     const listElm = isBrowser && listRef.current;
@@ -91,10 +109,12 @@ const AbstractCarousel = (props) => {
     }
     const itemList = (react_1.default.createElement("div", { className: `${bem}__itemlist`, style: leftOffset
             ? { '--Carousel--leftOffset': `${leftOffset}px` }
-            : undefined, "data-scroll-snapping": leftOffset ? 'true' : undefined, ref: listRef }, children ||
-        items.map((item, i) => (
-        // @ts-expect-error  (Can't be arsed...)
-        react_1.default.createElement(Component, Object.assign({ key: i }, ComponentProps, item))))));
+            : undefined, "data-scroll-snapping": leftOffset ? 'true' : undefined, ref: listRef, dangerouslySetInnerHTML: childrenHTML ? { __html: childrenHTML } : undefined }, childrenHTML
+        ? undefined
+        : children ||
+            items.map((item, i) => (
+            // @ts-expect-error  (Can't be arsed...)
+            react_1.default.createElement(Component, Object.assign({ key: i }, ComponentProps, item))))));
     return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)(bem, modifier, 
         // Prefer `className` over `wrapperProps.className`
         className || (wrapperProps || {}).className), "data-sprinkled": isBrowser }),

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

@@ -20,6 +20,12 @@ export type CarouselProps<I extends Record<string, unknown> = Record<string, nev
      * `<Fragment />` or some such.
      */
     itemCount?: number;
+}, {
+    /**
+     * HTML content that should be dangerously inserted directly into the
+     * `__itemlist` element
+     */
+    childrenHTML: string;
 }> & WrapperElmProps & DeprecatedSeenProp;
 type AbstractCarouselProps<I extends Record<string, unknown> = Record<string, unknown>, P extends Record<string, unknown> | undefined = Record<string, unknown>> = CarouselProps<I, P> & BemProps & {
     title?: string;

package/esm/_abstract/_AbstractCarousel.js

@@ -20,17 +20,35 @@ const scrollXBy = (elm, deltaX) => {
 };
 // eslint-disable-next-line complexity
 export const AbstractCarousel = (props) => {
-    const { title, items = [], Component, ComponentProps, bem = 'Carousel', modifier, ssr, className, wrapperProps, } = props;
+    const { title, items = [], Component, ComponentProps, childrenHTML, bem = 'Carousel', modifier, ssr, className, wrapperProps, } = props;
+    const isBrowser = useIsBrowserSide(ssr);
     const children = !props.children
         ? undefined
         : Array.isArray(props.children)
             ? props.children.filter(notNully)
             : [props.children];
     const [leftOffset, setLeftOffset] = useState();
-    const itemCount = props.itemCount != null ? props.itemCount : (children || items).length;
+    const htmlChildrenCount = useMemo(() => {
+        if (!(childrenHTML === null || childrenHTML === void 0 ? void 0 : childrenHTML.trim())) {
+            return;
+        }
+        if (!isBrowser) {
+            return 1; // Return arbitrary non-zero count to avoid early return below.
+            // During SSR (and initial hydration render) we want to render the
+            // Carousel component, even though we don't know the exact number of
+            // items yet.
+        }
+        const div = document.createElement('div');
+        div.innerHTML = childrenHTML;
+        return div.children.length;
+    }, [childrenHTML, isBrowser]);
+    const itemCount = props.itemCount != null
+        ? props.itemCount
+        : childrenHTML
+            ? htmlChildrenCount
+            : (children || items).length;
     const listRef = useRef(null);
     const [activeItem, setActiveItem] = useState(0);
-    const isBrowser = useIsBrowserSide(ssr);
     // Since listElm gets unmounted and remounted based on isBrowser, we
     // wait for isBrowser is true before setting scroll and resize events.
     const listElm = isBrowser && listRef.current;
@@ -87,10 +105,12 @@ export const AbstractCarousel = (props) => {
     }
     const itemList = (React.createElement("div", { className: `${bem}__itemlist`, style: leftOffset
             ? { '--Carousel--leftOffset': `${leftOffset}px` }
-            : undefined, "data-scroll-snapping": leftOffset ? 'true' : undefined, ref: listRef }, children ||
-        items.map((item, i) => (
-        // @ts-expect-error  (Can't be arsed...)
-        React.createElement(Component, Object.assign({ key: i }, ComponentProps, item))))));
+            : undefined, "data-scroll-snapping": leftOffset ? 'true' : undefined, ref: listRef, dangerouslySetInnerHTML: childrenHTML ? { __html: childrenHTML } : undefined }, childrenHTML
+        ? undefined
+        : children ||
+            items.map((item, i) => (
+            // @ts-expect-error  (Can't be arsed...)
+            React.createElement(Component, Object.assign({ key: i }, ComponentProps, item))))));
     return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass(bem, modifier, 
         // Prefer `className` over `wrapperProps.className`
         className || (wrapperProps || {}).className), "data-sprinkled": isBrowser }),

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