@reykjavik/hanna-react 0.10.99 → 0.10.101

package/AccordionList.d.ts

@@ -1,5 +1,5 @@
 import { SeenProp } from './utils/seenEffect.js';
-import { SSRSupportProps } from './utils.js';
+import { SSRSupportProps, WrapperElmProps } from './utils.js';
 export type AccordionListItemProps = {
     title: string | JSX.Element;
     content: string | JSX.Element | undefined;
@@ -19,6 +19,6 @@ export type AccordionListProps = {
     /** Index of those items that should start open (uncontrolled use) */
     defaultOpen?: Array<number>;
     wide?: boolean;
-} & SSRSupportProps & SeenProp;
+} & WrapperElmProps & SSRSupportProps & SeenProp;
 export declare const AccordionList: (props: AccordionListProps) => JSX.Element;
 export default AccordionList;

package/AccordionList.js

@@ -18,7 +18,7 @@ const AccordionListItem = (props) => {
         react_1.default.createElement("div", { id: isBrowser && domid, className: "AccordionList__content", hidden: isBrowser && (!open || itemDisabled) }, content)));
 };
 const AccordionList = (props) => {
-    const { items, ssr, wide, startSeen, defaultOpen } = props;
+    const { items, ssr, wide, startSeen, defaultOpen, wrapperProps } = props;
     const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
     const [open, setOpenArray, mode] = (0, utils_js_1.useMixedControlState)(props, 'open', []);
     const onToggle = (index) => {
@@ -31,7 +31,7 @@ const AccordionList = (props) => {
             return newOpen;
         });
     };
-    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('AccordionList', [wide && 'wide']), ref: ref }, items.map((item, i) => (react_1.default.createElement(AccordionListItem, Object.assign({ key: i }, item, { ssr: ssr, open: open.includes(i), onToggle: () => onToggle(i), defaultOpen: defaultOpen && defaultOpen.includes(i) }))))));
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('AccordionList', [wide && 'wide'], (wrapperProps || {}).className), ref: ref }), items.map((item, i) => (react_1.default.createElement(AccordionListItem, Object.assign({ key: i }, item, { ssr: ssr, open: open.includes(i), onToggle: () => onToggle(i), defaultOpen: defaultOpen && defaultOpen.includes(i) }))))));
 };
 exports.AccordionList = AccordionList;
 exports.default = exports.AccordionList;

package/ActionCards.d.ts

@@ -1,6 +1,7 @@
 import { CardListSummaryProps, TextCardListProps, TextCardProps } from './_abstract/_CardList.js';
 import { SeenProp } from './utils/seenEffect.js';
-export type ActionCardsProps = TextCardListProps & CardListSummaryProps & SeenProp;
+import { WrapperElmProps } from './utils.js';
+export type ActionCardsProps = TextCardListProps & CardListSummaryProps & WrapperElmProps & SeenProp;
 export type ActionCardsItemProps = TextCardProps;
 export declare const ActionCards: (props: ActionCardsProps) => JSX.Element;
 export default ActionCards;

package/ActionCards.js

@@ -8,7 +8,7 @@ const seenEffect_js_1 = require("./utils/seenEffect.js");
 const ActionCards = (props) => {
     const [ref] = (0, seenEffect_js_1.useSeenEffect)(props.startSeen);
     return (react_1.default.createElement("div", { className: "ActionCards", ref: ref },
-        react_1.default.createElement(_CardList_js_1.CardList, Object.assign({}, props, { bemPrefix: "ActionCards" }))));
+        react_1.default.createElement(_CardList_js_1.CardList, Object.assign({ bemPrefix: "ActionCards" }, props, { wrapperProps: undefined }))));
 };
 exports.ActionCards = ActionCards;
 exports.default = exports.ActionCards;

package/Alert.d.ts

@@ -1,7 +1,7 @@
 import { MouseEvent, ReactNode } from 'react';
 import { EitherObj } from '@reykjavik/hanna-utils';
 import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
