@reykjavik/hanna-react 0.10.99 → 0.10.101

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

@@ -40,7 +40,8 @@ const defaultTexts = {
     },
 };
 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;
@@ -50,8 +51,9 @@ const NameCard = (props) => {
         return (react_1.default.createElement("div", { className: "NameCard__meta" },
             available != null && (react_1.default.createElement("span", { className: (0, classUtils_1.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_1.default.createElement("span", { className: "NameCard__updated" },
                 updatedLabel,
@@ -60,10 +62,12 @@ 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,
@@ -73,7 +77,7 @@ const NameCard = (props) => {
         }
         return item;
     });
-    return (react_1.default.createElement("div", { className: "NameCard" },
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('NameCard', null, (wrapperProps || {}).className) }),
         react_1.default.createElement("div", { className: "NameCard__name" }, name),
         contactInfo.length > 0 && (react_1.default.createElement("p", { className: "NameCard__contactinfo" }, cleanContactInfo.map((item, i) => (react_1.default.createElement(react_1.default.Fragment, null,
             typeof item === 'string' ? (react_1.default.createElement("span", { className: "NameCard__contactinfo__item" }, item)) : (react_1.default.createElement(_Button_js_1.Button, { key: i, bem: "NameCard__contactinfo__item", href: item.href, "aria-label": item.longLabel, title: item.longLabel }, item.label)),

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

@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NameCards = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const NameCard_js_1 = tslib_1.__importDefault(require("./NameCard.js"));
 const NameCards = (props) => {
-    const { items } = props;
-    return (react_1.default.createElement("div", { className: "NameCards" }, items.map((item, i) => (react_1.default.createElement(NameCard_js_1.default, Object.assign({ key: i }, item))))));
+    const { items, wrapperProps } = props;
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('NameCards', null, (wrapperProps || {}).className) }), items.map((item, i) => (react_1.default.createElement(NameCard_js_1.default, Object.assign({ key: i }, item))))));
 };
 exports.NameCards = NameCards;
 exports.default = exports.NameCards;

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

@@ -76,16 +76,16 @@ const blingOptions = {
     ],
 };
 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] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
     const blings = (blingType && blingOptions[blingType]) || (0, hanna_utils_1.getStableRandomItem)(blingOptions, title);
-    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('NewsHero', [!image && 'align--right']), ref: ref },
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('NewsHero', [!image && 'align--right'], (wrapperProps || {}).className), ref: ref }),
         react_1.default.createElement("div", { className: "NewsHero__content" },
             react_1.default.createElement("h1", { className: "NewsHero__title" }, title),
             meta && react_1.default.createElement("span", { className: "NewsHero__meta" }, meta),
             react_1.default.createElement("div", { className: "NewsHero__summary" }, summary),
             sharing === true ? react_1.default.createElement(ShareButtons_js_1.default, null) : sharing && sharing()),
-        image ? (react_1.default.createElement(_Image_js_1.Image, Object.assign({ className: "NewsHero__image" }, image))) : (react_1.default.createElement(_Blings_js_1.Blings, { blings: blings }))));
+        image ? react_1.default.createElement(_Image_js_1.Image, Object.assign({ bem: "NewsHero__image" }, image)) : react_1.default.createElement(_Blings_js_1.Blings, { blings: blings })));
 };
 exports.NewsHero = NewsHero;
 exports.default = exports.NewsHero;

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

@@ -7,9 +7,9 @@ const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const seenEffect_js_1 = require("./utils/seenEffect.js");
 const Footnote_js_1 = tslib_1.__importDefault(require("./Footnote.js"));
 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] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
-    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('PageFilter', underlap && 'underlap'), ref: ref },
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('PageFilter', underlap && 'underlap', (wrapperProps || {}).className), ref: ref }),
         react_1.default.createElement("h2", { className: "PageFilter__title" }, title),
         summary && react_1.default.createElement("div", { className: "PageFilter__summary" }, summary),
         react_1.default.createElement("div", { className: "PageFilter__filters" }, filters || children),

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

