@reykjavik/hanna-react 0.10.99 → 0.10.101

package/Heading.js

@@ -11,14 +11,14 @@ const sizes = {
     large: 'large',
 };
 const Heading = (props) => {
-    const { size = 'normal', align, wide, children } = props;
+    const { size = 'normal', align, wide, children, wrapperProps } = props;
     const Tag = props.Tag || (props.forceH1 ? 'h1' : 'h2');
     const suppressWarning = process.env.NODE_ENV !== 'production' && Tag === 'h1' ? true : undefined;
-    return (react_1.default.createElement(Tag, { "data-dev-forcedh1": suppressWarning, className: (0, classUtils_1.modifiedClass)('Heading', [
+    return (react_1.default.createElement(Tag, Object.assign({}, wrapperProps, { "data-dev-forcedh1": suppressWarning, className: (0, classUtils_1.modifiedClass)('Heading', [
             sizes[size],
             align === 'right' && 'align--' + align,
             !align && wide && 'wide',
-        ]) }, children));
+        ]) }), children));
 };
 exports.Heading = Heading;
 exports.default = exports.Heading;

package/HeroBlock.d.ts

@@ -2,6 +2,7 @@ import { Illustration } from '@reykjavik/hanna-utils/assets';
 import { ButtonProps } from './_abstract/_Button.js';
 import { ImageProps } from './_abstract/_Image.js';
 import { SeenProp } from './utils/seenEffect.js';
+import { WrapperElmProps } from './utils.js';
 type HeroBlockImageProps = {
     illustration: Illustration;
     image?: undefined;
@@ -14,6 +15,6 @@ export type HeroBlockProps = {
     summary: string | JSX.Element;
     primaryButton?: ButtonProps;
     secondaryButton?: ButtonProps;
-} & HeroBlockImageProps & SeenProp;
+} & HeroBlockImageProps & WrapperElmProps & SeenProp;
 export declare const HeroBlock: (props: HeroBlockProps) => JSX.Element;
 export default HeroBlock;

package/HeroBlock.js

@@ -3,19 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeroBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const assets_1 = require("@reykjavik/hanna-utils/assets");
 const _Image_js_1 = require("./_abstract/_Image.js");
 const seenEffect_js_1 = require("./utils/seenEffect.js");
 const ButtonPrimary_js_1 = tslib_1.__importDefault(require("./ButtonPrimary.js"));
 const ButtonTertiary_js_1 = tslib_1.__importDefault(require("./ButtonTertiary.js"));
 const HeroBlock = (props) => {
-    const { title, summary, illustration, image, primaryButton, secondaryButton, startSeen, } = props;
+    const { title, summary, illustration, image, primaryButton, secondaryButton, startSeen, wrapperProps, } = props;
     const hasButtons = Boolean(primaryButton || secondaryButton);
     const imgProps = illustration ? { src: (0, assets_1.getIllustrationUrl)(illustration) } : image;
     const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
-    return (react_1.default.createElement("div", { className: "HeroBlock", ref: ref },
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('HeroBlock', null, (wrapperProps || {}).className), ref: ref }),
         react_1.default.createElement("h1", { className: "HeroBlock__title" }, title),
-        react_1.default.createElement(_Image_js_1.Image, Object.assign({ className: "HeroBlock__image" }, imgProps)),
+        react_1.default.createElement(_Image_js_1.Image, Object.assign({ bem: "HeroBlock__image" }, imgProps)),
         react_1.default.createElement("div", { className: "HeroBlock__summary" }, summary),
         hasButtons && (react_1.default.createElement("div", { className: "HeroBlock__buttons" },
             primaryButton && react_1.default.createElement(ButtonPrimary_js_1.default, Object.assign({}, primaryButton)),

package/IframeBlock.d.ts

@@ -1,5 +1,7 @@
 import { EitherObj } from '@reykjavik/hanna-utils';
-import { type ResizerOptions } from 'iframe-resizer-react';
+import { IframeResizerProps, ResizerOptions } from 'iframe-resizer-react';
+import { HTMLProps } from './utils.js';
+type ForbiddenWrapperProps = 'scrolling' | 'height' | 'title' | 'src';
 export type IframeBlockProps = {
     src: string;
     /** Accessible title attribute for the iframe (similar to alt="" on images) */
@@ -8,13 +10,16 @@ export type IframeBlockProps = {
     compact?: boolean;
     align?: 'right';
 } & EitherObj<{
+    /** Fixed height, no auto-resizing of the iframe  */
+    height: number;
+    scrolling?: boolean | 'no' | 'yes';
+    wrapperProps?: HTMLProps<'iframe', ForbiddenWrapperProps>;
+}, {
     /** Default: `'auto'` ... which initializes "iframe-resizer" script */
     height?: 'auto';
     /** Default: `false` ... Set to `true` for same-site only, or provide array of allowed domain-names */
     checkOrigin?: ResizerOptions['checkOrigin'];
-}, {
-    height: number;
-    scrolling?: boolean | 'no' | 'yes';
+    wrapperProps?: Omit<IframeResizerProps, ForbiddenWrapperProps>;
 }>;
 /**
  * When `height` is undefined or "auto", then Add the following code-snipped to the iframed page:

package/IframeBlock.js

@@ -14,18 +14,19 @@ const iframe_resizer_react_1 = tslib_1.__importDefault(require("iframe-resizer-r
  * ```
  */
 const IframeBlock = (props) => {
-    const { title, src, framed, compact, scrolling, height = 'auto', align, checkOrigin = false, } = props;
-    const className = (0, classUtils_1.modifiedClass)('IframeBlock', [
-        framed && 'framed',
-        compact && 'compact',
-        align === 'right' && 'align--' + align,
-    ]);
-    return height === 'auto' ? (react_1.default.createElement(iframe_resizer_react_1.default, { className: className, title: title, src: src, checkOrigin: checkOrigin })) : (react_1.default.createElement("iframe", { className: className, title: title, src: src, 
-        // 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, 
-        // allow undefined to suppress scrolling attribute
-        scrolling: scrolling === true ? 'yes' : scrolling === false ? 'no' : scrolling }));
+    const { title, src, framed, compact, align } = 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, 
+            // 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, 
+            // allow undefined to suppress scrolling attribute
+            scrolling: scrolling === true ? 'yes' : scrolling === false ? 'no' : scrolling })));
+    }
+    const { wrapperProps, checkOrigin = false } = props;
+    return (react_1.default.createElement(iframe_resizer_react_1.default, Object.assign({}, wrapperProps, { className: className, title: title, src: src, checkOrigin: checkOrigin })));
 };
 exports.IframeBlock = IframeBlock;
 exports.default = exports.IframeBlock;