-import { SSRSupportProps } from './utils.js';
+import { SSRSupportProps, WrapperElmProps } from './utils.js';
 export type AlertI18n = {
     closeLabel: string;
     closeLabelLong?: string;
@@ -42,6 +42,6 @@ export type AlertProps = {
     onClose?(event: MouseEvent): void | boolean;
     /** Callback that fires after the alert has closed/transitoned out */
     onClosed?(): void;
-}>;
+}> & WrapperElmProps<null, 'role' | 'hidden'>;
 export declare const Alert: (props: AlertProps) => JSX.Element;
 export default Alert;

package/Alert.js

@@ -10,18 +10,28 @@ const env_js_1 = require("./utils/env.js");
 const utils_js_1 = require("./utils.js");
 // FIXME: Eventually import from @reykjavik/hanna-css
 const AlertCloseTransitionDuration = 400;
-const useAutoClosing = (autoClose) => {
+const useAutoClosing = (autoClose, props) => {
     const [temp, setTemp] = (0, react_1.useState)(0);
     if (!autoClose) {
         return { autoClosing: false };
     }
-    const thaw = () => setTemp((temp) => temp + 1);
-    const freeze = () => setTemp((temp) => temp - 1);
+    const thaw = (e) => {
+        setTemp((temp) => temp + 1);
+        const handler = props[e.type.startsWith('blur') ? 'onBlur' : 'onMouseLeave'];
+        // @ts-expect-error  (Proper fix ends up as too much code for this extreme edge case)
+        handler && handler(e);
+    };
+    const freeze = (e) => {
+        setTemp((temp) => temp - 1);
+        const handler = props[e.type.startsWith('focus') ? 'onFocus' : 'onMouseEnter'];
+        // @ts-expect-error  (Resolving ends up as too much code for this extreme edge case)
+        handler && handler(e);
+    };
     return {
         autoClosing: temp === 0,
         autoClosingProps: Object.assign({ onMouseEnter: freeze, onMouseLeave: thaw, onFocus: freeze, onBlur: thaw }, (env_js_1.isPreact && {
-            onfocusin: (e) => e.currentTarget !== e.target && freeze(),
-            onfocusout: (e) => e.currentTarget !== e.target && thaw(),
+            onfocusin: (e) => e.currentTarget !== e.target && freeze(e),
+            onfocusout: (e) => e.currentTarget !== e.target && thaw(e),
         })),
     };
 };
@@ -37,7 +47,8 @@ exports.alertTypes = {
     critical: 1,
 };
 const Alert = (props) => {
-    const { type, childrenHTML, children, onClose, closeUrl, closable = !!(onClose || closeUrl != null), ssr, onClosed, } = props;
+    const { type, childrenHTML, children, onClose, // eslint-disable-line deprecation/deprecation
+    closeUrl, closable = !!(onClose || closeUrl != null), ssr, onClosed, wrapperProps, } = props;
     const autoClose = Math.max(props.autoClose || 0, 0);
     const closing = (0, react_1.useRef)();
     const [open, setOpen] = (0, react_1.useState)(!!ssr);
@@ -50,7 +61,7 @@ const Alert = (props) => {
     const closeAlert = (0, react_1.useCallback)((event) => {
         const ret = onClose &&
             // @ts-expect-error  (@deprecated `event` parameter will be removed in v0.11)
-            onClose(event);
+            onClose(event); // eslint-disable-line deprecation/deprecation
         if (ret !== false) {
             setOpen(false);
             if (closing.current) {
@@ -62,7 +73,7 @@ const Alert = (props) => {
             }, AlertCloseTransitionDuration);
         }
     }, [onClose, onClosed]);
-    const { autoClosing, autoClosingProps } = useAutoClosing(autoClose);
+    const { autoClosing, autoClosingProps } = useAutoClosing(autoClose, props);
     (0, react_1.useEffect)(() => {
         if (autoClosing) {
             let autoCloseTimeout;
@@ -81,10 +92,7 @@ const Alert = (props) => {
             };
         }
     }, [closeAlert, autoClosing, autoClose]);
-    return (react_1.default.createElement("div", Object.assign({ className: (0, classUtils_1.modifiedClass)('Alert', [
-            !!exports.alertTypes[type] && type,
-            closable && 'closable',
-        ]), role: "alert", hidden: !open || undefined }, autoClosingProps),
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('Alert', [!!exports.alertTypes[type] && type, closable && 'closable'], (wrapperProps || {}).className), role: "alert", hidden: !open || undefined }, autoClosingProps),
         childrenHTML ? (react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: childrenHTML } })) : (children),
         ' ',
         showCloseButton && (react_1.default.createElement(_Button_js_1.Button, Object.assign({ bem: "Alert__close" }, (closeUrl != null ? { href: closeUrl } : { type: 'button' }), { onClick: (e) => {

package/ArticleCards.d.ts

@@ -1,7 +1,10 @@
 import { ImageCardListProps, ImageCardProps } from './_abstract/_CardList.js';
+import { WrapperElmProps } from './utils.js';
 export type ArticleCardsItemProps = ImageCardProps;
 /** @deprecated Use `ArticleCardsItemProps` instead (Remove in v0.11) */
 export type ArticleCardProps = ArticleCardsItemProps;
-export type ArticleCardsProps = Pick<ImageCardListProps, 'cards' | 'imgPlaceholder'>;
+export type ArticleCardsProps = Pick<ImageCardListProps, 'cards' | 'imgPlaceholder'> & {
+    size?: 'large' | 'normal';
+} & WrapperElmProps<'ul'>;
 export declare const ArticleCards: (props: ArticleCardsProps) => JSX.Element;
 export default ArticleCards;

package/ArticleCards.js

@@ -4,6 +4,6 @@ exports.ArticleCards = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const _CardList_js_1 = require("./_abstract/_CardList.js");
-const ArticleCards = (props) => (react_1.default.createElement(_CardList_js_1.CardList, { bemPrefix: "ArticleCards", standalone: true, cards: props.cards, imgPlaceholder: props.imgPlaceholder || true }));
+const ArticleCards = (props) => (react_1.default.createElement(_CardList_js_1.CardList, { bemPrefix: "ArticleCards", modifier: props.size === 'large' ? 'large' : undefined, standalone: true, cards: props.cards, imgPlaceholder: props.imgPlaceholder || true, wrapperProps: props.wrapperProps }));
 exports.ArticleCards = ArticleCards;
 exports.default = exports.ArticleCards;

package/ArticleCarousel/_ArticleCarouselCard.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ArticleCarouselCard = 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 _Link_js_1 = require("../_abstract/_Link.js");
@@ -15,7 +14,7 @@ const ArticleCarouselCard = (props) => {
     return (react_1.default.createElement("div", { className: "ArticleCarouselCard", "data-color": color && constants_js_1.colorFamilies[color], "data-color-theme": !color ? theme && constants_js_1.themeOptions[theme] : undefined },
         react_1.default.createElement(_Link_js_1.Link, { className: "ArticleCarouselCard__link", href: href, target: target },
             ' ',
-            react_1.default.createElement(_Image_js_1.Image, Object.assign({ placeholder: true, className: (0, classUtils_1.modifiedClass)('ArticleCarouselCard__illustration', photo && 'photo') }, imageProps)),
+            react_1.default.createElement(_Image_js_1.Image, Object.assign({ bem: "ArticleCarouselCard__illustration", modifier: photo && 'photo', placeholder: true }, imageProps)),
             react_1.default.createElement("h3", { className: "ArticleCarouselCard__title" }, title),
             ' '),
         ' ',

package/ArticleCarousel.d.ts

@@ -1,11 +1,11 @@
 import { ArticleCarouselCardProps, ArticleCarouselImageProps } from './ArticleCarousel/_ArticleCarouselCard.js';
 import { SeenProp } from './utils/seenEffect.js';
-import { SSRSupportProps } from './utils.js';
+import { SSRSupportProps, WrapperElmProps } from './utils.js';
 export type ArticleCarouselProps = {
     items: Array<ArticleCarouselCardProps>;
     title?: string;
     moreLabel?: string;
-} & SSRSupportProps & SeenProp;
+} & WrapperElmProps & SSRSupportProps & SeenProp;
 export type { ArticleCarouselCardProps, ArticleCarouselImageProps };
 export declare const ArticleCarousel: (props: ArticleCarouselProps) => JSX.Element;
 export default ArticleCarousel;

package/ArticleCarousel.js

@@ -7,7 +7,7 @@ const _AbstractCarousel_js_1 = require("./_abstract/_AbstractCarousel.js");
 const _ArticleCarouselCard_js_1 = require("./ArticleCarousel/_ArticleCarouselCard.js");
 const ArticleCarousel = (props) => {
     const { title, items, moreLabel, ssr, startSeen } = props;
-    return (react_1.default.createElement(_AbstractCarousel_js_1.AbstractCarousel, { bem: "ArticleCarousel", title: title, items: items, Component: _ArticleCarouselCard_js_1.ArticleCarouselCard, ComponentProps: { moreLabel }, ssr: ssr, startSeen: startSeen }));
+    return (react_1.default.createElement(_AbstractCarousel_js_1.AbstractCarousel, { bem: "ArticleCarousel", title: title, items: items, Component: _ArticleCarouselCard_js_1.ArticleCarouselCard, ComponentProps: { moreLabel }, ssr: ssr, startSeen: startSeen, wrapperProps: props.wrapperProps }));
 };
 exports.ArticleCarousel = ArticleCarousel;
 exports.default = exports.ArticleCarousel;

package/ArticleMeta.d.ts

@@ -1,3 +1,4 @@
+import { WrapperElmProps } from './utils.js';
 export type ArticleMetaItem = {
     label: string;
     href?: string;
@@ -5,6 +6,6 @@ export type ArticleMetaItem = {
 export type ArticleMetaProps = {
     items: Array<ArticleMetaItem>;
     small?: boolean;
-};
+} & WrapperElmProps;
 export declare const ArticleMeta: (props: ArticleMetaProps) => JSX.Element | null;
 export default ArticleMeta;

package/ArticleMeta.js

@@ -6,11 +6,11 @@ const react_1 = tslib_1.__importStar(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const _Link_js_1 = require("./_abstract/_Link.js");
 const ArticleMeta = (props) => {
-    const { items, small } = props;
+    const { items, small, wrapperProps } = props;
     if (items.length === 0) {
         return null;
     }
-    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('ArticleMeta', small && 'small') }, items.map(({ label, href }, i) => (react_1.default.createElement(react_1.Fragment, { key: i },
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('ArticleMeta', small && 'small', (wrapperProps || {}).className) }), items.map(({ label, href }, i) => (react_1.default.createElement(react_1.Fragment, { key: i },
         href == null ? (react_1.default.createElement("span", { className: "ArticleMeta__item" },
             " ",
             label,

package/Attention.d.ts

@@ -1,7 +1,8 @@
 import { ReactNode } from 'react';
+import { WrapperElmProps } from './utils.js';
 export type AttentionProps = {
     small?: boolean;
     children: ReactNode;
-};
+} & WrapperElmProps;
 export declare const Attention: (props: AttentionProps) => JSX.Element;
 export default Attention;

package/Attention.js

@@ -4,6 +4,9 @@ exports.Attention = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
-const Attention = (props) => (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('Attention', props.small && 'small') }, props.children));
+const Attention = (props) => {
+    const { small, children, wrapperProps } = props;
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('Attention', small && 'small', (wrapperProps || {}).className) }), children));
+};
 exports.Attention = Attention;
 exports.default = exports.Attention;

package/BasicTable.d.ts

@@ -1,6 +1,7 @@
 import { TableProps } from '@hugsmidjan/react/Table';
 import { EitherObj } from '@reykjavik/hanna-utils';
 import { SeenProp } from './utils/seenEffect.js';
+import { MissingWrapperElmProps } from './utils.js';
 export type BasicTableProps = {
     compact?: boolean;
     type?: 'text' | 'number';
@@ -9,6 +10,6 @@ export type BasicTableProps = {
     fullWidth?: boolean;
 }, {
     align?: 'right';
-}> & SeenProp & Omit<TableProps, 'className' | 'children'>;
+}> & MissingWrapperElmProps & SeenProp & Omit<TableProps, 'className' | 'children'>;
 export declare const BasicTable: (props: BasicTableProps) => JSX.Element;
 export default BasicTable;

package/BgBox.d.ts

@@ -1,8 +1,9 @@
 import { ReactNode } from 'react';
 import { EffectProp, SeenProp } from './utils/seenEffect.js';
+import { WrapperElmProps } from './utils.js';
 export type BgBoxProps = {
     className?: string;
     children: ReactNode;
-} & SeenProp & EffectProp;
+} & WrapperElmProps & SeenProp & EffectProp;
 export declare const BgBox: (props: BgBoxProps) => JSX.Element;
 export default BgBox;

package/BgBox.js

@@ -6,9 +6,11 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const seenEffect_js_1 = require("./utils/seenEffect.js");
 const BgBox = (props) => {
-    const { className, children, effectType, startSeen } = props;
+    const { className, children, effectType, startSeen, wrapperProps } = props;
     const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
-    return (react_1.default.createElement("div", Object.assign({ className: (0, classUtils_1.modifiedClass)('BgBox', undefined, className), ref: ref }, (0, seenEffect_js_1.getEffectAttr)(effectType)), children));
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('BgBox', undefined, 
+        // Prefer `className` over `wrapperProps.className`
+        className || (wrapperProps || {}).className), ref: ref }, (0, seenEffect_js_1.getEffectAttr)(effectType)), children));
 };
 exports.BgBox = BgBox;
 exports.default = exports.BgBox;

package/Bling.d.ts

@@ -1,4 +1,5 @@
 import { BlingType } from '@reykjavik/hanna-utils/assets';
+import { WrapperElmProps } from './utils.js';
 declare const colors: {
     tertiary: boolean;
     secondary: boolean;
@@ -76,6 +77,6 @@ export type BlingProps = {
     type?: undefined;
     /** Custom SVG URL to load (use sparingly) */
     blingUrl: string;
-});
+}) & WrapperElmProps<null, 'data-bling-type' | 'data-bling-image'>;
 export declare const Bling: (props: BlingProps) => JSX.Element;
 export default Bling;

package/Bling.js

@@ -34,16 +34,18 @@ const parentOffset = {
     bottom: true,
 };
 const Bling = (props) => {
-    const { align, vertical, color, overlay, type, blingUrl, parent, className } = props;
+    const { align, vertical, color, overlay, type, blingUrl, parent, className, wrapperProps, } = props;
     const imageUrl = type ? (0, assets_1.getBlingUrl)(type) : blingUrl;
     const inlineSvg = (0, useGetSVGtext_js_1.useGetSVGtext)(imageUrl);
-    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('Bling', [
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('Bling', [
             'align--' + (align && align in aligns ? align : 'left'),
             vertical && vertical in valigns && 'vertical--' + vertical,
             color && color in colors && 'color--' + color,
             parent && parent in parentOffset && 'parent--' + parent,
             overlay && 'overlay',
-        ], className), "data-bling-type": type, "data-bling-image": !type ? blingUrl : undefined, dangerouslySetInnerHTML: inlineSvg && { __html: inlineSvg.code } }));
+        ], 
+        // Prefer `className` over `wrapperProps.className`
+        className || (wrapperProps || {}).className), "data-bling-type": type, "data-bling-image": !type ? blingUrl : undefined, dangerouslySetInnerHTML: inlineSvg && { __html: inlineSvg.code } })));
 };
 exports.Bling = Bling;
 exports.default = exports.Bling;