@@ -6,12 +6,9 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const seenEffect_js_1 = require("./utils/seenEffect.js");
 const PageHeading = (props) => {
-    const { Tag = 'h1', align, small, children, startSeen } = props;
+    const { Tag = 'h1', align, small, children, startSeen, wrapperProps } = props;
     const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
-    return (react_1.default.createElement(Tag, { className: (0, classUtils_1.modifiedClass)('PageHeading', [
-            small && 'small',
-            align === 'right' && 'align--' + align,
-        ]), ref: ref }, children));
+    return (react_1.default.createElement(Tag, Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('PageHeading', [small && 'small', align === 'right' && 'align--' + align], (wrapperProps || {}).className), ref: ref }), children));
 };
 exports.PageHeading = PageHeading;
 exports.default = exports.PageHeading;

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

@@ -3,11 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Picture = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const _Image_js_1 = require("./_abstract/_Image.js");
-const Picture = (props) => {
-    const { contain, className } = props;
-    return (react_1.default.createElement(_Image_js_1.Image, Object.assign({}, props, { className: (0, classUtils_1.modifiedClass)('Picture', contain && 'contain', className) })));
-};
+const Picture = (props) => (react_1.default.createElement(_Image_js_1.Image, Object.assign({}, props, { bem: "Picture", modifier: props.contain && 'contain' })));
 exports.Picture = Picture;
 exports.default = exports.Picture;

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

@@ -5,11 +5,8 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const ProcessOverview = (props) => {
-    const { title, items, attention, transparent, narrow } = props;
-    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('ProcessOverview', [
-            transparent && 'transparent',
-            narrow && 'narrow',
-        ]) },
+    const { title, items, attention, transparent, narrow, wrapperProps } = props;
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('ProcessOverview', [transparent && 'transparent', narrow && 'narrow'], (wrapperProps || {}).className) }),
         react_1.default.createElement("h2", { className: "ProcessOverview__title" }, title),
         items.map(({ title, content }, i) => {
             return (react_1.default.createElement("div", { key: i, className: "ProcessOverview__item" },

package/RadioButtonsGroup.js

@@ -7,10 +7,10 @@ const _TogglerGroupField_js_1 = require("./_abstract/_TogglerGroupField.js");
 const _TogglerInput_js_1 = require("./_abstract/_TogglerInput.js");
 const RadioButton = (props) => (react_1.default.createElement(_TogglerInput_js_1.TogglerInput, Object.assign({}, props, { bem: "RadioButton", type: "radio", innerWrap: true })));
 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_1.default.createElement(_TogglerGroupField_js_1.TogglerGroupField, Object.assign({}, props, { bem: "RadioButtonsGroup", Toggler: RadioButton, isRadio: true })));

package/RadioGroup.js

@@ -9,5 +9,5 @@ const Radio = (props) => react_1.default.createElement(_TogglerInput_js_1.Toggle
 const RadioGroup = (props) => (react_1.default.createElement(_TogglerGroupField_js_1.TogglerGroupField, Object.assign({}, props, { bem: "RadioGroup", modifier: props.layout, isRadio: true, Toggler: Radio })));
 exports.RadioGroup = RadioGroup;
 /** @deprecated Exposed for testing purposes only. This may disappear at any time. */
-exports.RadioGroup.__Radio = Radio;
+exports.RadioGroup.__Radio = Radio; // eslint-disable-line deprecation/deprecation
 exports.default = exports.RadioGroup;

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

@@ -19,7 +19,7 @@ exports.defaultReadSpeakerPlayerTexts = {
  * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html
  */
 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 } = (0, i18n_1.getTexts)({ lang: lang.slice(0, 2), texts }, exports.defaultReadSpeakerPlayerTexts);
     (0, react_1.useEffect)(() => {
         var _a, _b;
@@ -54,7 +54,7 @@ const ReadSpeakerPlayer = (props) => {
     // or multiple different `customerId`s on the same page.
     // If you try that, things will be weird and wonky.
     ]);
-    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('ReadSpeakerPlayer', [align === 'right' && `align-${align}`, float && 'float'], wrapperProps.className) }),
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('ReadSpeakerPlayer', [align === 'right' && `align-${align}`, float && 'float'], (wrapperProps || {}).className) }),
         react_1.default.createElement("div", { id: "readspeaker_button1", className: "rs_skip rsbtn rs_preserve" },
             react_1.default.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/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/RelatedLinks.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RelatedLinks = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const _Link_js_1 = require("./_abstract/_Link.js");
 const types = {
     external: 1,
@@ -11,12 +12,12 @@ const types = {
     link: 0,
 };
 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_1.default.createElement("div", { className: "RelatedLinks" },
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('RelatedLinks', null, (wrapperProps || {}).className) }),
         title && react_1.default.createElement(TitleTag, { className: "RelatedLinks__title" }, title),
         react_1.default.createElement("ul", { className: "RelatedLinks__list" }, links.map(({ href, label, type, target }, i) => {
             type = type && types[type] ? type : undefined;

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

@@ -6,9 +6,9 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const seenEffect_js_1 = require("./utils/seenEffect.js");
 const RowBlock = (props) => {
-    const { right, modifier, className, children, startSeen } = props;
+    const { right, modifier, className, children, startSeen, wrapperProps } = props;
     const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
-    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('RowBlock', [modifier, right && 'align--right'], className), ref: ref }, children));
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('RowBlock', [modifier, right && 'align--right'], className || (wrapperProps || {}).className), ref: ref }), children));
 };
 exports.RowBlock = RowBlock;
 exports.default = exports.RowBlock;