package/Illustration.d.ts

@@ -1,10 +1,11 @@
 import { EitherObj } from '@reykjavik/hanna-utils';
 import { Illustration as IllustrationName } from '@reykjavik/hanna-utils/assets';
 import { ImageProps } from './_abstract/_Image.js';
+import { WrapperElmProps } from './utils.js';
 type IllustrationProps = EitherObj<{
     type: IllustrationName;
 }, {
     image: ImageProps;
-}>;
+}> & WrapperElmProps;
 export declare const Illustration: (props: IllustrationProps) => JSX.Element;
 export default Illustration;

package/Illustration.js

@@ -7,7 +7,7 @@ const assets_1 = require("@reykjavik/hanna-utils/assets");
 const _Image_js_1 = require("./_abstract/_Image.js");
 const Illustration = (props) => {
     const imgProps = props.type ? { src: (0, assets_1.getIllustrationUrl)(props.type) } : props.image;
-    return react_1.default.createElement(_Image_js_1.Image, Object.assign({ className: "Illustration" }, imgProps));
+    return react_1.default.createElement(_Image_js_1.Image, Object.assign({ bem: "Illustration" }, imgProps, { wrapperProps: props.wrapperProps }));
 };
 exports.Illustration = Illustration;
 exports.default = exports.Illustration;

package/ImageCards.d.ts

@@ -1,10 +1,11 @@
 import { CardListSummaryProps, ImageCardListProps, ImageCardProps as _ImageCardProps } from './_abstract/_CardList.js';
 import { SeenProp } from './utils/seenEffect.js';
+import { WrapperElmProps } from './utils.js';
 export type ImageCardsItemProps = _ImageCardProps;
 /** @deprecated Use `ImageCardsItemProps` instead.  (Will be removed in v0.11) */
 export type ImageCardProps = ImageCardsItemProps;
 export type ImageCardsProps = ImageCardListProps & CardListSummaryProps & {
     background?: boolean;
-} & SeenProp;
+} & WrapperElmProps & SeenProp;
 export declare const ImageCards: (props: ImageCardsProps) => JSX.Element;
 export default ImageCards;