package/BlockBreak.js

@@ -6,6 +6,7 @@ const react_1 = tslib_1.__importDefault(require("react"));
 /*
   TODO: Add story
 */
+// NOTE: This component is too low-level to justify `wrapperProps`
 const BlockBreak = () => react_1.default.createElement("div", { className: "BlockBreak" });
 exports.BlockBreak = BlockBreak;
 exports.default = exports.BlockBreak;

package/BreadCrumbs.d.ts

@@ -1,4 +1,5 @@
 import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
+import { WrapperElmProps } from './utils.js';
 export type BreadCrumb = {
     href?: string;
     label: string;
@@ -11,6 +12,6 @@ export type BreadCrumbsProps = {
     title?: string;
     lang?: string;
     trail: BreadCrumbTrail;
-};
+} & WrapperElmProps<null, 'aria-label'>;
 export declare const BreadCrumbs: (props: BreadCrumbsProps) => JSX.Element | null;
 export default BreadCrumbs;

package/BreadCrumbs.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BreadCrumbs = exports.defaultBreadCrumbsTexts = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const _Link_js_1 = require("./_abstract/_Link.js");
 exports.defaultBreadCrumbsTexts = {
@@ -15,14 +16,14 @@ const BreadCrumbs__item = (props) => {
     return link.href != null ? (react_1.default.createElement(_Link_js_1.Link, { className: "BreadCrumbs__item", href: link.href, "aria-current": current || undefined }, link.label)) : (react_1.default.createElement("span", { className: "BreadCrumbs__item", "aria-current": current || undefined }, link.label));
 };
 const BreadCrumbs = (props) => {
-    const { trail, title, lang } = props;
+    const { trail, title, lang, wrapperProps } = props;
     const texts = (0, i18n_1.getTexts)({ texts: title ? { title } : undefined, lang }, exports.defaultBreadCrumbsTexts);
     if (trail.length === 0) {
         return null;
     }
     const ancestors = trail.slice(0, -1);
     const current = trail[trail.length - 1];
-    return (react_1.default.createElement("nav", { className: "BreadCrumbs", "aria-label": texts.title },
+    return (react_1.default.createElement("nav", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('BreadCrumbs', null, (wrapperProps || {}).className), "aria-label": texts.title }),
         react_1.default.createElement("span", { className: "BreadCrumbs__title" },
             texts.title,
             ":"),

package/ButtonBack.js

@@ -4,6 +4,8 @@ exports.ButtonBack = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const _Button_js_1 = require("./_abstract/_Button.js");
+// NOTE: As a `_abstract/_Button.tsx`-derived component, all `<button/>` and
+// `<a/>` props are allowed directly, so adding `wrapperProps` makes no sense.
 const ButtonBack = (props) => (react_1.default.createElement(_Button_js_1.Button, Object.assign({ bem: "ButtonBack" }, props)));
 exports.ButtonBack = ButtonBack;
 exports.default = exports.ButtonBack;

package/ButtonBar.d.ts

@@ -1,17 +1,18 @@
 import { ReactNode } from 'react';
+import { WrapperElmProps } from './utils.js';
 export type ButtonBarProps = {
     align?: 'right';
     children: ReactNode;
-};
+} & WrapperElmProps;
 export declare const ButtonBar: {
     (props: ButtonBarProps): JSX.Element;
     /** A Splitter token to use directly inside <ButtonBar/> wrappers */
-    Split(): JSX.Element;
+    Split({ wrapperProps }: WrapperElmProps): JSX.Element;
 };
 /**
  * @deprecated Prefer using `ButtonBar.Split` instead.
  *
  * (This export token is only to aid discovery.)
  */
-export declare const ButtonBar__split: () => JSX.Element;
+export declare const ButtonBar__split: ({ wrapperProps }: WrapperElmProps) => JSX.Element;
 export default ButtonBar;

package/ButtonBar.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 ButtonBar = (props) => {
-    const { align, children } = props;
-    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('ButtonBar', align === 'right' && 'align--right') }, children));
+    const { align, children, wrapperProps } = props;
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('ButtonBar', align === 'right' && 'align--right', (wrapperProps || {}).className) }), children));
 };
 exports.ButtonBar = ButtonBar;
 /** A Splitter token to use directly inside <ButtonBar/> wrappers */