package/RowBlockColumn.d.ts

@@ -1,8 +1,9 @@
 import { ReactNode } from 'react';
+import { WrapperElmProps } from './utils.js';
 export type RowBlockColumnProps = {
     background?: boolean | 'primary';
     narrow?: boolean;
     children: ReactNode;
-};
+} & WrapperElmProps;
 export declare const RowBlockColumn: (props: RowBlockColumnProps) => JSX.Element;
 export default RowBlockColumn;

package/RowBlockColumn.js

@@ -5,12 +5,12 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const RowBlockColumn = (props) => {
-    const { background, narrow, children } = props;
-    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('RowBlockColumn', [
+    const { background, narrow, children, wrapperProps } = props;
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('RowBlockColumn', [
             narrow && 'narrow',
             background && 'background',
             background === 'primary' && 'background--primary',
-        ]) }, children));
+        ], (wrapperProps || {}).className) }), children));
 };
 exports.RowBlockColumn = RowBlockColumn;
 exports.default = exports.RowBlockColumn;

package/SearchInput.d.ts

@@ -1,18 +1,12 @@
 import { RefObject } from 'react';
 import { FormFieldWrappingProps } from './FormField.js';
-type InputElmProps = JSX.IntrinsicElements['input'];
-type BaseProps<Type extends {
-    type?: string;
-}, InputProps extends object> = {
+export type SearchInputProps = FormFieldWrappingProps & {
     small?: boolean;
-    children?: never;
+    type?: string;
     onButtonClick?: () => void;
     buttonText?: string;
     inputRef?: RefObject<HTMLInputElement>;
     buttonRef?: RefObject<HTMLButtonElement>;
-} & Type & FormFieldWrappingProps & InputProps;
-export type SearchInputProps = BaseProps<{
-    type?: 'text';
-}, InputElmProps>;
+} & JSX.IntrinsicElements['input'];
 export declare const SearchInput: (props: SearchInputProps) => JSX.Element;
 export default SearchInput;

package/SearchInput.js