package/ImageCards.js

@@ -7,9 +7,9 @@ const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const _CardList_js_1 = require("./_abstract/_CardList.js");
 const seenEffect_js_1 = require("./utils/seenEffect.js");
 const ImageCards = (props) => {
-    const { background, startSeen } = props, cardListProps = tslib_1.__rest(props, ["background", "startSeen"]);
+    const { background, startSeen, wrapperProps } = props, cardListProps = tslib_1.__rest(props, ["background", "startSeen", "wrapperProps"]);
     const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
-    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('ImageCards', background && 'background'), ref: ref },
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('ImageCards', background && 'background', (wrapperProps || {}).className), ref: ref }),
         react_1.default.createElement(_CardList_js_1.CardList, Object.assign({}, cardListProps, { bemPrefix: "ImageCards", imgPlaceholder: props.imgPlaceholder || true }))));
 };
 exports.ImageCards = ImageCards;

package/InfoBlock.d.ts

@@ -1,5 +1,6 @@
 import { EitherObj } from '@reykjavik/hanna-utils';
 import { SeenProp } from './utils/seenEffect.js';
+import { WrapperElmProps } from './utils.js';
 export type InfoBlockProps = {
     title: string;
     subtitle?: string | JSX.Element;
@@ -8,6 +9,6 @@ export type InfoBlockProps = {
     attention?: string | JSX.Element;
 }, {
     extraInfo?: string | JSX.Element;
-}> & SeenProp;
+}> & WrapperElmProps & SeenProp;
 export declare const InfoBlock: (props: InfoBlockProps) => JSX.Element;
 export default InfoBlock;

package/InfoBlock.js

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InfoBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const seenEffect_js_1 = require("./utils/seenEffect.js");
 const InfoBlock = (props) => {
-    const { title, subtitle, items, startSeen } = props;
+    const { title, subtitle, items, startSeen, wrapperProps } = props;
     const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
-    return (react_1.default.createElement("div", { className: "InfoBlock", ref: ref },
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('InfoBlock', null, (wrapperProps || {}).className), ref: ref }),
         react_1.default.createElement("h2", { className: "InfoBlock__title" }, title),
         subtitle && react_1.default.createElement("div", { className: "InfoBlock__subtitle" }, subtitle),
         react_1.default.createElement("ul", { className: "InfoBlock__items" }, items.map((item, i) => (react_1.default.createElement("li", { key: i, className: "InfoBlock__item" }, item)))),

package/InfoHero.d.ts

@@ -1,6 +1,7 @@
 import { ButtonProps } from './_abstract/_Button.js';
 import { ImageProps } from './_abstract/_Image.js';
 import { Alignment } from './constants.js';
+import { WrapperElmProps } from './utils.js';
 type BlingOptions = 'waves' | 'sunny-waves' | 'triangles' | 'circles';
 export type InfoHeroProps = {
     title: string;
@@ -13,6 +14,6 @@ export type InfoHeroProps = {
     align?: Alignment;
     image?: ImageProps;
     blingType?: BlingOptions;
-};
+} & WrapperElmProps;
 export declare const InfoHero: (props: InfoHeroProps) => JSX.Element;
 export default InfoHero;

package/InfoHero.js

@@ -68,12 +68,12 @@ const blingOptions = {
     ],
 };
 const InfoHero = (props) => {
-    const { title, titleBlurb, subTitle, blurb, image, buttons = [], footer, align, blingType, } = props;
+    const { title, titleBlurb, subTitle, blurb, image, buttons = [], footer, align, blingType, wrapperProps, } = props;
     const showButtons = Boolean(buttons.length);
     const alignment = align && constants_js_1.aligns[align] ? align : 'right';
     const blings = (blingType && blingOptions[blingType]) ||
         blingOptions.waves; // default to `waves`
-    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('InfoHero', 'align--' + alignment) },
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('InfoHero', 'align--' + alignment, (wrapperProps || {}).className) }),
         react_1.default.createElement("div", { className: "InfoHero__content" },
             react_1.default.createElement("h1", { className: "InfoHero__title" }, title),
             titleBlurb && react_1.default.createElement("div", { className: "InfoHero__titleblurb" }, titleBlurb),
@@ -81,7 +81,7 @@ const InfoHero = (props) => {
             blurb && react_1.default.createElement("div", { className: "InfoHero__blurb" }, blurb),
             showButtons && (react_1.default.createElement("div", { className: "InfoHero__buttons" }, buttons.map((buttonProps, i) => (react_1.default.createElement(ButtonTertiary_js_1.default, Object.assign({ key: i }, buttonProps)))))),
             footer && react_1.default.createElement("div", { className: "InfoHero__footer" }, footer)),
-        react_1.default.createElement(_Image_js_1.Image, Object.assign({ className: "InfoHero__image", altText: title }, image, { placeholder: true })),
+        react_1.default.createElement(_Image_js_1.Image, Object.assign({ bem: "InfoHero__image", altText: title }, image, { placeholder: true })),
         react_1.default.createElement(_Blings_js_1.Blings, { blings: blings, mirror: alignment === 'right' })));
 };
 exports.InfoHero = InfoHero;