-exports.ButtonBar.Split = () => react_1.default.createElement("span", { className: "ButtonBar__split" });
+exports.ButtonBar.Split = ({ wrapperProps }) => (react_1.default.createElement("span", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('ButtonBar__split', null, (wrapperProps || {}).className) })));
 /**
  * @deprecated Prefer using `ButtonBar.Split` instead.
  *

package/ButtonPrimary.js

@@ -4,6 +4,8 @@ exports.ButtonPrimary = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const _Button_js_1 = require("./_abstract/_Button.js");
+// NOTE: As a `_abstract/_Button.tsx`-derived component, all `<button/>` and
+// `<a/>` props are allowed directly, so adding `wrapperProps` makes no sense.
 const ButtonPrimary = (props) => (react_1.default.createElement(_Button_js_1.Button, Object.assign({ bem: "ButtonPrimary" }, props)));
 exports.ButtonPrimary = ButtonPrimary;
 exports.default = exports.ButtonPrimary;

package/ButtonSecondary.js

@@ -4,6 +4,8 @@ exports.ButtonSecondary = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const _Button_js_1 = require("./_abstract/_Button.js");
+// NOTE: As a `_abstract/_Button.tsx`-derived component, all `<button/>` and
+// `<a/>` props are allowed directly, so adding `wrapperProps` makes no sense.
 const ButtonSecondary = (props) => react_1.default.createElement(_Button_js_1.Button, Object.assign({ bem: "ButtonSecondary" }, props));
 exports.ButtonSecondary = ButtonSecondary;
 exports.default = exports.ButtonSecondary;

package/ButtonTertiary.js

@@ -12,6 +12,8 @@ const icons = {
     none: 'none',
     'go-back': 'go-back',
 };
+// NOTE: As a `_abstract/_Button.tsx`-derived component, all `<button/>` and
+// `<a/>` props are allowed directly, so adding `wrapperProps` makes no sense.
 const ButtonTertiary = (props) => {
     const { size = 'normal', icon = 'none' } = props;
     return react_1.default.createElement(_Button_js_1.Button, Object.assign({ bem: "ButtonTertiary" }, props, { size: sizes[size], icon: icons[icon] }));

package/CHANGELOG.md

@@ -4,12 +4,25 @@
 
 - ... <!-- Add new lines here. -->
 
-## 0.10.97 – 0.10.99
+## 0.10.101
+
+_2023-08-28_
+
+- feat: Add prop `wrapperProps` to almost all components — excluding a few
+  low-level ones that already accept raw HTML props directly (e.g. most
+  button-like compoments).  
+  _(Exeptions: `BasicTable`, `Modal` and `CarouselStepper`. They'll also get a
+  `wrapperProps` prop in a near-future release.)_
+- feat: Deprecate prop, `wrapperRef` on all `FormField` related components
+- fix: Export `CheckboxButtonProps` from `CheckboxButton`, deprecate old type
+
+## 0.10.97 – 0.10.100
 
 _2023-08-22_
 
 - feat: Add prop `meta` to items of `ActionCards`
 - feat: Add prop `summary` to items of `ArticleCards` and `ImageCards`
+- feat: Add prop `size="large"` to `ArticleCards`
 - feat: Allow `JSX.Element` as item `meta` for accepting `*Cards` components
 - feat: Allow `JSX.Element` as item `summary` for all `*Cards` components
 - feat: Expand `MainMenuItemList` to allow components as custom

package/CarouselStepper.d.ts

@@ -1,4 +1,5 @@
 import { Props } from '@hugsmidjan/react/CarouselStepper';
-type CarouselStepperProps = Omit<Props, 'bem' | 'modifier'>;
+import { MissingWrapperElmProps } from './utils.js';
+type CarouselStepperProps = Omit<Props, 'bem' | 'modifier'> & MissingWrapperElmProps;
 export declare const CarouselStepper: (props: CarouselStepperProps) => JSX.Element;
 export default CarouselStepper;

package/CenterColumn.d.ts

@@ -1,7 +1,8 @@
 import { ReactNode } from 'react';
 import { EffectProp, SeenProp } from './utils/seenEffect.js';
+import { WrapperElmProps } from './utils.js';
 export type CenterColumnProps = {
     children: ReactNode;
-} & SeenProp & EffectProp;
+} & SeenProp & WrapperElmProps & EffectProp;
 export declare const CenterColumn: (props: CenterColumnProps) => JSX.Element;
 export default CenterColumn;

package/CenterColumn.js

@@ -3,10 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CenterColumn = 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 = tslib_1.__importDefault(require("./SeenEffect.js"));
 const CenterColumn = (props) => {
-    const { children, startSeen, effectType } = props;
-    return startSeen == null ? (react_1.default.createElement("div", { className: "CenterColumn" }, children)) : (react_1.default.createElement(SeenEffect_js_1.default, { className: "CenterColumn", startSeen: startSeen, effectType: effectType }, children));
+    const { children, startSeen, effectType, wrapperProps } = props;
+    const className = (0, classUtils_1.modifiedClass)('CenterColumn', null, (wrapperProps || {}).className);
+    return startSeen == null ? (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: className }), children)) : (react_1.default.createElement(SeenEffect_js_1.default, Object.assign({}, wrapperProps, { className: className, startSeen: startSeen, effectType: effectType }), children));
 };
 exports.CenterColumn = CenterColumn;
 exports.default = exports.CenterColumn;

package/CheckboxButton.d.ts

@@ -1,4 +1,6 @@
 import { TogglerInputProps } from './_abstract/_TogglerInput.js';
-export type CheckboxProps = TogglerInputProps;
-export declare const CheckboxButton: (props: CheckboxProps) => JSX.Element;
+/** @deprecated Use `CheckboxButtonProps` instead  (Will be removed in v0.11) */
+export type CheckboxProps = CheckboxButtonProps;
+export type CheckboxButtonProps = TogglerInputProps;
+export declare const CheckboxButton: (props: CheckboxButtonProps) => JSX.Element;
 export default CheckboxButton;

