@reykjavik/hanna-react 0.10.99 → 0.10.101

package/esm/TextInput.js

@@ -1,17 +1,16 @@
 import { __rest } from "tslib";
 import React, { useEffect, useRef, useState } from 'react';
 import { modifiedClass } from '@hugsmidjan/qj/classUtils';
-import FormField from './FormField.js';
+import FormField, { groupFormFieldWrapperProps, } from './FormField.js';
 export const TextInput = (props) => {
     var _a;
     const _inputRef = useRef(null);
-    const { className, label, assistText, hideLabel, disabled, readOnly, invalid, errorMessage, required, reqText, id, onChange, small, type, ssr, inputRef = _inputRef } = props, inputElementProps = __rest(props, ["className", "label", "assistText", "hideLabel", "disabled", "readOnly", "invalid", "errorMessage", "required", "reqText", "id", "onChange", "small", "type", "ssr", "inputRef"]);
+    const _b = groupFormFieldWrapperProps(props), { onChange, type, inputRef = _inputRef, fieldWrapperProps } = _b, inputElementProps = __rest(_b, ["onChange", "type", "inputRef", "fieldWrapperProps"]);
     const { value, defaultValue, placeholder } = inputElementProps;
     const [hasValue, setHasValue] = useState(undefined);
     const filled = !!((_a = value !== null && value !== void 0 ? value : hasValue) !== null && _a !== void 0 ? _a : !!defaultValue);
     const empty = !filled && !placeholder;
     const multiline = type === 'textarea';
-    const modifiers = [multiline && 'multiline'];
     const _onChange = value != null
         ? onChange
         : (e) => {
@@ -27,6 +26,6 @@ export const TextInput = (props) => {
             setHasValue(true);
         }
     }, []);
-    return (React.createElement(FormField, { className: modifiedClass('TextInput', modifiers, className), ssr: ssr, small: small, label: label, empty: empty, filled: filled, assistText: assistText, hideLabel: hideLabel, disabled: disabled, readOnly: readOnly, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, id: id, renderInput: (className, inputProps, addFocusProps) => multiline ? (React.createElement("textarea", Object.assign({ className: className.input, onChange: _onChange }, inputProps, addFocusProps(inputElementProps), { ref: inputRef }))) : (React.createElement("input", Object.assign({ className: className.input, onChange: _onChange, type: type }, inputProps, addFocusProps(inputElementProps), { ref: inputRef }))) }));
+    return (React.createElement(FormField, Object.assign({ extraClassName: modifiedClass('TextInput', [multiline && 'multiline']), empty: empty, filled: filled }, fieldWrapperProps, { renderInput: (className, inputProps, addFocusProps) => multiline ? (React.createElement("textarea", Object.assign({ className: className.input, onChange: _onChange }, inputProps, addFocusProps(inputElementProps), { ref: inputRef }))) : (React.createElement("input", Object.assign({ className: className.input, onChange: _onChange, type: type }, inputProps, addFocusProps(inputElementProps), { ref: inputRef }))) })));
 };
 export default TextInput;

package/esm/Tooltip.d.ts

@@ -1,7 +1,8 @@
+import { WrapperElmProps } from './utils.js';
 export type TooltipProps = {
     label: string;
     text: string | JSX.Element;
     iconOnly?: boolean;
-};
+} & WrapperElmProps<'details', 'open'>;
 export declare const Tooltip: (props: TooltipProps) => JSX.Element;
 export default Tooltip;

package/esm/Tooltip.js

@@ -1,13 +1,13 @@
 import React, { useRef } from 'react';
 import { arrow as arrowPlugin, autoUpdate, flip, offset, shift, useFloating, } from '@floating-ui/react';
-import { useCallbackOnEsc, useLaggedState } from '@hugsmidjan/react/hooks';
 import { modifiedClass } from '@hugsmidjan/qj/classUtils';