package/IslandBlock.d.ts

@@ -3,6 +3,7 @@ import { BlockItem } from './_abstract/_Block.js';
 import { ImageProps } from './_abstract/_Image.js';
 import { SeenProp } from './utils/seenEffect.js';
 import { Alignment } from './constants.js';
+import { WrapperElmProps } from './utils.js';
 type IslandBaseBlockProps = {
     align?: Alignment;
 };
@@ -20,6 +21,6 @@ type IslandContentBlocks = {
     shapes?: undefined;
     image?: undefined;
 };
-export type IslandBlockProps = IslandBaseBlockProps & (IslandContentBlocks | IslandImageBlock) & SeenProp;
+export type IslandBlockProps = IslandBaseBlockProps & (IslandContentBlocks | IslandImageBlock) & WrapperElmProps & SeenProp;
 export declare const IslandBlock: (props: IslandBlockProps) => JSX.Element;
 export default IslandBlock;

package/IslandBlock.js

@@ -7,7 +7,7 @@ const assets_1 = require("@reykjavik/hanna-utils/assets");
 const _Block_js_1 = require("./_abstract/_Block.js");
 const constants_js_1 = require("./constants.js");
 const IslandBlock = (props) => {
-    const { align, content, shapes, image, startSeen } = props;
+    const { align, content, shapes, image, startSeen, wrapperProps } = props;
     const alignment = align && constants_js_1.aligns[align] ? align : 'right';
     const blockProps = Array.isArray(content)
         ? { content }
@@ -15,7 +15,7 @@ const IslandBlock = (props) => {
             content,
             image: shapes ? { src: (0, assets_1.getFormheimurUrl)(shapes), inline: true } : image || {},
         };
-    return (react_1.default.createElement(_Block_js_1.Block, Object.assign({ bem: "IslandBlock", modifier: 'align--' + alignment }, blockProps, { startSeen: startSeen })));
+    return (react_1.default.createElement(_Block_js_1.Block, Object.assign({ wrapperProps: wrapperProps, bem: "IslandBlock", modifier: 'align--' + alignment }, blockProps, { startSeen: startSeen })));
 };
 exports.IslandBlock = IslandBlock;
 exports.default = exports.IslandBlock;

package/IslandPageBlock.d.ts

@@ -3,6 +3,7 @@ import { BlockItem } from './_abstract/_Block.js';
 import { ImageProps } from './_abstract/_Image.js';
 import { SeenProp } from './utils/seenEffect.js';
 import { Alignment } from './constants.js';