package/CheckboxButtonsGroup.js

@@ -6,10 +6,10 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const _TogglerGroupField_js_1 = require("./_abstract/_TogglerGroupField.js");
 const CheckboxButton_js_1 = tslib_1.__importDefault(require("./CheckboxButton.js"));
 const CheckboxButtonsGroup = (props) => {
-    if (props.layout) {
+    if (props.layout /* eslint-disable-line deprecation/deprecation */) {
         console.warn('`CheckboxButtonsGroupProps.layout` is deprecated.');
     }
-    if (props.columns) {
+    if (props.columns /* eslint-disable-line deprecation/deprecation */) {
         console.warn('`CheckboxButtonsGroupProps.columns` is deprecated.');
     }
     return (react_1.default.createElement(_TogglerGroupField_js_1.TogglerGroupField, Object.assign({}, props, { bem: "CheckboxButtonsGroup", Toggler: CheckboxButton_js_1.default })));

package/CityBlock.d.ts

@@ -4,6 +4,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 types: {
     largebox: boolean;
     largeimage: boolean;
@@ -16,6 +17,6 @@ export type CityBlockProps = {
     illustration: Illustration;
 }, {
     image: ImageProps;
-}> & SeenProp;
+}> & WrapperElmProps & SeenProp;
 export declare const CityBlock: (props: CityBlockProps) => JSX.Element;
 export default CityBlock;

package/CityBlock.js

@@ -17,7 +17,7 @@ const CityBlock = (props) => {
     const imageProps = props.illustration != null
         ? { src: (0, assets_1.getIllustrationUrl)(props.illustration) }
         : props.image;
-    return (react_1.default.createElement(_Block_js_1.Block, { bem: "CityBlock", modifier: modifier, content: props.content, image: imageProps, startSeen: props.startSeen }));
+    return (react_1.default.createElement(_Block_js_1.Block, { bem: "CityBlock", modifier: modifier, content: props.content, image: imageProps, wrapperProps: props.wrapperProps, startSeen: props.startSeen }));
 };
 exports.CityBlock = CityBlock;
 exports.default = exports.CityBlock;

package/ContactBubble.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
-import { SSRSupportProps } from './utils.js';
+import { SSRSupportProps, WrapperElmProps } from './utils.js';
 export type ContactBubbleI18n = {
     lang?: string;
     openBtn: string;
@@ -47,7 +47,7 @@ export type ContactBubbleProps = {
     alwaysShow?: boolean;
     texts?: ContactBubbleI18n;
     lang?: string;
-} & SSRSupportProps & ({
+} & SSRSupportProps & WrapperElmProps & ({
     open?: boolean;
     onToggle: (isOpen: boolean) => void;
 } | {