@reykjavik/hanna-react 0.10.99 → 0.10.101

package/esm/LabeledTextBlock.js

@@ -3,9 +3,9 @@ import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { useSeenEffect } from './utils/seenEffect.js';
 import ButtonTertiary from './ButtonTertiary.js';
 export const LabeledTextBlock = (props) => {
-    const { label, summary, wide, buttons = [], startSeen } = props;
+    const { label, summary, wide, buttons = [], startSeen, wrapperProps } = props;
     const [ref] = useSeenEffect(startSeen);
-    return (React.createElement("div", { className: modifiedClass('LabeledTextBlock', wide && 'wide'), ref: ref },
+    return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('LabeledTextBlock', wide && 'wide', (wrapperProps || {}).className), ref: ref }),
         React.createElement("h2", { className: "LabeledTextBlock__label" }, label),
         React.createElement("div", { className: "LabeledTextBlock__summary" },
             summary,

package/esm/Layout.d.ts

@@ -3,7 +3,7 @@ import type { HannaColorTheme } from '@reykjavik/hanna-css';
 import { EitherObj } from '@reykjavik/hanna-utils';
 import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
 import { BemModifierProps } from './utils/types.js';
-import { SSRSupportProps } from './utils.js';
+import { SSRSupportProps, WrapperElmProps } from './utils.js';
 export type LayoutI18n = {
     lang?: string;
     skipLinkLabel: string;
@@ -20,7 +20,7 @@ type LayoutProps = {
     siteName?: string;
     texts?: LayoutI18n;
     lang?: string;
-} & SSRSupportProps & BemModifierProps & EitherObj<{
+} & SSRSupportProps & WrapperElmProps & BemModifierProps & EitherObj<{
     mainChildren: ReactNode;
 }, {
     children: ReactNode;

package/esm/Layout.js

@@ -27,16 +27,16 @@ export const defaultLayoutTexts = {
 };
 export const Layout = (props) => {
     useScrollbarWidthCSSVar();
-    const { ssr, globalAlerts, mainChildren, navChildren, footerChildren, colorTheme, children, siteName = '', logoLink = '/', } = props;
+    const { ssr, globalAlerts, mainChildren, navChildren, footerChildren, colorTheme, children, siteName = '', logoLink = '/', wrapperProps, } = props;
     const { isMenuActive, uiState, closeMenu, toggleMenu } = useMenuToggling(ssr !== 'ssr-only');
     const txt = getTexts(props, defaultLayoutTexts);
-    return (React.createElement("div", { className: modifiedClass('Layout', props.modifier), "data-color-theme": colorTheme },
+    return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('Layout', props.modifier, (wrapperProps || {}).className), "data-color-theme": colorTheme }),
         globalAlerts && (React.createElement("div", { className: "Layout__alerts", role: "alert" }, globalAlerts)),
         React.createElement("div", { className: "Layout__content" },
             React.createElement("div", { className: "Layout__header", role: "banner" },
                 React.createElement(Link, { className: "Layout__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/MainMenu.d.ts

@@ -3,7 +3,7 @@ import { Cleanup } from '@reykjavik/hanna-utils';
 import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
 import { AuxilaryPanelIllustration, AuxiliaryPanelProps } from './MainMenu/_Auxiliary.js';
 import { MegaMenuItem, MegaMenuPanel, PrimaryPanelI18n } from './MainMenu/_PrimaryPanel.js';
-import { SSRSupportProps } from './utils.js';
+import { SSRSupportProps, WrapperElmProps } from './utils.js';
 export type MainMenuI18n = Cleanup<{
     lang?: string;
     homeLabel?: string;
@@ -63,6 +63,6 @@ export type MainMenuProps = {
     activePanelId?: string;
     texts?: MainMenuI18n;
     lang?: string;
-} & SSRSupportProps;
+} & SSRSupportProps & WrapperElmProps<null, 'aria-label'>;
 export declare const MainMenu: (props: MainMenuProps) => JSX.Element | null;
 export default MainMenu;

package/esm/MainMenu.js

@@ -85,12 +85,13 @@ const normalizeMenuItems = (itemsProp, megaPanels, homeLink, texts) => {
 // ---------------------------------------------------------------------------
 const emptyPanelList = [];
 export const MainMenu = (props) => {
-    const { megaPanels = emptyPanelList, onItemClick, ssr, auxiliaryPanel } = props;
+    const { megaPanels = emptyPanelList, onItemClick, ssr, auxiliaryPanel, wrapperProps = {}, } = props;
     const texts = getTexts(props, defaultMainMenuTexts);
     const title = props.title || texts.title;
     const { closeHamburgerMenu } = useHannaUIState();
     const isBrowser = useIsBrowserSide(ssr);
-    const menuElmRef = useRef(null);
+    const _menuElmRef = useRef(null);
+    const menuElmRef = wrapperProps.ref || _menuElmRef;
     const pressedLinkRef = useRef(null);
     const activePanelRef = useRef(null);
     const [activePanel, _setActivePanel] = useState(() => isBrowser && findActivePanel(megaPanels, props.activePanelId));
@@ -180,7 +181,7 @@ export const MainMenu = (props) => {
             closeHamburgerMenu();
         }
     };
-    return (React.createElement("nav", { className: "MainMenu", "aria-label": title, "data-sprinkled": isBrowser, ref: menuElmRef },
+    return (React.createElement("nav", Object.assign({}, props.wrapperProps, { className: modifiedClass('MainMenu', null, wrapperProps.className), "aria-label": title, "data-sprinkled": isBrowser, ref: menuElmRef }),
         React.createElement("h2", { className: "MainMenu__title" }, title),
         React.createElement("ul", { className: "MainMenu__items" }, menuItems.map((item, i) => {
             if (item === '---') {

package/esm/MiniMetrics.d.ts

@@ -1,8 +1,9 @@
 import { ButtonProps } from './_abstract/_Button.js';
 import { SeenProp } from './utils/seenEffect.js';
+import { WrapperElmProps } from './utils.js';
 export type MiniMetricsProps = {
     text: string;
     moreButton: ButtonProps;
-} & SeenProp;
+} & WrapperElmProps & SeenProp;
 export declare const MiniMetrics: (props: MiniMetricsProps) => JSX.Element;
 export default MiniMetrics;

package/esm/MiniMetrics.js

@@ -1,9 +1,10 @@
 import React from 'react';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { Button } from './_abstract/_Button.js';
 import SeenEffect from './SeenEffect.js';
 export const MiniMetrics = (props) => {
-    const { text, moreButton, startSeen } = props;
-    return (React.createElement(SeenEffect, { className: "MiniMetrics", startSeen: startSeen },
+    const { text, moreButton, startSeen, wrapperProps } = props;
+    return (React.createElement(SeenEffect, Object.assign({}, wrapperProps, { className: modifiedClass('MiniMetrics', null, (wrapperProps || {}).className), startSeen: startSeen }),
         React.createElement("strong", { className: "MiniMetrics__text" }, text),
         " ",
         '\n',

package/esm/Modal.d.ts

@@ -1,8 +1,9 @@
 import { ReactElement } from 'react';
 import { ModalProps as _ModalProps } from '@hugsmidjan/react/Modal';
+import { MissingWrapperElmProps } from './utils.js';
 export type ModalProps = Omit<_ModalProps, 'bem' | 'bodyWrap' | 'modifier'> & {
     modifier?: 'w6' | 'w8' | 'w10';
     bling?: ReactElement;
-};
+} & MissingWrapperElmProps;
 export declare const Modal: (props: ModalProps) => JSX.Element;
 export default Modal;

package/esm/Multiselect.d.ts

@@ -28,14 +28,18 @@ export type MultiselectProps = TogglerGroupFieldProps<string> & {
      * even when the total options are fewer than
      * `Multiselect.meta.summaryLimit`.
      *
-     * NOTE: Using this option is generally not recommended.
+     * NOTE: Using this option is generally not recommended,
+     * because the search UI (i.e. the on-screen keyboard), takes up a lot of
+     * space on mobile devices.
      */
     forceSummary?: boolean;
     /**
      * Force the options to be searchable, even when they're
      * fewer than `Multiselect.meta.searchableLimit`.
      *
-     * NOTE: Using this option is generally not recommended.
+     * NOTE: Using this option is generally not recommended,
+     * because the summary takes up valuable space when there are only a few
+     * items.
      */
     forceSearchable?: boolean;
     texts?: MultiselectI18n;
@@ -49,16 +53,17 @@ export declare const Multiselect: {
         /**
          * The item-count where the list becomes searchable.
          *
-         * (The search UI, including the on-screen keyboard, takes up a lot of space
+         * (The search UI (on-screen keyboard), takes up a lot of space
          * on mobile devices, so there's a balance that we want to strike.)
          */
-        searchableLimit: number;
+        readonly searchableLimit: number;
         /**
          * The item-count above which we display a summary of "current" values
          * at the top of the drop-down list.
          *
-         * (This summary just gets in the way with ultra short option lists.)
+         * (The summary is pointless and takes up valuable space,
+         * when there are only a few items.)
          */
-        summaryLimit: number;
+        readonly summaryLimit: number;
     };
 };

package/esm/Multiselect.js

@@ -7,14 +7,14 @@ import { getTexts } from '@reykjavik/hanna-utils/i18n';
 import { FocusTrap } from './_abstract/_FocusTrap.js';
 import { filterItems } from './Multiselect/_Multiselect.search.js';
 import Checkbox from './Checkbox.js';
-import FormField from './FormField.js';
+import FormField, { getFormFieldWrapperProps } from './FormField.js';
 import TagPill from './TagPill.js';
 import { useMixedControlState } from './utils.js';
 const metaData = {
     /**
      * The item-count where the list becomes searchable.
      *
-     * (The search UI, including the on-screen keyboard, takes up a lot of space
+     * (The search UI (on-screen keyboard), takes up a lot of space
      * on mobile devices, so there's a balance that we want to strike.)
      */
     searchableLimit: 20,
@@ -22,10 +22,14 @@ const metaData = {
      * The item-count above which we display a summary of "current" values
      * at the top of the drop-down list.
      *
-     * (This summary just gets in the way with ultra short option lists.)
+     * (The summary is pointless and takes up valuable space,
+     * when there are only a few items.)
      */
+    // NOTE: First we tried 10, which felt way too low, now we're trying 20.
+    // Maybe the "sweet-spot" is closer to 15 ? — We'll see.
     summaryLimit: 20,
 };
+// Extract the values up front, to prevent runtime changes of these values.
 const { searchableLimit, summaryLimit } = metaData;
 const defaultTexts = {
     pl: {
@@ -61,7 +65,7 @@ export const Multiselect = (props) => {
     const placeholderText = !values.length ? props.placeholder : undefined;
     const texts = getTexts(props, defaultTexts);
     const inputRef = useRef(null);
-    const wrapperRef = useRef(null);
+    const inputWrapperRef = useRef(null);
     const [activeItemIndex, setActiveItemIndex] = useState(-1);
     const [searchQuery, setSearchQuery] = useState('');
     const [isOpen, setIsOpen] = useState(false);
@@ -69,14 +73,14 @@ export const Multiselect = (props) => {
         setIsOpen((isOpen) => {
             newIsOpen = typeof newIsOpen === 'boolean' ? newIsOpen : !isOpen;
             if (!newIsOpen) {
-                wrapperRef.current.querySelector('.Multiselect__choices').scrollTo(0, 0);
+                inputWrapperRef.current.querySelector('.Multiselect__choices').scrollTo(0, 0);
                 setSearchQuery('');
                 setActiveItemIndex(-1);
             }
             return newIsOpen;
         });
     };
-    useOnClickOutside(wrapperRef, () => toggleOpen(false));
+    useOnClickOutside(inputWrapperRef, () => toggleOpen(false));
     const options = useMemo(() => _options.map((item) => (typeof item === 'string' ? { value: item } : item)), [_options]);
     const isSearchable = props.forceSearchable || options.length >= searchableLimit;
     /*
@@ -164,7 +168,7 @@ export const Multiselect = (props) => {
     }, [activeItemIndex, filteredOptions, isOpen, handleCheckboxSelection, inputRef]);
     // Auto-close the dropdown when focus has left the building
     useEffect(() => {
-        const wrapperDiv = wrapperRef.current;
+        const wrapperDiv = inputWrapperRef.current;
         if (!wrapperDiv) {
             return;
         }
@@ -182,14 +186,14 @@ export const Multiselect = (props) => {
     }, []);
     useEffect(() => {
         var _a, _b;
-        (_b = (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.Multiselect__option')[activeItemIndex]) === null || _b === void 0 ? void 0 : _b.scrollIntoView({
+        (_b = (_a = inputWrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.Multiselect__option')[activeItemIndex]) === null || _b === void 0 ? void 0 : _b.scrollIntoView({
             behavior: 'smooth',
             block: 'nearest',
         });
     }, [activeItemIndex]);
-    return (React.createElement(FormField, { className: modifiedClass('Multiselect', props.nowrap && 'nowrap', props.className), ssr: props.ssr, group: "inputlike", label: props.label, LabelTag: props.LabelTag, hideLabel: props.hideLabel, small: props.small, filled: filled, empty: empty, disabled: disabled, invalid: props.invalid, errorMessage: props.errorMessage, assistText: props.assistText, readOnly: readOnly, required: props.required, reqText: props.reqText, id: props.id, renderInput: (className, inputProps, addFocusProps, isBrowser) => {
+    return (React.createElement(FormField, Object.assign({ extraClassName: modifiedClass('Multiselect', props.nowrap && 'nowrap'), group: "inputlike", filled: filled, empty: empty }, getFormFieldWrapperProps(props), { renderInput: (className, inputProps, addFocusProps, isBrowser) => {
             const { id } = inputProps;
-            return (React.createElement("div", Object.assign({ className: modifiedClass('Multiselect__input', [isOpen && 'open'], className.input) }, addFocusProps(), { "data-sprinkled": isBrowser, ref: wrapperRef }),
+            return (React.createElement("div", Object.assign({ className: modifiedClass('Multiselect__input', [isOpen && 'open'], className.input) }, addFocusProps(), { "data-sprinkled": isBrowser, ref: inputWrapperRef }),
                 !isBrowser ? null : isSearchable ? (React.createElement("input", { className: "Multiselect__search", id: `toggler:${id}`, "aria-label": texts.search, "aria-controls": domId(), "data-expanded": isOpen || undefined, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onClick: () => toggleOpen(), value: searchQuery, 
                     // onFocus={handleInputFocus}
                     placeholder: placeholderText, disabled: disabled, ref: inputRef })) : (React.createElement("button", { className: "Multiselect__toggler", id: `toggler:${id}`, type: "button", "aria-label": texts.buttonShow, "aria-controls": domId(), "aria-expanded": isOpen, onClick: () => toggleOpen(), disabled: disabled, 
@@ -225,7 +229,7 @@ export const Multiselect = (props) => {
                                 } })));
                         })) : searchQuery ? (React.createElement("li", { className: "Multiselect__noresults" }, texts.noneFoundMsg)) : undefined,
                         React.createElement(FocusTrap, { Tag: "li" })))));
-        } }));
+        } })));
 };
 /** Configuration constants for the Multiselect components */
 Multiselect.meta = metaData;

package/esm/NameCard.d.ts

@@ -1,3 +1,4 @@
+import { WrapperElmProps } from './utils.js';
 export type NameCardI18n = {
     updatedLabel: string;
     availableLabel: string;
@@ -59,6 +60,6 @@ export type NameCardProps = {
     vacancy?: boolean;
     /** @deprecated Use `contactInfo` instead  (will be removed in v0.11) */
     tel?: string | Array<string>;
-};
+} & WrapperElmProps;
 export declare const NameCard: (props: NameCardProps) => JSX.Element;
 export default NameCard;

package/esm/NameCard.js

@@ -36,7 +36,8 @@ const defaultTexts = {
     },
 };
 export const NameCard = (props) => {
-    const { name, location, hours, aboutText, available = props.vacancy, updated } = props;
+    const { name, location, hours, aboutText, available = props.vacancy, // eslint-disable-line deprecation/deprecation
+    updated, wrapperProps, } = props;
     const renderMeta = () => {
         if (available == null && !updated) {
             return;
@@ -46,8 +47,9 @@ export const NameCard = (props) => {
         return (React.createElement("div", { className: "NameCard__meta" },
             available != null && (React.createElement("span", { className: modifiedClass('NameCard__availability', available && 'available') },
                 available
-                    ? availableLabel || texts.vacancyLabel
-                    : unavailableLabel || texts.noVacancyLabel,
+                    ? availableLabel || texts.vacancyLabel // eslint-disable-line deprecation/deprecation
+                    : unavailableLabel || texts.noVacancyLabel // eslint-disable-line deprecation/deprecation
+            ,
                 ' ')),
             updated != null && (React.createElement("span", { className: "NameCard__updated" },
                 updatedLabel,
@@ -56,10 +58,12 @@ export const NameCard = (props) => {
     };
     let contactInfo = props.contactInfo;
     if (!contactInfo) {
-        contactInfo = _telToContactInfo(props.tel) || [];
+        contactInfo = _telToContactInfo(props.tel) || []; // eslint-disable-line deprecation/deprecation
     }
     // Remove/map @deprecated contactinfo items
-    const cleanContactInfo = contactInfo.map((item) => {
+    const cleanContactInfo = contactInfo.map(
+    // eslint-disable-next-line deprecation/deprecation
+    (item) => {
         if (typeof item !== 'string' && 'value' in item) {
             return {
                 href: item.href,
@@ -69,7 +73,7 @@ export const NameCard = (props) => {
         }
         return item;
     });
-    return (React.createElement("div", { className: "NameCard" },
+    return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('NameCard', null, (wrapperProps || {}).className) }),
         React.createElement("div", { className: "NameCard__name" }, name),
         contactInfo.length > 0 && (React.createElement("p", { className: "NameCard__contactinfo" }, cleanContactInfo.map((item, i) => (React.createElement(React.Fragment, null,
             typeof item === 'string' ? (React.createElement("span", { className: "NameCard__contactinfo__item" }, item)) : (React.createElement(Button, { key: i, bem: "NameCard__contactinfo__item", href: item.href, "aria-label": item.longLabel, title: item.longLabel }, item.label)),

package/esm/NameCards.d.ts

@@ -1,6 +1,7 @@
 import { NameCardProps } from './NameCard.js';
+import { WrapperElmProps } from './utils.js';
 type NameCardsProps = {
-    items: Array<NameCardProps>;
-};
+    items: Array<Omit<NameCardProps, 'wrapperProps'>>;
+} & WrapperElmProps;
 export declare const NameCards: (props: NameCardsProps) => JSX.Element;
 export default NameCards;

package/esm/NameCards.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import NameCard from './NameCard.js';
 export const NameCards = (props) => {
-    const { items } = props;
-    return (React.createElement("div", { className: "NameCards" }, items.map((item, i) => (React.createElement(NameCard, Object.assign({ key: i }, item))))));
+    const { items, wrapperProps } = props;
+    return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('NameCards', null, (wrapperProps || {}).className) }), items.map((item, i) => (React.createElement(NameCard, Object.assign({ key: i }, item))))));
 };
 export default NameCards;

package/esm/NewsHero.d.ts

@@ -1,5 +1,6 @@
 import { ImageProps } from './_abstract/_Image.js';
 import { SeenProp } from './utils/seenEffect.js';
+import { WrapperElmProps } from './utils.js';
 type BlingOptions = 'interesting' | 'snake' | 'pentagon' | 'dome' | 'balls-small' | 'balls-large';
 export type NewsHeroProps = {
     title: string;
@@ -9,6 +10,6 @@ export type NewsHeroProps = {
     sharing?: boolean | (() => JSX.Element);
     image?: ImageProps;
     blingType?: BlingOptions;
-} & SeenProp;
+} & WrapperElmProps & SeenProp;
 export declare const NewsHero: (props: NewsHeroProps) => JSX.Element;
 export default NewsHero;

package/esm/NewsHero.js

@@ -72,15 +72,15 @@ const blingOptions = {
     ],
 };
 export const NewsHero = (props) => {
-    const { title, sharing = true, meta, summary, image, blingType, startSeen } = props;
+    const { title, sharing = true, meta, summary, image, blingType, startSeen, wrapperProps, } = props;
     const [ref] = useSeenEffect(startSeen);
     const blings = (blingType && blingOptions[blingType]) || getStableRandomItem(blingOptions, title);
-    return (React.createElement("div", { className: modifiedClass('NewsHero', [!image && 'align--right']), ref: ref },
+    return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('NewsHero', [!image && 'align--right'], (wrapperProps || {}).className), ref: ref }),
         React.createElement("div", { className: "NewsHero__content" },
             React.createElement("h1", { className: "NewsHero__title" }, title),
             meta && React.createElement("span", { className: "NewsHero__meta" }, meta),
             React.createElement("div", { className: "NewsHero__summary" }, summary),
             sharing === true ? React.createElement(ShareButtons, null) : sharing && sharing()),
-        image ? (React.createElement(Image, Object.assign({ className: "NewsHero__image" }, image))) : (React.createElement(Blings, { blings: blings }))));
+        image ? React.createElement(Image, Object.assign({ bem: "NewsHero__image" }, image)) : React.createElement(Blings, { blings: blings })));
 };
 export default NewsHero;

package/esm/PageFilter.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { EitherObj } from '@reykjavik/hanna-utils';
 import { SeenProp } from './utils/seenEffect.js';
+import { WrapperElmProps } from './utils.js';
 export type PageFilterProps = {
     title: string;
     summary?: React.ReactNode;
@@ -11,6 +12,6 @@ export type PageFilterProps = {
     filters: React.ReactNode;
 }, {
     children: React.ReactNode;
-}> & SeenProp;
+}> & WrapperElmProps & SeenProp;
 export declare const PageFilter: (props: PageFilterProps) => JSX.Element;
 export default PageFilter;

package/esm/PageFilter.js

@@ -3,9 +3,9 @@ import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { useSeenEffect } from './utils/seenEffect.js';
 import Footnote from './Footnote.js';
 export const PageFilter = (props) => {
-    const { title, summary, footnote, filters, children, buttonRow, underlap, startSeen } = props;
+    const { title, summary, footnote, filters, children, buttonRow, underlap, startSeen, wrapperProps, } = props;
     const [ref] = useSeenEffect(startSeen);
-    return (React.createElement("div", { className: modifiedClass('PageFilter', underlap && 'underlap'), ref: ref },
+    return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('PageFilter', underlap && 'underlap', (wrapperProps || {}).className), ref: ref }),
         React.createElement("h2", { className: "PageFilter__title" }, title),
         summary && React.createElement("div", { className: "PageFilter__summary" }, summary),
         React.createElement("div", { className: "PageFilter__filters" }, filters || children),

package/esm/PageHeading.d.ts

@@ -1,10 +1,11 @@
 import { ReactNode } from 'react';
 import { SeenProp } from './utils/seenEffect.js';
+import { WrapperElmProps } from './utils.js';
 export type PageHeadingProps = {
     Tag?: 'h1' | 'h2';
     align?: 'right';
     small?: boolean;
     children: ReactNode;
-} & SeenProp;
+} & WrapperElmProps & SeenProp;
 export declare const PageHeading: (props: PageHeadingProps) => JSX.Element;
 export default PageHeading;

package/esm/PageHeading.js

@@ -2,11 +2,8 @@ import React from 'react';
 import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { useSeenEffect } from './utils/seenEffect.js';
 export const PageHeading = (props) => {
-    const { Tag = 'h1', align, small, children, startSeen } = props;
+    const { Tag = 'h1', align, small, children, startSeen, wrapperProps } = props;
     const [ref] = useSeenEffect(startSeen);
-    return (React.createElement(Tag, { className: modifiedClass('PageHeading', [
-            small && 'small',
-            align === 'right' && 'align--' + align,
-        ]), ref: ref }, children));
+    return (React.createElement(Tag, Object.assign({}, wrapperProps, { className: modifiedClass('PageHeading', [small && 'small', align === 'right' && 'align--' + align], (wrapperProps || {}).className), ref: ref }), children));
 };
 export default PageHeading;

package/esm/Picture.d.ts

@@ -1,7 +1,8 @@
 import { ImagePropsLinked } from './_abstract/_Image.js';
+import { WrapperElmProps } from './utils.js';
 export type PictureProps = ImagePropsLinked & {
     contain?: boolean;
     className?: string;
-};
+} & WrapperElmProps;
 export declare const Picture: (props: PictureProps) => JSX.Element;
 export default Picture;

package/esm/Picture.js

@@ -1,8 +1,4 @@
 import React from 'react';
-import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { Image } from './_abstract/_Image.js';
-export const Picture = (props) => {
-    const { contain, className } = props;
-    return (React.createElement(Image, Object.assign({}, props, { className: modifiedClass('Picture', contain && 'contain', className) })));
-};
+export const Picture = (props) => (React.createElement(Image, Object.assign({}, props, { bem: "Picture", modifier: props.contain && 'contain' })));
 export default Picture;

package/esm/ProcessOverview.d.ts

@@ -1,3 +1,4 @@
+import { WrapperElmProps } from './utils.js';
 export type ProcessOverviewItemProps = {
     title: string;
     content: string | JSX.Element;
@@ -8,6 +9,6 @@ export type ProcessOverviewProps = {
     attention?: string | JSX.Element;
     transparent?: boolean;
     narrow?: boolean;
-};
+} & WrapperElmProps;
 export declare const ProcessOverview: (props: ProcessOverviewProps) => JSX.Element;
 export default ProcessOverview;

package/esm/ProcessOverview.js

@@ -1,11 +1,8 @@
 import React from 'react';
 import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 export const ProcessOverview = (props) => {
-    const { title, items, attention, transparent, narrow } = props;
-    return (React.createElement("div", { className: modifiedClass('ProcessOverview', [
-            transparent && 'transparent',
-            narrow && 'narrow',
-        ]) },
+    const { title, items, attention, transparent, narrow, wrapperProps } = props;
+    return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('ProcessOverview', [transparent && 'transparent', narrow && 'narrow'], (wrapperProps || {}).className) }),
         React.createElement("h2", { className: "ProcessOverview__title" }, title),
         items.map(({ title, content }, i) => {
             return (React.createElement("div", { key: i, className: "ProcessOverview__item" },

package/esm/RadioButtonsGroup.js

@@ -3,10 +3,10 @@ import { TogglerGroupField, } from './_abstract/_TogglerGroupField.js';
 import { TogglerInput } from './_abstract/_TogglerInput.js';
 const RadioButton = (props) => (React.createElement(TogglerInput, Object.assign({}, props, { bem: "RadioButton", type: "radio", innerWrap: true })));
 export const RadioButtonsGroup = (props) => {
-    if (props.layout) {
+    if (props.layout /* eslint-disable-line deprecation/deprecation */) {
         console.warn('`RadioButtonsGroupProps.layout` is deprecated.');
     }
-    if (props.columns) {
+    if (props.columns /* eslint-disable-line deprecation/deprecation */) {
         console.warn('`RadioButtonsGroupProps.columns` is deprecated.');
     }
     return (React.createElement(TogglerGroupField, Object.assign({}, props, { bem: "RadioButtonsGroup", Toggler: RadioButton, isRadio: true })));

package/esm/RadioGroup.js

@@ -4,5 +4,5 @@ import { TogglerInput } from './_abstract/_TogglerInput.js';
 const Radio = (props) => React.createElement(TogglerInput, Object.assign({}, props, { bem: "Radio", type: "radio" }));
 export const RadioGroup = (props) => (React.createElement(TogglerGroupField, Object.assign({}, props, { bem: "RadioGroup", modifier: props.layout, isRadio: true, Toggler: Radio })));
 /** @deprecated Exposed for testing purposes only. This may disappear at any time. */
-RadioGroup.__Radio = Radio;
+RadioGroup.__Radio = Radio; // eslint-disable-line deprecation/deprecation
 export default RadioGroup;

package/esm/ReadSpeakerPlayer.d.ts

@@ -49,7 +49,7 @@ export type ReadSpeakerPlayerProps = {
     /** Tooggles CSS float layout */
     float?: boolean;
     /** Custom HTML attributes for the wrapper element. */
-    wrapperProps?: HTMLProps<'div'>;
+    wrapperProps?: HTMLProps;
 };
 /**
  * Embeds a ReadSpeaker player in the page

package/esm/ReadSpeakerPlayer.js

@@ -15,7 +15,7 @@ export const defaultReadSpeakerPlayerTexts = {
  * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html
  */
 export const ReadSpeakerPlayer = (props) => {
-    const { align, float, customerId = '11315', lang = '', voice = /^is(?:_is)?$/i.test(lang) ? 'is_dora' : '', readId = '', readClass = readId ? '' : 'Layout__main', wrapperProps = {}, texts, } = props;
+    const { align, float, customerId = '11315', lang = '', voice = /^is(?:_is)?$/i.test(lang) ? 'is_dora' : '', readId = '', readClass = readId ? '' : 'Layout__main', wrapperProps, texts, } = props;
     const { linkText, linkLabel } = getTexts({ lang: lang.slice(0, 2), texts }, defaultReadSpeakerPlayerTexts);
     useEffect(() => {
         var _a, _b;
@@ -50,7 +50,7 @@ export const ReadSpeakerPlayer = (props) => {
     // or multiple different `customerId`s on the same page.
     // If you try that, things will be weird and wonky.
     ]);
-    return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('ReadSpeakerPlayer', [align === 'right' && `align-${align}`, float && 'float'], wrapperProps.className) }),
+    return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('ReadSpeakerPlayer', [align === 'right' && `align-${align}`, float && 'float'], (wrapperProps || {}).className) }),
         React.createElement("div", { id: "readspeaker_button1", className: "rs_skip rsbtn rs_preserve" },
             React.createElement("a", { rel: "nofollow", className: "rsbtn_play", accessKey: "L", title: linkLabel || linkText, href: `https://app-eu.readspeaker.com/cgi-bin/rsent?${new URLSearchParams({
                     customerid: customerId,

package/esm/RelatedLinks.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { WrapperElmProps } from './utils.js';
 declare const types: {
     readonly external: 1;
     readonly document: 1;
@@ -16,6 +17,6 @@ export type RelatedLinksProps = {
     title?: string;
     titleTag?: 'h2' | 'h3' | 'h4' | 'h5';
     links: Array<RelatedLinkItem>;
-};
+} & WrapperElmProps;
 export declare const RelatedLinks: (props: RelatedLinksProps) => JSX.Element | null;
 export default RelatedLinks;

package/esm/RelatedLinks.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { Link } from './_abstract/_Link.js';
 const types = {
     external: 1,
@@ -7,12 +8,12 @@ const types = {
     link: 0,
 };
 export const RelatedLinks = (props) => {
-    const { title, links } = props;
+    const { title, links, wrapperProps } = props;
     if (links.length === 0) {
         return null;
     }
     const TitleTag = props.titleTag || 'h3';
-    return (React.createElement("div", { className: "RelatedLinks" },
+    return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('RelatedLinks', null, (wrapperProps || {}).className) }),
         title && React.createElement(TitleTag, { className: "RelatedLinks__title" }, title),
         React.createElement("ul", { className: "RelatedLinks__list" }, links.map(({ href, label, type, target }, i) => {
             type = type && types[type] ? type : undefined;

package/esm/RowBlock.d.ts

@@ -1,12 +1,13 @@
 import { ReactNode } from 'react';
 import { SeenProp } from './utils/seenEffect.js';
 import { BemModifierProps } from './utils/types.js';
+import { WrapperElmProps } from './utils.js';
 export type RowBlockProps = {
     /** Float the first RowBlockColumn to the right on larger screens. */
     right?: boolean;
     /** Custom **additional** class-name */
     className?: string;
     children: ReactNode;
-} & BemModifierProps & SeenProp;
+} & BemModifierProps & WrapperElmProps & SeenProp;
 export declare const RowBlock: (props: RowBlockProps) => JSX.Element;
 export default RowBlock;

package/esm/RowBlock.js

@@ -2,8 +2,8 @@ import React from 'react';
 import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { useSeenEffect } from './utils/seenEffect.js';
 export const RowBlock = (props) => {
-    const { right, modifier, className, children, startSeen } = props;
+    const { right, modifier, className, children, startSeen, wrapperProps } = props;
     const [ref] = useSeenEffect(startSeen);
-    return (React.createElement("div", { className: modifiedClass('RowBlock', [modifier, right && 'align--right'], className), ref: ref }, children));
+    return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('RowBlock', [modifier, right && 'align--right'], className || (wrapperProps || {}).className), ref: ref }), children));
 };
 export default RowBlock;