+import { WrapperElmProps } from './utils.js';
 declare const backgrounds: {
     none: undefined;
     gray: string;
@@ -19,6 +20,6 @@ type IslandPageImageProps = {
 export type IslandPageBlockProps = BlockItem & IslandPageImageProps & {
     align?: Alignment;
     background?: Background;
-} & SeenProp;
+} & WrapperElmProps & SeenProp;
 export declare const IslandPageBlock: (props: IslandPageBlockProps) => JSX.Element;
 export default IslandPageBlock;

package/IslandPageBlock.js

@@ -12,10 +12,10 @@ const backgrounds = {
     secondary: 'secondary',
 };
 const IslandPageBlock = (props) => {
-    const { title, summary, buttons, illustration, image, align, background, startSeen } = props;
+    const { title, summary, buttons, illustration, image, align, background, startSeen, wrapperProps, } = props;
     const alignment = align && constants_js_1.aligns[align] ? align : 'right';
     const bg = backgrounds[background || 'none'];
-    return (react_1.default.createElement(_Block_js_1.Block, { bem: "IslandPageBlock", modifier: ['align--' + alignment, bg && 'background--' + bg], content: { title, summary, buttons }, image: illustration ? { src: (0, assets_1.getIllustrationUrl)(illustration) } : image || {}, startSeen: startSeen }));
+    return (react_1.default.createElement(_Block_js_1.Block, { wrapperProps: wrapperProps, bem: "IslandPageBlock", modifier: ['align--' + alignment, bg && 'background--' + bg], content: { title, summary, buttons }, image: illustration ? { src: (0, assets_1.getIllustrationUrl)(illustration) } : image || {}, startSeen: startSeen }));
 };
 exports.IslandPageBlock = IslandPageBlock;
 exports.default = exports.IslandPageBlock;

package/LabeledTextBlock.d.ts

@@ -1,11 +1,12 @@
 import { ReactElement } from 'react';
 import { ButtonProps } from './_abstract/_Button.js';
 import { SeenProp } from './utils/seenEffect.js';
+import { WrapperElmProps } from './utils.js';
 export type LabeledTextBlockProps = {
     label: string;
     summary: string | ReactElement;
     wide?: boolean;
     buttons?: Array<ButtonProps>;
-} & SeenProp;
+} & WrapperElmProps & SeenProp;
 export declare const LabeledTextBlock: (props: LabeledTextBlockProps) => JSX.Element;
 export default LabeledTextBlock;

package/LabeledTextBlock.js