@@ -3,11 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchInput = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
-const FormField_js_1 = tslib_1.__importDefault(require("./FormField.js"));
+const FormField_js_1 = tslib_1.__importStar(require("./FormField.js"));
 const SearchInput = (props) => {
     var _a;
-    const { className, label, assistText, hideLabel, disabled, readOnly, invalid, errorMessage, required, reqText, id, onChange, small, onButtonClick, buttonText = 'Leita', ssr } = props, inputElementProps = tslib_1.__rest(props, ["className", "label", "assistText", "hideLabel", "disabled", "readOnly", "invalid", "errorMessage", "required", "reqText", "id", "onChange", "small", "onButtonClick", "buttonText", "ssr"]);
+    const _b = (0, FormField_js_1.groupFormFieldWrapperProps)(props), { onChange, onButtonClick, buttonText = 'Leita', fieldWrapperProps } = _b, inputElementProps = tslib_1.__rest(_b, ["onChange", "onButtonClick", "buttonText", "fieldWrapperProps"]);
     const { value, defaultValue, placeholder } = inputElementProps;
     const [hasValue, setHasValue] = (0, react_1.useState)(undefined);
     const filled = !!((_a = value !== null && value !== void 0 ? value : hasValue) !== null && _a !== void 0 ? _a : !!defaultValue);
@@ -18,10 +17,10 @@ const SearchInput = (props) => {
             setHasValue(!!e.target.value);
             onChange && onChange(e);
         };
-    return (react_1.default.createElement(FormField_js_1.default, { className: (0, classUtils_1.modifiedClass)('SearchInput', [], 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) => (react_1.default.createElement("div", Object.assign({ className: className.input }, addFocusProps()),
+    return (react_1.default.createElement(FormField_js_1.default, Object.assign({ extraClassName: "SearchInput", empty: empty, filled: filled }, fieldWrapperProps, { renderInput: (className, inputProps, addFocusProps) => (react_1.default.createElement("div", Object.assign({ className: className.input }, addFocusProps()),
             react_1.default.createElement("input", Object.assign({ className: "SearchInput__input", onChange: _onChange }, inputProps, inputElementProps, { ref: props.inputRef })),
             ' ',
-            onButtonClick && (react_1.default.createElement("button", { className: "SearchInput__button", type: "button", onClick: onButtonClick, title: buttonText, ref: props.buttonRef, disabled: disabled || readOnly }, buttonText)))) }));
+            onButtonClick && (react_1.default.createElement("button", { className: "SearchInput__button", type: "button", onClick: onButtonClick, title: buttonText, ref: props.buttonRef, disabled: props.disabled || props.readOnly }, buttonText)))) })));
 };
 exports.SearchInput = SearchInput;
 exports.default = exports.SearchInput;

package/SearchResults/_SearchResultsItem.js

@@ -13,7 +13,7 @@ const SearchResultsItem = (props) => {
         react_1.default.createElement(_Link_js_1.Link, { className: bem + '__link', href: href },
             react_1.default.createElement("h3", { className: bem + '__title' }, title),
             metaArr.length > 0 && (react_1.default.createElement("span", { className: bem + '__meta' }, metaArr.map((item, i) => typeof item === 'function' ? item() : item && react_1.default.createElement("span", { key: i }, item)))),
-            highlight && image && react_1.default.createElement(_Image_js_1.Image, { className: bem + '__image', src: image }),
+            highlight && image && react_1.default.createElement(_Image_js_1.Image, { bem: bem + '__image', src: image }),
             react_1.default.createElement("div", { className: bem + '__summary', dangerouslySetInnerHTML: { __html: summary } }))));
 };
 exports.SearchResultsItem = SearchResultsItem;

package/SearchResults.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { SearchResultsItemProps } from './SearchResults/_SearchResultsItem.js';
+import { WrapperElmProps } from './utils.js';
 export type SearchReesultI18n = {
     lang: string;
     loadQueryTitle: string;
@@ -32,6 +33,6 @@ export type SearchResultsProps = {
     loadMore?: () => void;
     texts?: SearchReesultI18n;
     lang?: string;
-};
+} & WrapperElmProps;
 export declare const SearchResults: (props: SearchResultsProps) => JSX.Element;
 export default SearchResults;

package/SearchResults.js