+import { useCallbackOnEsc, useLaggedState } from '@hugsmidjan/react/hooks';
 const getSide = (placement) => placement.split('-')[0];
 export const Tooltip = (props) => {
-    const { text, label, iconOnly } = props;
+    const { text, label, iconOnly, wrapperProps = {} } = props;
     const arrowRef = useRef(null);
     const [isOpen, setIsOpen] = useLaggedState(false, 300);
-    const { x, y, reference, floating, middlewareData, placement } = useFloating({
+    const { x, y, refs, middlewareData, placement } = useFloating({
         placement: 'top',
         middleware: [offset(10), flip(), shift(), arrowPlugin({ element: arrowRef })],
         whileElementsMounted: autoUpdate,
@@ -18,40 +18,53 @@ export const Tooltip = (props) => {
     useCallbackOnEsc(() => {
         setIsOpen(false);
     });
-    return (React.createElement("details", { className: `Tooltip Tooltip--${getSide(placement)}`, open: isOpen, onMouseEnter: () => setIsOpen(true, 100), onFocus: () => {
+    return (React.createElement("details", Object.assign({}, props.wrapperProps, { className: modifiedClass('Tooltip', getSide(placement), wrapperProps.className), open: isOpen, onMouseEnter: (e) => {
+            var _a;
+            setIsOpen(true, 100);
+            (_a = wrapperProps.onMouseEnter) === null || _a === void 0 ? void 0 : _a.call(wrapperProps, e);
+        }, onFocus: (e) => {
+            var _a;
             if (isOpen) {
                 setIsOpen(true, 0);
             }
-        }, onBlur: () => setIsOpen(false), onClick: (e) => {
+            (_a = wrapperProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(wrapperProps, e);
+        }, onBlur: (e) => {
+            var _a;
+            setIsOpen(false);
+            (_a = wrapperProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(wrapperProps, e);
+        }, onClick: (e) => {
+            var _a;
             e.preventDefault();
             setIsOpen(!isOpen, 0);
-        }, onMouseDown: () => {
+            (_a = wrapperProps.onClick) === null || _a === void 0 ? void 0 : _a.call(wrapperProps, e);
+        }, onMouseDown: (e) => {
+            var _a;
             if (isOpen) {
                 setTimeout(() => {
                     setIsOpen(true, 0);
                 }, 100);
             }
+            (_a = wrapperProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(wrapperProps, e);
         }, onMouseLeave: (e) => {
+            var _a;
             if (e.currentTarget.$contextClicked_firefox_fix) {
                 return;
             }
             setIsOpen(false);
+            (_a = wrapperProps.onMouseLeave) === null || _a === void 0 ? void 0 : _a.call(wrapperProps, e);
         }, onContextMenu: (e) => {
+            var _a;
             const elm = e.currentTarget;
             clearTimeout(elm.$contextClicked_firefox_fix);
             elm.$contextClicked_firefox_fix = setTimeout(() => {
                 delete elm.$contextClicked_firefox_fix;
             }, 300);
+            (_a = wrapperProps.onContextMenu) === null || _a === void 0 ? void 0 : _a.call(wrapperProps, e);
         }, style: x == null
-            ? undefined
-            : {
-                '--tooltip-content-pos-y': `${y}px`,
-                '--tooltip-content-pos-x': `${x}px`,
-                '--tooltip-arrow-pos-x': `${arrowX}px`,
-                '--tooltip-arrow-pos-y': `${arrowY}px`,
-            } },
-        React.createElement("summary", { className: modifiedClass('Tooltip__trigger', iconOnly && 'icononly'), ref: reference }, label),
-        React.createElement("div", { className: "Tooltip__content", onClick: (e) => e.stopPropagation(), ref: floating },
+            ? wrapperProps.style
+            : Object.assign(Object.assign({}, wrapperProps.style), { '--tooltip-content-pos-y': `${y}px`, '--tooltip-content-pos-x': `${x}px`, '--tooltip-arrow-pos-x': `${arrowX}px`, '--tooltip-arrow-pos-y': `${arrowY}px` }) }),
+        React.createElement("summary", { className: modifiedClass('Tooltip__trigger', iconOnly && 'icononly'), ref: refs.setReference }, label),
+        React.createElement("div", { className: "Tooltip__content", onClick: (e) => e.stopPropagation(), ref: refs.setFloating },
             x !== null && (React.createElement("div", { "data-floating-ui-hack-plz-ignore": "", style: { position: 'absolute', display: 'none' }, ref: arrowRef })),
             text)));
 };

package/esm/VSpacer.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { EitherObj } from '@reykjavik/hanna-utils';
+import { WrapperElmProps } from './utils.js';
 declare const sizes: {
     readonly none: "none";
     readonly small: "small";
@@ -17,6 +18,6 @@ export type VSpacerProps = EitherObj<{
     size?: VSpacerSizePos;
     top?: VSpacerSize;
     bottom?: VSpacerSize;
-}>;
+}> & WrapperElmProps;
 export declare const VSpacer: (props: VSpacerProps) => JSX.Element;
 export default VSpacer;

package/esm/VSpacer.js

@@ -11,7 +11,7 @@ const sizes = {
 const hasChildren = (children) => (children && !(Array.isArray(children) && !children.length)) || undefined;
 const normalizeProp = (value, exclude) => value && value !== exclude ? sizes[value] : undefined;
 export const VSpacer = (props) => {
-    const { size, top, bottom, children } = props;
+    const { size, top, bottom, children, wrapperProps } = props;
     const isWrapper = hasChildren(children);
     let topVal = normalizeProp(isWrapper && top);
     let bottomVal = normalizeProp(isWrapper && bottom);
@@ -31,11 +31,7 @@ export const VSpacer = (props) => {
             bottomVal = undefined;
         }
     }
-    const className = modifiedClass('VSpacer', [
-        sizeVal,
-        topVal && 'top--' + topVal,
-        bottomVal && 'bottom--' + bottomVal,
-    ]);
-    return isWrapper ? (React.createElement("div", { className: className }, children)) : (React.createElement("hr", { className: className }));
+    const className = modifiedClass('VSpacer', [sizeVal, topVal && 'top--' + topVal, bottomVal && 'bottom--' + bottomVal], (wrapperProps || {}).className);
+    return isWrapper ? (React.createElement("div", Object.assign({}, wrapperProps, { className: className }), children)) : (React.createElement("hr", Object.assign({}, wrapperProps, { className: className })));
 };
 export default VSpacer;

package/esm/VerticalTabsTOC.d.ts

@@ -9,6 +9,6 @@ export type VerticalTabsTOCSubItem = TabItemProps & {
 export type VerticalTabsTOCProps = {
     items: Array<VerticalTabsTOCItem>;
     onItemSelect: (itemId: string) => void;
-} & Pick<TabsProps, 'aria-label' | 'ssr' | 'activateOnFocus' | 'id' | 'startSeen'>;
+} & Pick<TabsProps, 'aria-label' | 'ssr' | 'activateOnFocus' | 'id' | 'startSeen' | 'wrapperProps'>;
 export declare const VerticalTabsTOC: (props: VerticalTabsTOCProps) => JSX.Element;
 export default VerticalTabsTOC;

package/esm/VerticalTabsTOC.js

@@ -58,7 +58,7 @@ export const VerticalTabsTOC = (props) => {
         window.addEventListener('hashchange', handleHash);
         return () => window.removeEventListener('hashchange', handleHash);
     }, [itemsById, onItemSelect]);
-    return (React.createElement(Tabs, { id: domid, vertical: true, "aria-label": props['aria-label'], onSetActive: (_, item) => {
+    return (React.createElement(Tabs, { wrapperProps: props.wrapperProps, id: domid, vertical: true, "aria-label": props['aria-label'], onSetActive: (_, item) => {
             var _a;
             const itemId = getItemId(item);
             const newId = itemId || getItemId((_a = itemsById[itemId].subTabs) === null || _a === void 0 ? void 0 : _a.tabs[0]);

package/esm/WizardLayout.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import type { HannaColorTheme } from '@reykjavik/hanna-css';
-import { SSRSupportProps } from './utils.js';
+import { SSRSupportProps, WrapperElmProps } from './utils.js';
 type WizardLayoutProps = {
     wizardStepper?: ReactNode | false;
     wizardFooter?: ReactNode | false;
@@ -9,6 +9,6 @@ type WizardLayoutProps = {
     logoLink?: string;
     globalAlerts?: ReactNode;
     children?: ReactNode;
-} & SSRSupportProps;
+} & SSRSupportProps & WrapperElmProps;
 export declare const WizardLayout: (props: WizardLayoutProps) => JSX.Element;
 export default WizardLayout;

package/esm/WizardLayout.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { getAssetUrl } from '@reykjavik/hanna-utils/assets';
 import { Image } from './_abstract/_Image.js';
 import { Link } from './_abstract/_Link.js';
@@ -8,15 +9,15 @@ export const WizardLayout = (props) => {
     useScrollbarWidthCSSVar();
     const { 
     // ssr,
-    wizardStepper, wizardFooter, children, colorTheme, logoLink = '/', siteName = '', globalAlerts, } = props;
+    wizardStepper, wizardFooter, children, colorTheme, logoLink = '/', siteName = '', globalAlerts, wrapperProps, } = props;
     const isBrowser = useIsBrowserSide( /* ssr */);
-    return (React.createElement("div", { className: "WizardLayout", "data-sprinkled": isBrowser, "data-color-theme": colorTheme },
+    return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('WizardLayout', null, (wrapperProps || {}).className), "data-sprinkled": isBrowser, "data-color-theme": colorTheme }),
         globalAlerts && (React.createElement("div", { className: "WizardLayout__alerts", role: "alert" }, globalAlerts)),
         React.createElement("div", { className: "WizardLayout__content" },
             React.createElement("div", { className: "WizardLayout__header", role: "banner" },
                 React.createElement(Link, { className: "WizardLayout__header__logo", href: logoLink },
                     ' ',
-                    React.createElement(Image, { className: undefined, inline: true, src: getAssetUrl('reykjavik-logo.svg'), altText: "Reykjav\u00EDk" }),
+                    React.createElement(Image, { bem: undefined, inline: true, src: getAssetUrl('reykjavik-logo.svg'), altText: "Reykjav\u00EDk" }),
                     ' ',
                     siteName,
                     ' '),

package/esm/WizardLayoutClose.js

@@ -1,4 +1,6 @@
 import React from 'react';
 import { Button } from './_abstract/_Button.js';
+// NOTE: As a `_abstract/_Button.tsx`-derived component, all `<button/>` and
+// `<a/>` props are allowed directly, so adding `wrapperProps` makes no sense.
 export const WizardLayoutClose = (props) => (React.createElement(Button, Object.assign({ bem: "WizardLayoutClose" }, props)));
 export default WizardLayoutClose;

package/esm/WizardStepper.d.ts

@@ -1,3 +1,4 @@
+import { WrapperElmProps } from './utils.js';
 export type WizardStepperStep = {
     label: string;
     /**
@@ -31,6 +32,6 @@ export type WizardStepperProps = {
     /** By default, clickable steps after the active step are not immediately clickable */
     allowForwardSkip?: boolean;
     onClick: (clickedIndex: number) => void;
-};
+} & WrapperElmProps;
 export declare const WizardStepper: (props: WizardStepperProps) => JSX.Element;
 export default WizardStepper;

package/esm/WizardStepper.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 export const WizardStepper = (props) => {
-    const { steps, activeStep = -1, allowForwardSkip, disableBacktrack, onClick } = props;
-    return (React.createElement("div", { className: modifiedClass('WizardStepper', activeStep === -1 && 'preview') }, steps.map((step, i) => {
+    const { steps, activeStep = -1, allowForwardSkip, disableBacktrack, onClick, wrapperProps, } = props;
+    return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('WizardStepper', activeStep === -1 && 'preview', (wrapperProps || {}).className) }), steps.map((step, i) => {
         const { clickable, done, neutral } = step;
         const label = step.label || '…';
         const stepClass = modifiedClass('WizardStepper__step', [

package/esm/_abstract/_AbstractCarousel.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement, ReactNode } from 'react';
 import { EitherObj } from '@reykjavik/hanna-utils';
-import { SSRSupportProps } from '../utils.js';
+import { SSRSupportProps, WrapperElmProps } from '../utils.js';
 import { SeenProp } from '../utils/seenEffect.js';
 import { BemProps } from '../utils/types.js';
 export type CarouselProps<I extends Record<string, unknown> = {}, P extends Record<string, unknown> | undefined = {}> = {
@@ -20,7 +20,7 @@ export type CarouselProps<I extends Record<string, unknown> = {}, P extends Reco
      * `<Fragment />` or some such.
      */
     itemCount?: number;
-}> & SeenProp;
+}> & WrapperElmProps & SeenProp;
 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

@@ -19,15 +19,16 @@ const scrollXBy = (elm, deltaX) => {
     // NOTE 2: Both Chrome and Safari tend to snap hard to the nearest list item
     // while Firefox is more smooth. Haven't found a way around that.
 };
+// eslint-disable-next-line complexity
 export const AbstractCarousel = (props) => {
-    const { title, items = [], Component, ComponentProps, bem = 'Carousel', modifier, ssr, startSeen, } = props;
+    const { title, items = [], Component, ComponentProps, bem = 'Carousel', modifier, ssr, startSeen, className, wrapperProps, } = props;
     const children = !props.children
         ? undefined
         : Array.isArray(props.children)
             ? props.children.filter(notNully)
             : [props.children];
     const [leftOffset, setLeftOffset] = useState();
-    const itemCount = props.itemCount || (children || items).length;
+    const itemCount = props.itemCount != null ? props.itemCount : (children || items).length;
     const listRef = useRef(null);
     const [activeItem, setActiveItem] = useState(0);
     const isBrowser = useIsBrowserSide(ssr);
@@ -92,7 +93,9 @@ export const AbstractCarousel = (props) => {
         items.map((item, i) => (
         // @ts-expect-error  (Can't be arsed...)
         React.createElement(Component, Object.assign({ key: i }, ComponentProps, item))))));
-    return (React.createElement("div", { className: modifiedClass(bem, modifier, props.className), ref: outerRef, "data-sprinkled": isBrowser },
+    return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass(bem, modifier, 
+        // Prefer `className` over `wrapperProps.className`
+        className || (wrapperProps || {}).className), ref: outerRef, "data-sprinkled": isBrowser }),
         title && React.createElement("h2", { className: bem + '__title' }, title),
         isBrowser ? (React.createElement("div", { className: bem + '__itemlist-wrapper' },
             itemList,

package/esm/_abstract/_Block.d.ts

@@ -1,3 +1,4 @@
+import { WrapperElmProps } from '../utils.js';
 import { SeenProp } from '../utils/seenEffect.js';
 import { BemModifierProps } from '../utils/types.js';
 import { ButtonProps } from './_Button.js';
@@ -15,7 +16,7 @@ export type ContentBlock = {
     content: Array<BlockItem>;
     image?: undefined;
 } & SeenProp;
-export type BlockProps = BemModifierProps & (ContentBlock | ContentImageBlock);
+export type BlockProps = (ContentBlock | ContentImageBlock) & BemModifierProps & WrapperElmProps;
 export declare const Block: (props: BlockProps & {
     bem: string;
 }) => JSX.Element;

package/esm/_abstract/_Block.js

@@ -4,10 +4,10 @@ import { useSeenEffect } from '../utils/seenEffect.js';
 import { Button } from './_Button.js';
 import { Image } from './_Image.js';
 export const Block = (props) => {
-    const { image, modifier, bem, content, startSeen } = props;
+    const { image, modifier, bem, content, startSeen, wrapperProps } = props;
     const [ref] = useSeenEffect(startSeen);
     const contentItems = Array.isArray(content) ? content : [content];
-    return (React.createElement("div", { className: modifiedClass(bem, modifier), ref: ref },
+    return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass(bem, modifier, (wrapperProps || {}).className), ref: ref }),
         contentItems.map(({ title, summary, buttons = [] }, i) => {
             const hasSummary = summary && (typeof summary !== 'string' || !!summary.trim());
             return (React.createElement("div", { key: i, className: `${bem}__content` },
@@ -19,5 +19,5 @@ export const Block = (props) => {
                         React.createElement(Button, Object.assign({ bem: `${bem}__button`, key: i }, buttonProps)),
                         ' ')))))));
         }),
-        image && React.createElement(Image, Object.assign({ className: `${bem}__image` }, image))));
+        image && React.createElement(Image, Object.assign({ bem: `${bem}__image` }, image))));
 };

package/esm/_abstract/_Button.js

@@ -22,8 +22,11 @@ const icons = {
     // TODO: insert icons
     edit: 'edit',
 };
+// NOTE: As this component already accepts all `<button/>` and `<a/>` props
+// directly, it makes little sense to add support for `wrapperProps` on top.
 export const Button = (props) => {
-    const { bem, small, size = 'normal', modifier, children, variant = 'normal', icon = 'none', label = children } = props, buttonProps = __rest(props, ["bem", "small", "size", "modifier", "children", "variant", "icon", "label"]);
+    const { bem, small, // eslint-disable-line deprecation/deprecation
+    size = small ? 'small' : 'normal', modifier, children, variant = 'normal', icon = 'none', label = children } = props, buttonProps = __rest(props, ["bem", "small", "size", "modifier", "children", "variant", "icon", "label"]);
     const className = bem &&
         modifiedClass(bem, [modifier, variants[variant], sizes[size], navigationFlags[icon]]);
     const iconProp = icons[icon] && { 'data-icon': icons[icon] };

package/esm/_abstract/_CardList.d.ts

@@ -1,5 +1,7 @@
 import React, { ReactElement, ReactNode } from 'react';
 import { EitherObj } from '@reykjavik/hanna-utils';
+import { WrapperElmProps } from '../utils.js';
+import { BemModifierProps } from '../utils/types.js';
 import { ImageProps } from './_Image.js';
 export type TextCardProps = {
     title: string;
@@ -28,6 +30,6 @@ type _CardListProps = EitherObj<ImageCardListProps, TextCardListProps> & CardLis
     bemPrefix: string;
     children?: ReactNode;
     standalone?: boolean;
-};
+} & WrapperElmProps<'ul'> & BemModifierProps;
 export declare const CardList: (props: _CardListProps) => JSX.Element;
 export {};

package/esm/_abstract/_CardList.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { Button } from './_Button.js';
 import { Image } from './_Image.js';
 const Card = (props) => {
@@ -7,7 +8,7 @@ const Card = (props) => {
     return (React.createElement(React.Fragment, null,
         React.createElement(Button, { bem: cardClass, href: href, target: target },
             ' ',
-            !!(image || imgPlaceholder) && (React.createElement(Image, Object.assign({ className: `${bem}__image` }, image, { placeholder: imgPlaceholder }))),
+            !!(image || imgPlaceholder) && (React.createElement(Image, Object.assign({ bem: `${bem}__image` }, image, { placeholder: imgPlaceholder }))),
             React.createElement("span", { className: `${cardClass}__title` }, title),
             ' ',
             meta && React.createElement("span", { className: `${cardClass}__meta` }, meta),
@@ -17,7 +18,7 @@ const Card = (props) => {
         ' '));
 };
 export const CardList = (props) => {
-    const { bemPrefix, title, summaryElement, cards, titleTag = 'h2', children, imgPlaceholder, } = props;
+    const { bemPrefix, modifier, title, summaryElement, cards, titleTag = 'h2', children, imgPlaceholder, wrapperProps, } = props;
     const TitleTag = titleTag;
     const fallbackImageUrl = (imgPlaceholder !== true && imgPlaceholder) || undefined;
     const fallbackImageStyle = fallbackImageUrl
@@ -29,7 +30,9 @@ export const CardList = (props) => {
         summaryElement ? (React.createElement("div", { className: bemPrefix + '__summary' },
             title && React.createElement(TitleTag, { className: bemPrefix + '__title' }, title),
             summaryElement)) : (title && React.createElement(TitleTag, { className: bemPrefix + '__title' }, title)),
-        React.createElement("ul", { className: bemPrefix + (props.standalone ? '' : '__list'), style: fallbackImageStyle }, cards.map((card, i) => (React.createElement("li", { key: i, className: bemPrefix + '__item' },
+        React.createElement("ul", Object.assign({}, wrapperProps, { className: props.standalone
+                ? modifiedClass(bemPrefix, modifier, (wrapperProps || {}).className)
+                : bemPrefix + '__list', style: fallbackImageStyle }), cards.map((card, i) => (React.createElement("li", { key: i, className: bemPrefix + '__item' },
             React.createElement(Card
             /* Assert as `ImageCardProps` to silence the imgPlaceholder false-positive */
             , Object.assign({}, card, { bem: bemPrefix, imgPlaceholder: !!imgPlaceholder })))))),

package/esm/_abstract/_Image.d.ts

@@ -1,3 +1,5 @@
+import { WrapperElmProps } from '../utils.js';
+import { BemProps } from '../utils/types.js';
 export type Source = {
     srcset: string;
     media: string;
@@ -23,14 +25,15 @@ export type ImagePropsInlinedSvg = {
 };
 export type ImageProps = ImagePropsLinked | ImagePropsInlinedSvg;
 type _ImageProps = {
-    /** container className */
-    className: string | undefined;
     /** Controls if the container is rendered when image is missing/undefined.
      * (With a `--missing` className modifier added.)
      *
      * Accepts a function that defines a default content for the container.
      */
     placeholder?: boolean | (() => JSX.Element);
-};
+    /** Extra, custom className in addition to the `bem` base */
+    className?: string | undefined;
+    bem: string | undefined;
+} & BemProps & WrapperElmProps;
 export declare const Image: (props: ImageProps & _ImageProps) => JSX.Element | null;
 export {};

package/esm/_abstract/_Image.js

@@ -1,21 +1,28 @@
 import React from 'react';
-import { modifiedClass } from '@hugsmidjan/qj/classUtils';
+import { classes, modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { useGetSVGtext } from '../utils/useGetSVGtext.js';
 // eslint-disable-next-line complexity
 export const Image = (props) => {
-    const { src, altText = '', sources = [], preloadSrc, className, inline, placeholder, focalPoint, } = props;
+    const { src, altText = '', sources = [], preloadSrc, modifier, bem, inline, placeholder, focalPoint, className, wrapperProps = {}, } = props;
     const _src = (sources.length && preloadSrc) || src;
     const imageSrc = _src || (sources[0] != null ? sources[0].srcset.split(' ')[0] : undefined);
     const imgLoading = preloadSrc ? 'eager' : 'lazy';
     const inlineSvg = useGetSVGtext(inline ? imageSrc : undefined, altText);
+    const extraClasses = classes(className, wrapperProps.className) || undefined;
+    const classNames = bem
+        ? modifiedClass(bem, [modifier, !imageSrc && 'missing'], extraClasses)
+        : extraClasses;
     if (!imageSrc) {
-        return placeholder ? (React.createElement("span", { className: className && modifiedClass(className, 'missing') }, placeholder !== true && placeholder())) : null;
+        return placeholder ? (React.createElement("span", Object.assign({}, props.wrapperProps, { className: classNames }), placeholder !== true && placeholder())) : null;
     }
     if (inline && inlineSvg) {
         const __html = inlineSvg.imageSrc === imageSrc ? inlineSvg.code : '';
-        return React.createElement("span", { className: className, dangerouslySetInnerHTML: { __html } });
+        return (React.createElement("span", Object.assign({}, props.wrapperProps, { className: classNames, dangerouslySetInnerHTML: { __html } })));
     }
-    return (React.createElement("picture", { className: className, style: focalPoint ? { '--focalPoint': focalPoint } : undefined },
+    const wrapperStyles = wrapperProps.style;
+    return (React.createElement("picture", Object.assign({}, props.wrapperProps, { className: classNames, style: focalPoint
+            ? Object.assign(Object.assign({}, wrapperStyles), { '--focalPoint': focalPoint })
+            : wrapperStyles }),
         ' ',
         sources.map((source, i) => (React.createElement(React.Fragment, null,
             React.createElement("source", { key: i, srcSet: source.srcset, media: source.media }),

package/esm/_abstract/_Quote.d.ts

@@ -1,8 +1,9 @@
 import { ReactNode } from 'react';
 import { EitherObj } from '@reykjavik/hanna-utils';
+import { WrapperElmProps } from '../utils.js';
 export type QuoteProps = {
     children: ReactNode;
-} & EitherObj<object, {
+} & WrapperElmProps & EitherObj<object, {
     by: string | JSX.Element;
     byHref?: string;
 }>;

package/esm/_abstract/_Quote.js

@@ -1,8 +1,9 @@
 import React from 'react';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { Link } from './_Link.js';
 export const _Quote = (props) => {
-    const { bem, children, by, byHref } = props;
-    return (React.createElement("figure", { className: bem },
+    const { bem, children, by, byHref, wrapperProps } = props;
+    return (React.createElement("figure", Object.assign({}, wrapperProps, { className: modifiedClass(bem, null, (wrapperProps || {}).className) }),
         React.createElement("blockquote", { className: bem + '__quote' }, children),
         by && (React.createElement("figcaption", { className: bem + '__by' }, byHref ? (React.createElement(Link, { href: byHref }, by)) : typeof by === 'string' ? (React.createElement("span", null, by)) : (by)))));
 };

package/esm/_abstract/_TogglerGroup.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
-import { useDomid } from '@hugsmidjan/react/hooks';
 import { modifiedClass } from '@hugsmidjan/qj/classUtils';
+import { useDomid } from '@hugsmidjan/react/hooks';
 import { useMixedControlState } from '../utils.js';
 export const TogglerGroup = (props) => {
     const { 

package/esm/_abstract/_TogglerGroupField.js

@@ -1,17 +1,17 @@
 import { __rest } from "tslib";
 import React, { useMemo } from 'react';
 import { modifiedClass } from '@hugsmidjan/qj/classUtils';
-import FormField from '../FormField.js';
+import FormField, { groupFormFieldWrapperProps, } from '../FormField.js';
 import { TogglerGroup, } from './_TogglerGroup.js';
 export const TogglerGroupField = (props) => {
-    const { bem, Toggler, className, modifier, label, LabelTag, assistText, hideLabel, disabled, readOnly, invalid, errorMessage, required, reqText, id, value, defaultValue } = props, togglerGroupProps = __rest(props, ["bem", "Toggler", "className", "modifier", "label", "LabelTag", "assistText", "hideLabel", "disabled", "readOnly", "invalid", "errorMessage", "required", "reqText", "id", "value", "defaultValue"]);
+    const _a = groupFormFieldWrapperProps(props), { bem, Toggler, modifier, value, defaultValue, fieldWrapperProps } = _a, togglerGroupProps = __rest(_a, ["bem", "Toggler", "modifier", "value", "defaultValue", "fieldWrapperProps"]);
     const _value = useMemo(() => (value == null ? undefined : typeof value === 'string' ? [value] : value), [value]);
     const _defaultValue = useMemo(() => defaultValue == null
         ? undefined
         : typeof defaultValue === 'string'
             ? [defaultValue]
             : defaultValue, [defaultValue]);
-    return (React.createElement(FormField, { className: modifiedClass(bem, modifier, className), group: true, label: label, LabelTag: LabelTag, assistText: assistText, hideLabel: hideLabel, disabled: !!disabled, readOnly: readOnly, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, id: id, renderInput: (className, inputProps) => {
-            return (React.createElement(TogglerGroup, Object.assign({ bem: className.options }, inputProps, togglerGroupProps, { disabled: disabled, value: _value, defaultValue: _defaultValue, Toggler: Toggler })));
-        } }));
+    return (React.createElement(FormField, Object.assign({ extraClassName: modifiedClass(bem, modifier), group: true }, fieldWrapperProps, { renderInput: (className, inputProps) => {
+            return (React.createElement(TogglerGroup, Object.assign({ bem: className.options }, inputProps, togglerGroupProps, { disabled: props.disabled, value: _value, defaultValue: _defaultValue, Toggler: Toggler })));
+        } })));
 };

package/esm/_abstract/_TogglerInput.d.ts

@@ -1,3 +1,4 @@
+import { WrapperElmProps } from '../utils.js';
 import { BemModifierProps } from '../utils/types.js';
 export type TogglerInputProps = {
     label: string | JSX.Element;
@@ -13,9 +14,8 @@ export type TogglerInputProps = {
     reqText?: string | false;
     errorMessage?: string | JSX.Element;
     Wrapper?: 'div' | 'li';
-    wrapperProps?: JSX.IntrinsicElements['div'];
     inputProps?: JSX.IntrinsicElements['input'];
-} & BemModifierProps & Omit<JSX.IntrinsicElements['input'], 'type'>;
+} & BemModifierProps & WrapperElmProps & Omit<JSX.IntrinsicElements['input'], 'type'>;
 type _TogglerInputProps = {
     bem: string;
     type: 'radio' | 'checkbox';

package/esm/_abstract/_TogglerInput.js

@@ -7,7 +7,7 @@ export const TogglerInput = (props) => {
     const domid = useDomid(id);
     const errorId = errorMessage && 'error' + domid;
     const reqStar = required && reqText !== false && (React.createElement("abbr", { className: bem + '__label__reqstar', 
-        // TODO: add mo-better i18n thinking
+        // FIXME: add mo-better i18n thinking
         title: (reqText || 'Þarf að haka í') + ': ' }, "*"));
     const readOnly = restInputProps.readOnly || (inputProps || {}).readOnly;
     const labelContent = (React.createElement(React.Fragment, null,
@@ -16,7 +16,9 @@ export const TogglerInput = (props) => {
         " ",
         label,
         ' '));
-    return (React.createElement(Wrapper, Object.assign({}, wrapperProps, { className: modifiedClass(bem, modifier, className) }),
+    return (React.createElement(Wrapper, Object.assign({}, wrapperProps, { className: modifiedClass(bem, modifier, 
+        // Prefer `className` over `wrapperProps.className`
+        className || (wrapperProps || {}).className) }),
         React.createElement("input", Object.assign({ className: bem + '__input', type: type, id: domid, "aria-invalid": invalid || !!errorMessage || undefined, "aria-describedby": errorId }, restInputProps, inputProps, (readOnly && { disabled: true }))),
         ' ',
         React.createElement("label", { className: bem + '__label', htmlFor: domid },

package/esm/utils.d.ts

@@ -1,3 +1,4 @@
+import type { ElementRef } from 'react';
 export * from './utils/browserSide.js';
 export * from './utils/config.js';
 export { HannaUIState, useHannaUIState } from './utils/HannaUIState.js';
@@ -9,8 +10,30 @@ export * from './utils/useMixedControlState.js';
 export * from './utils/useScrollbarWidthCSSVar.js';
 /**
  * Helper type to add HTML element props to a component, **including**
- * `data-*` attributes
+ * `data-*` attributes.
  */
-export type HTMLProps<T extends keyof JSX.IntrinsicElements> = JSX.IntrinsicElements[T] & {
+export type HTMLProps<TagName extends keyof JSX.IntrinsicElements | null = null, ExcludeProps extends string = never> = Omit<JSX.IntrinsicElements[TagName extends null ? 'div' : TagName], 'ref' | 'children' | 'dangerouslySetInnerHTML' | ExcludeProps> & {
+    ref?: React.RefObject<ElementRef<TagName extends null ? 'div' : TagName>>;
     [dataAttr: `data-${string}`]: unknown;
 };
+export type WrapperElmProps<TagName extends keyof JSX.IntrinsicElements | null = null, ExcludeProps extends string = never> = {
+    /**
+     * Custom HTML attributes for the component's wrapper element.
+     *
+     * Note, however, that some props may be intentionally
+     * excluded from the list.
+     *
+     * **WARNING**
+     * In some cases props added this way can break the component, og hurt its
+     * accessibility.  Also, some props may get ignored, or over-ridden by the
+     * component. User discretion is advised.
+     */
+    wrapperProps?: HTMLProps<TagName, ExcludeProps>;
+};
+export type MissingWrapperElmProps = {
+    /**
+     * This component does NOT allow `wrapperPRops` yet, but will do so
+     * in a near-future version of the `@reykjavik/hanna-react` library.
+     */
+    wrapperProps?: undefined;
+};

package/package.json

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