@@ -7,9 +7,9 @@ const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const seenEffect_js_1 = require("./utils/seenEffect.js");
 const ButtonTertiary_js_1 = tslib_1.__importDefault(require("./ButtonTertiary.js"));
 const LabeledTextBlock = (props) => {
-    const { label, summary, wide, buttons = [], startSeen } = props;
+    const { label, summary, wide, buttons = [], startSeen, wrapperProps } = props;
     const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
-    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('LabeledTextBlock', wide && 'wide'), ref: ref },
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('LabeledTextBlock', wide && 'wide', (wrapperProps || {}).className), ref: ref }),
         react_1.default.createElement("h2", { className: "LabeledTextBlock__label" }, label),
         react_1.default.createElement("div", { className: "LabeledTextBlock__summary" },
             summary,

package/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/Layout.js

@@ -31,16 +31,16 @@ exports.defaultLayoutTexts = {
 };
 const Layout = (props) => {
     (0, utils_js_1.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 } = (0, utils_js_1.useMenuToggling)(ssr !== 'ssr-only');
     const txt = (0, i18n_1.getTexts)(props, exports.defaultLayoutTexts);
-    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('Layout', props.modifier), "data-color-theme": colorTheme },
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('Layout', props.modifier, (wrapperProps || {}).className), "data-color-theme": colorTheme }),
         globalAlerts && (react_1.default.createElement("div", { className: "Layout__alerts", role: "alert" }, globalAlerts)),
         react_1.default.createElement("div", { className: "Layout__content" },
             react_1.default.createElement("div", { className: "Layout__header", role: "banner" },
                 react_1.default.createElement(_Link_js_1.Link, { className: "Layout__header__logo", href: logoLink },
                     ' ',
-                    react_1.default.createElement(_Image_js_1.Image, { className: undefined, inline: true, src: (0, assets_1.getAssetUrl)('reykjavik-logo.svg'), altText: "Reykjav\u00EDk" }),
+                    react_1.default.createElement(_Image_js_1.Image, { bem: undefined, inline: true, src: (0, assets_1.getAssetUrl)('reykjavik-logo.svg'), altText: "Reykjav\u00EDk" }),
                     ' ',
                     siteName,
                     ' '),

package/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/MainMenu.js

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

package/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/MiniMetrics.js

@@ -3,11 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MiniMetrics = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const _Button_js_1 = require("./_abstract/_Button.js");
 const SeenEffect_js_1 = tslib_1.__importDefault(require("./SeenEffect.js"));
 const MiniMetrics = (props) => {
-    const { text, moreButton, startSeen } = props;
-    return (react_1.default.createElement(SeenEffect_js_1.default, { className: "MiniMetrics", startSeen: startSeen },
+    const { text, moreButton, startSeen, wrapperProps } = props;
+    return (react_1.default.createElement(SeenEffect_js_1.default, Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('MiniMetrics', null, (wrapperProps || {}).className), startSeen: startSeen }),
         react_1.default.createElement("strong", { className: "MiniMetrics__text" }, text),
         " ",
         '\n',

package/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/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/Multiselect.js

@@ -11,14 +11,14 @@ const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const _FocusTrap_js_1 = require("./_abstract/_FocusTrap.js");
 const _Multiselect_search_js_1 = require("./Multiselect/_Multiselect.search.js");
 const Checkbox_js_1 = tslib_1.__importDefault(require("./Checkbox.js"));
-const FormField_js_1 = tslib_1.__importDefault(require("./FormField.js"));
+const FormField_js_1 = tslib_1.__importStar(require("./FormField.js"));
 const TagPill_js_1 = tslib_1.__importDefault(require("./TagPill.js"));
 const utils_js_1 = require("./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,
@@ -26,10 +26,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: {
@@ -65,7 +69,7 @@ const Multiselect = (props) => {
     const placeholderText = !values.length ? props.placeholder : undefined;
     const texts = (0, i18n_1.getTexts)(props, defaultTexts);
     const inputRef = (0, react_1.useRef)(null);
-    const wrapperRef = (0, react_1.useRef)(null);
+    const inputWrapperRef = (0, react_1.useRef)(null);
     const [activeItemIndex, setActiveItemIndex] = (0, react_1.useState)(-1);
     const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
@@ -73,14 +77,14 @@ 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;
         });
     };
-    (0, hooks_1.useOnClickOutside)(wrapperRef, () => toggleOpen(false));
+    (0, hooks_1.useOnClickOutside)(inputWrapperRef, () => toggleOpen(false));
     const options = (0, react_1.useMemo)(() => _options.map((item) => (typeof item === 'string' ? { value: item } : item)), [_options]);
     const isSearchable = props.forceSearchable || options.length >= searchableLimit;
     /*
@@ -168,7 +172,7 @@ const Multiselect = (props) => {
     }, [activeItemIndex, filteredOptions, isOpen, handleCheckboxSelection, inputRef]);
     // Auto-close the dropdown when focus has left the building
     (0, react_1.useEffect)(() => {
-        const wrapperDiv = wrapperRef.current;
+        const wrapperDiv = inputWrapperRef.current;
         if (!wrapperDiv) {
             return;
         }
@@ -186,14 +190,14 @@ const Multiselect = (props) => {
     }, []);
     (0, react_1.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_1.default.createElement(FormField_js_1.default, { className: (0, classUtils_1.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_1.default.createElement(FormField_js_1.default, Object.assign({ extraClassName: (0, classUtils_1.modifiedClass)('Multiselect', props.nowrap && 'nowrap'), group: "inputlike", filled: filled, empty: empty }, (0, FormField_js_1.getFormFieldWrapperProps)(props), { renderInput: (className, inputProps, addFocusProps, isBrowser) => {
             const { id } = inputProps;
-            return (react_1.default.createElement("div", Object.assign({ className: (0, classUtils_1.modifiedClass)('Multiselect__input', [isOpen && 'open'], className.input) }, addFocusProps(), { "data-sprinkled": isBrowser, ref: wrapperRef }),
+            return (react_1.default.createElement("div", Object.assign({ className: (0, classUtils_1.modifiedClass)('Multiselect__input', [isOpen && 'open'], className.input) }, addFocusProps(), { "data-sprinkled": isBrowser, ref: inputWrapperRef }),
                 !isBrowser ? null : isSearchable ? (react_1.default.createElement("input", { className: "Multiselect__search", id: `toggler:${id}`, "aria-label": texts.search, "aria-controls": (0, domid_1.default)(), "data-expanded": isOpen || undefined, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onClick: () => toggleOpen(), value: searchQuery, 
                     // onFocus={handleInputFocus}
                     placeholder: placeholderText, disabled: disabled, ref: inputRef })) : (react_1.default.createElement("button", { className: "Multiselect__toggler", id: `toggler:${id}`, type: "button", "aria-label": texts.buttonShow, "aria-controls": (0, domid_1.default)(), "aria-expanded": isOpen, onClick: () => toggleOpen(), disabled: disabled, 
@@ -229,7 +233,7 @@ const Multiselect = (props) => {
                                 } })));
                         })) : searchQuery ? (react_1.default.createElement("li", { className: "Multiselect__noresults" }, texts.noneFoundMsg)) : undefined,
                         react_1.default.createElement(_FocusTrap_js_1.FocusTrap, { Tag: "li" })))));
-        } }));
+        } })));
 };
 exports.Multiselect = Multiselect;
 /** Configuration constants for the Multiselect components */