@@ -98,10 +98,10 @@ const renderLoadMore = (props, texts) => {
 };
 // TODO: add plural translation thingy for result string
 const SearchResults = (props) => {
-    const { filters, activeFilterIdx, setFilter, status, errorText } = props;
+    const { filters, activeFilterIdx, setFilter, status, errorText, wrapperProps } = props;
     const texts = (0, i18n_1.getTexts)(props, defaultTexts);
     const domid = (0, hooks_1.useDomid)();
-    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('SearchResults', status !== 'results' && status) },
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('SearchResults', status !== 'results' && status, (wrapperProps || {}).className) }),
         renderTitle(props, texts),
         react_1.default.createElement(SearchResults_Tabs, { domid: domid, filters: filters, activeIdx: activeFilterIdx, setFilter: setFilter, lang: texts.lang }),
         react_1.default.createElement("div", { className: "SearchResults__results", id: domid },

package/SeenEffect.js

@@ -9,6 +9,8 @@ const _SeenEffect = (props) => {
     const [ref] = (0, seenEffect_js_1.useSeenEffect)();
     return react_1.default.createElement(Tag, Object.assign({}, tagProps, { ref: ref }, (0, seenEffect_js_1.getEffectAttr)(effectType)));
 };
+// NOTE: As this component already accepts all `<div/>` props directly,
+// it makes little sense to add support for `wrapperProps` on top.
 const SeenEffect = (props) => {
     const _a = props, { Tag = 'div', effectType, startSeen } = _a, tagProps = tslib_1.__rest(_a, ["Tag", "effectType", "startSeen"]);
     const addEffects = (effectType || '') !== 'none' || startSeen !== true;

package/Selectbox.js

@@ -3,15 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Selectbox = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const Selectbox_1 = tslib_1.__importDefault(require("@hugsmidjan/react/Selectbox"));
-const FormField_js_1 = tslib_1.__importDefault(require("./FormField.js"));
+const FormField_js_1 = tslib_1.__importStar(require("./FormField.js"));
 const getValue = (opt) => {
     const val = typeof opt === 'object' ? opt.value : opt;
     return typeof val === 'number' ? String(val) : val;
 };
 const Selectbox = (props) => {
-    const { className, label, assistText, hideLabel, disabled, readOnly, reqText, invalid, errorMessage, required, id, ssr, onChange, small } = props, selectProps = tslib_1.__rest(props, ["className", "label", "assistText", "hideLabel", "disabled", "readOnly", "reqText", "invalid", "errorMessage", "required", "id", "ssr", "onChange", "small"]);
+    const _a = (0, FormField_js_1.groupFormFieldWrapperProps)(props), { onChange, fieldWrapperProps } = _a, selectProps = tslib_1.__rest(_a, ["onChange", "fieldWrapperProps"]);
     const { value, defaultValue, placeholder, options } = selectProps;
     const _selectRef = (0, react_1.useRef)(null);
     const selectRef = selectProps.selectRef || _selectRef;
@@ -35,7 +34,7 @@ const Selectbox = (props) => {
         setIsEmpty(!((_a = selectElm.selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.text));
         onChange && onChange(e);
     };
-    return (react_1.default.createElement(FormField_js_1.default, { className: (0, classUtils_1.modifiedClass)('Selectbox', null, className), ssr: ssr, small: small, label: label, empty: isEmpty, filled: isFilled, assistText: assistText, hideLabel: hideLabel, disabled: disabled, readOnly: readOnly, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, id: id, renderInput: (className, inputProps, addFocusProps) => (react_1.default.createElement(Selectbox_1.default, Object.assign({ bem: className.input, ssr: ssr, onChange: _onChange }, inputProps, addFocusProps(selectProps), { selectRef: selectRef }))) }));
+    return (react_1.default.createElement(FormField_js_1.default, Object.assign({ extraClassName: "Selectbox", empty: isEmpty, filled: isFilled }, fieldWrapperProps, { renderInput: (className, inputProps, addFocusProps) => (react_1.default.createElement(Selectbox_1.default, Object.assign({ bem: className.input, ssr: props.ssr, onChange: _onChange }, inputProps, addFocusProps(selectProps), { selectRef: selectRef }))) })));
 };
 exports.Selectbox = Selectbox;
 // /** @deprecated Use named export instead (The default export will be removed in v0.11+) */

package/ShareButtons.d.ts

@@ -1,8 +1,8 @@
 import { ShareButtonI18n, ShareButtonPlatforms } from '@reykjavik/hanna-utils/shareButtonsUtils';
-import { SSRSupportProps } from './utils.js';
+import { SSRSupportProps, WrapperElmProps } from './utils.js';
 export type ShareButtonsProps = {
     texts?: Readonly<ShareButtonI18n>;
     lang?: string;
-} & SSRSupportProps & Partial<Record<ShareButtonPlatforms, boolean>>;
+} & SSRSupportProps & WrapperElmProps<null, 'aria-label'> & Partial<Record<ShareButtonPlatforms, boolean>>;
 export declare const ShareButtons: (props: ShareButtonsProps) => JSX.Element | null;
 export default ShareButtons;

package/ShareButtons.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ShareButtons = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const shareButtonsUtils_1 = require("@reykjavik/hanna-utils/shareButtonsUtils");
 const _Link_js_1 = require("./_abstract/_Link.js");
@@ -24,7 +25,7 @@ const ShareButtons__item = (props) => {
         react_1.default.createElement(_Link_js_1.Link, { className: 'ShareButtons__link ShareButtons__link--' + type, href: href, title: buttonText, rel: "noopener noreferrer", target: popup ? '_blank' : undefined, onClick: popup ? shareButtonsUtils_1.openInPopup : undefined }, buttonText)));
 };
 const ShareButtons = (props) => {
-    const { texts, lang, ssr, facebook = true, twitter = true, linkedin, email, } = props;
+    const { texts, lang, ssr, facebook = true, twitter = true, linkedin, email, wrapperProps, } = props;
     const [docMeta, setDocMeta] = (0, react_1.useState)();
     const href = docLoc.href; // assign to local variable to silence `react-hooks/exhaustive-deps`
     (0, react_1.useEffect)(() => {
@@ -43,9 +44,10 @@ const ShareButtons = (props) => {
         (docMeta && (shareButtonsUtils_1.shareButtonTexts[docMeta.lang] || shareButtonsUtils_1.shareButtonTexts[i18n_1.DEFAULT_LANG])) ||
         {};
     const { label, buttonLabel, emailSubject } = txt;
+    const className = (0, classUtils_1.modifiedClass)('ShareButtons', null, (wrapperProps || {}).className);
     if (!docMeta || ssr === 'ssr-only') {
         // Generate SSR markup for hanna-sprinkles to pick up on.
-        return (react_1.default.createElement("div", { className: "ShareButtons", "data-button-types": generateTypeList(facebook, twitter, linkedin, email), "data-label": label, "data-buttonlabel": buttonLabel, "data-emailsubject": emailSubject || undefined }));
+        return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: className, "data-button-types": generateTypeList(facebook, twitter, linkedin, email), "data-label": label, "data-buttonlabel": buttonLabel, "data-emailsubject": emailSubject || undefined })));
     }
     const showTypes = {
         facebook,
@@ -53,7 +55,7 @@ const ShareButtons = (props) => {
         linkedin,
         email,
     };
-    return (react_1.default.createElement("div", { className: "ShareButtons", "aria-label": label, "data-sprinkled": "true" },
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: className, "aria-label": label, "data-sprinkled": "true" }),
         label && react_1.default.createElement("strong", { className: "ShareButtons__label" }, label),
         react_1.default.createElement("ul", { className: "ShareButtons__list" }, shareButtonsUtils_1.shareButtonTypes.map((type) => showTypes[type] && (react_1.default.createElement(ShareButtons__item, { key: type, type: type, label: buttonLabel || '', href: docMeta.hrefs[type] }))))));
 };

package/Sharpie.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { WrapperElmProps } from './utils.js';
 declare const colors: {
     green: number;
     red: number;
@@ -18,6 +19,6 @@ export type SharpieProps = {
     color: SharpieColor;
     tag?: SharpieTag;
     children: ReactNode;
-};
+} & WrapperElmProps;
 export declare const Sharpie: (props: SharpieProps) => JSX.Element;
 export default Sharpie;

package/Sharpie.js

@@ -18,10 +18,10 @@ const tags = {
     s: 1,
 };
 const Sharpie = (props) => {
-    const { color, tag, children } = props;
+    const { color, tag, children, wrapperProps } = props;
     const colorModifier = colors[color] ? color : 'green';
     const Tag = tag && tags[tag] ? tag : 'span';
-    return react_1.default.createElement(Tag, { className: (0, classUtils_1.modifiedClass)('Sharpie', colorModifier) }, children);
+    return (react_1.default.createElement(Tag, Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('Sharpie', colorModifier, (wrapperProps || {}).className) }), children));
 };
 exports.Sharpie = Sharpie;
 exports.default = exports.Sharpie;