@reykjavik/hanna-react 0.10.99 → 0.10.101

package/ContactBubble.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContactBubble = exports.ensureIcon = exports.defaultTexts = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const focusElm_1 = require("@hugsmidjan/qj/focusElm");
 const hooks_1 = require("@hugsmidjan/react/hooks");
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const _Link_js_1 = require("./_abstract/_Link.js");
 const breakOnNL_js_1 = require("./_abstract/breakOnNL.js");
@@ -37,14 +37,15 @@ const ensureIcon = (maybeIcon) => maybeIcon && icons[maybeIcon]
     : undefined;
 exports.ensureIcon = ensureIcon;
 const ContactBubble = (props) => {
-    const { title, links, onToggle, alwaysShow } = props;
+    const { title, links, onToggle, alwaysShow, wrapperProps = {} } = props;
     const txt = (0, i18n_1.getTexts)(props, exports.defaultTexts);
     const useLocalState = props.open == null;
     const [localOpen, setLocalOpen] = (0, react_1.useState)(false);
     const open = useLocalState ? localOpen : props.open;
     const isBrowser = (0, utils_js_1.useIsBrowserSide)(props.ssr);
     const domid = (0, hooks_1.useDomid)();
-    const wrapperRef = (0, react_1.useRef)(null);
+    const _wrapperRef = (0, react_1.useRef)(null);
+    const wrapperRef = wrapperProps.ref || _wrapperRef;
     const { openBubble, closeBubble } = (0, react_1.useMemo)(() => ({
         openBubble: () => {
             useLocalState && setLocalOpen(true);
@@ -121,7 +122,7 @@ const ContactBubble = (props) => {
     if (links.length === 0) {
         return null;
     }
-    const menu = (react_1.default.createElement("div", { className: "ContactBubble", id: isBrowser && domid, hidden: isBrowser && !open, "data-always-show": alwaysShow || undefined, "data-sprinkled": isBrowser },
+    const menu = (react_1.default.createElement("div", Object.assign({}, props.wrapperProps, { className: (0, classUtils_1.modifiedClass)('ContactBubble', null, wrapperProps.className), id: isBrowser && domid, hidden: isBrowser && !open, "data-always-show": alwaysShow || undefined, "data-sprinkled": isBrowser }),
         react_1.default.createElement("h2", { className: "ContactBubble__title" }, title || txt.openBtn),
         react_1.default.createElement("ul", { className: "ContactBubble__list" }, links.map((linkInfo, i) => {
             const { href, label, extraLabel, target, onClick } = linkInfo;

package/ContentArticle.d.ts

@@ -3,6 +3,7 @@ import { SeenProp } from './utils/seenEffect.js';
 import { ArticleMetaProps } from './ArticleMeta.js';
 import { ContentImageProps } from './ContentImage.js';
 import { RelatedLinksProps } from './RelatedLinks.js';
+import { WrapperElmProps } from './utils.js';
 export type ContentArticleProps = {
     /** Date, author, etc. */
     meta?: ArticleMetaProps['items'];
@@ -11,6 +12,6 @@ export type ContentArticleProps = {
     topImage?: ContentImageProps;
     body: ReactNode;
     relatedLinks?: RelatedLinksProps;
-} & SeenProp;
+} & SeenProp & WrapperElmProps;
 export declare const ContentArticle: (props: ContentArticleProps) => JSX.Element;
 export default ContentArticle;

package/ContentArticle.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContentArticle = 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 ArticleMeta_js_1 = tslib_1.__importDefault(require("./ArticleMeta.js"));
 const ContentImage_js_1 = tslib_1.__importDefault(require("./ContentImage.js"));
@@ -11,10 +12,10 @@ const RelatedLinks_js_1 = tslib_1.__importDefault(require("./RelatedLinks.js"));
 const TextBlock_js_1 = tslib_1.__importDefault(require("./TextBlock.js"));
 const VSpacer_js_1 = tslib_1.__importDefault(require("./VSpacer.js"));
 const ContentArticle = (props) => {
-    const { relatedLinks } = props;
+    const { relatedLinks, wrapperProps } = props;
     const [ref] = (0, seenEffect_js_1.useSeenEffect)(props.startSeen);
     const headingElm = (react_1.default.createElement(Heading_js_1.default, { forceH1: props.headlineTag === 'h1' }, props.headline));
-    return (react_1.default.createElement("div", { className: "ContentArticle", ref: ref },
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('ContentArticle', null, (wrapperProps || {}).className), ref: ref }),
         props.meta ? (react_1.default.createElement("div", { className: "ContentArticle__header" },
             headingElm,
             react_1.default.createElement(ArticleMeta_js_1.default, { items: props.meta }))) : (headingElm),

package/ContentImage.d.ts

@@ -1,8 +1,9 @@
 import { ImageProps } from './_abstract/_Image.js';
+import { WrapperElmProps } from './utils.js';
 export type ContentImageProps = {
     image?: ImageProps;
     caption?: string | JSX.Element;
     credit?: string | JSX.Element;
-};
+} & WrapperElmProps;
 export declare const ContentImage: (props: ContentImageProps) => JSX.Element;
 export default ContentImage;

package/ContentImage.js

@@ -3,10 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContentImage = 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 ContentImage = (props) => {
-    const { image, caption, credit } = props;
-    return (react_1.default.createElement("figure", { className: "ContentImage" },
+    const { image, caption, credit, wrapperProps } = props;
+    return (react_1.default.createElement("figure", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('ContentImage', null, (wrapperProps || {}).className) }),
         (caption || credit) && (react_1.default.createElement("figcaption", { className: "ContentImage__caption" },
             caption && react_1.default.createElement("span", { className: "ContentImage__text" },
                 " ",
@@ -17,7 +18,7 @@ const ContentImage = (props) => {
                 " ",
                 credit,
                 " "))),
-        react_1.default.createElement(_Image_js_1.Image, Object.assign({ className: "ContentImage__image" }, image))));
+        react_1.default.createElement(_Image_js_1.Image, Object.assign({ bem: "ContentImage__image" }, image))));
 };
 exports.ContentImage = ContentImage;
 exports.default = exports.ContentImage;

package/Datepicker.js

@@ -4,7 +4,6 @@ exports.Datepicker = exports.getDateDiff = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const hooks_1 = require("@hugsmidjan/react/hooks");
-const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 // For more info on localization see: https://stackoverflow.com/questions/54399084/change-locale-in-react-datepicker/58306958#58306958
 const index_js_1 = tslib_1.__importDefault(require("date-fns/locale/is/index.js"));
 const index_js_2 = tslib_1.__importDefault(require("date-fns/locale/pl/index.js"));
@@ -63,18 +62,19 @@ const i18n = {
  * Internally, this component uses the [`react-datepicker`](https://reactdatepicker.com/) component.
  */
 const Datepicker = (props) => {
-    const { className, id, label, hideLabel, assistText, disabled, readOnly, invalid, errorMessage, required, reqText, placeholder, small, localeCode = 'is', dateFormat = 'd.M.yyyy', name, startDate, endDate, minDate, maxDate, isStartDate = false, isEndDate = false, onChange, datepickerExtraProps, ssr, inputRef, isoMode, } = props;
-    const [value, setValue] = utils_js_1.useMixedControlState.raw(props.value || props.initialDate, props.defaultValue, 'value');
+    const { placeholder, localeCode = 'is', dateFormat = 'd.M.yyyy', name, startDate, endDate, minDate, maxDate, isStartDate = false, isEndDate = false, onChange, datepickerExtraProps, inputRef, isoMode, fieldWrapperProps, } = (0, FormField_js_1.groupFormFieldWrapperProps)(props);
+    const [value, setValue] = utils_js_1.useMixedControlState.raw(props.value || props.initialDate, // eslint-disable-line deprecation/deprecation
+    props.defaultValue, 'value');
     /*
       TODO: Revert to this simpler pattern once we hit v0.11
       and `props.initialDate` is removed:
     */
     // const [value, setValue] = useMixedControlState(props, 'value');
-    const domid = (0, hooks_1.useDomid)(id);
+    const domid = (0, hooks_1.useDomid)(props.id);
     const txts = i18n[localeCode] || {};
     const filled = !!value;
     const empty = !filled && !placeholder;
-    return (react_1.default.createElement(FormField_js_1.FormField, { className: (0, classUtils_1.modifiedClass)('Datepicker', [], className), ssr: ssr, label: label, small: small, assistText: assistText, hideLabel: hideLabel, invalid: invalid, required: required, reqText: reqText, disabled: disabled, readOnly: readOnly, filled: filled, empty: empty, errorMessage: errorMessage, renderInput: (className, inputProps, addFocusProps) => {
+    return (react_1.default.createElement(FormField_js_1.FormField, Object.assign({ extraClassName: "Datepicker", filled: filled, empty: empty }, fieldWrapperProps, { renderInput: (className, inputProps, addFocusProps) => {
             return (react_1.default.createElement("div", Object.assign({ className: className.input, onClick: ({ target, currentTarget }) => { var _a; return target === currentTarget && ((_a = currentTarget.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus()); }, ref: inputRef &&
                     ((elm) => {
                         inputRef.current =
@@ -104,7 +104,7 @@ const Datepicker = (props) => {
                     // TODO: Implement this
                     // selectsRange
                     minDate: minDate, maxDate: maxDate, startDate: startDate, endDate: endDate, selectsStart: isStartDate, selectsEnd: isEndDate, formatWeekDay: (weekday) => weekday.charAt(0).toUpperCase(), showYearDropdown: true, scrollableYearDropdown: true, yearDropdownItemNumber: 15, showMonthDropdown: true }, inputProps, txts, datepickerExtraProps))));
-        } }));
+        } })));
 };
 exports.Datepicker = Datepicker;
 exports.default = exports.Datepicker;

package/ExtraLinks.d.ts

@@ -1,5 +1,6 @@
 import { CardListProps, TextCardProps } from './_abstract/_CardList.js';
 import { SeenProp } from './utils/seenEffect.js';
+import { WrapperElmProps } from './utils.js';
 export type RelatedLink = {
     href: string;
     label: string;
@@ -13,6 +14,6 @@ type RelatedProps = {
 export type ExtraLinksCardProps = Omit<TextCardProps, 'meta'>;
 export type ExtraLinksProps = CardListProps<ExtraLinksCardProps> & RelatedProps & {
     className?: string;
-} & SeenProp;
+} & WrapperElmProps & SeenProp;
 export declare const ExtraLinks: (props: ExtraLinksProps) => JSX.Element;
 export default ExtraLinks;

package/ExtraLinks.js

@@ -16,10 +16,12 @@ const ExtraLinks__related = (props) => {
                 react_1.default.createElement(_Link_js_1.Link, { className: (0, classUtils_1.modifiedClass)('ExtraLinks__related__link', type), href: href, target: blank ? '_blank' : '', rel: blank ? 'noreferrer noopener' : '' }, label)))))));
 };
 const ExtraLinks = (props) => {
-    const { relatedTitle, relatedLinks, className, startSeen } = props, cardListProps = tslib_1.__rest(props, ["relatedTitle", "relatedLinks", "className", "startSeen"]);
+    const { relatedTitle, relatedLinks, className, startSeen, wrapperProps } = props, cardListProps = tslib_1.__rest(props, ["relatedTitle", "relatedLinks", "className", "startSeen", "wrapperProps"]);
     const hasRelated = !!(relatedLinks && relatedLinks.length);
     const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
-    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('ExtraLinks', hasRelated && 'related', className), ref: ref },
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('ExtraLinks', hasRelated && 'related', 
+        // Prefer `className` over `wrapperProps.className`
+        className || (wrapperProps || {}).className), ref: ref }),
         react_1.default.createElement("div", { className: "ExtraLinks__main" },
             react_1.default.createElement(_CardList_js_1.CardList, Object.assign({}, cardListProps, { bemPrefix: "ExtraLinks" }))),
         hasRelated && (react_1.default.createElement(ExtraLinks__related, { relatedTitle: relatedTitle, relatedLinks: relatedLinks }))));

package/FeatureList.d.ts

@@ -1,5 +1,6 @@
 import { Efnistakn } from '@reykjavik/hanna-utils/assets';
 import { SeenProp } from './utils/seenEffect.js';
+import { WrapperElmProps } from './utils.js';
 export type FeatureListProps = {
     title: string;
     features: Array<{
@@ -7,6 +8,6 @@ export type FeatureListProps = {
         iconUrl?: string;
         name: string;
     }>;
-} & SeenProp;
+} & WrapperElmProps & SeenProp;
 export declare const FeatureList: (props: FeatureListProps) => JSX.Element;
 export default FeatureList;

package/FeatureList.js

@@ -3,15 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FeatureList = 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 Bling_js_1 = tslib_1.__importDefault(require("./Bling.js"));
 const FeatureList = (props) => {
-    const { title, features, startSeen } = props;
+    const { title, features, startSeen, wrapperProps } = props;
     const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
     const _features = features.length ? features : [{ name: '...' }];
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(Bling_js_1.default, { type: "snake-large", align: "left", vertical: "down-ish" }),
-        react_1.default.createElement("div", { className: "FeatureList", ref: ref },
+        react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('FeatureList', null, (wrapperProps || {}).className), ref: ref }),
             react_1.default.createElement("h2", { className: "FeatureList__title" }, title),
             react_1.default.createElement("ul", { className: "FeatureList__list" }, _features.map(({ name, icon, iconUrl }, i) => (react_1.default.createElement("li", { key: i, className: "FeatureList__feature", style: iconUrl
                     ? { '--efnistakn': `url("${iconUrl}")` }

package/FieldGroup.d.ts

@@ -1,10 +1,11 @@
 import { ReactNode } from 'react';
+import { WrapperElmProps } from './utils.js';
 export type FieldGroupProps = {
     legend: string;
     disabled?: boolean;
     small?: boolean;
     className?: string;
     children: ReactNode;
-};
+} & WrapperElmProps<'fieldset'>;
 export declare const FieldGroup: (props: FieldGroupProps) => JSX.Element;
 export default FieldGroup;

package/FieldGroup.js

@@ -5,8 +5,10 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const FieldGroup = (props) => {
-    const { legend, children, className, disabled, small } = props;
-    return (react_1.default.createElement("fieldset", { className: (0, classUtils_1.modifiedClass)('FieldGroup', small && 'small', className), disabled: disabled },
+    const { legend, children, className, disabled, small, wrapperProps } = props;
+    return (react_1.default.createElement("fieldset", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('FieldGroup', small && 'small', 
+        // Prefer `className` over `wrapperProps.className`
+        className || (wrapperProps || {}).className), disabled: disabled }),
         react_1.default.createElement("legend", { className: "FieldGroup__legend" }, legend),
         children));
 };

package/FileInput.d.ts

@@ -1,6 +1,6 @@
 import { FileListProps } from './FileInput/_FileInputFileList.js';
 import { FormFieldWrappingProps } from './FormField.js';
-export type FileInputProps = {
+export type FileInputProps = FormFieldWrappingProps & {
     /**
      * Flags if the input should accept multiple, or just a single file at a time.
      *
@@ -43,6 +43,6 @@ export type FileInputProps = {
         accept?: string;
         multiple?: boolean;
     };
-} & FormFieldWrappingProps;
+};
 export declare const FileInput: (props: FileInputProps) => JSX.Element;
 export default FileInput;

package/FileInput.js

@@ -9,7 +9,7 @@ const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const ReactDropzone_js_1 = require("./_mixed_export_resolution_/ReactDropzone.js");
 const _FileInput_utils_js_1 = require("./FileInput/_FileInput.utils.js");
 const _FileInputFileList_js_1 = require("./FileInput/_FileInputFileList.js");
-const FormField_js_1 = tslib_1.__importDefault(require("./FormField.js"));
+const FormField_js_1 = tslib_1.__importStar(require("./FormField.js"));
 const defaultRemoveFileText = {
     is: 'Fjarlægja',
     en: 'Remove',
@@ -31,8 +31,13 @@ const arrayToFileList = (arr) => {
     return fileList.files;
 };
 const FileInput = (props) => {
-    const { className, id, label, hideLabel, dropzoneProps = { multiple: true }, multiple = dropzoneProps.multiple, accept, dropzoneText, lang = i18n_1.DEFAULT_LANG, removeFileText = defaultRemoveFileText[lang] || defaultRemoveFileText[i18n_1.DEFAULT_LANG], assistText, disabled, invalid, errorMessage, required, reqText, FileList = _FileInputFileList_js_1.DefaultFileList, onFilesUpdated = () => undefined, onFilesRejected, showFileSize, showImagePreviews, value = [] } = props, inputElementProps = tslib_1.__rest(props, ["className", "id", "label", "hideLabel", "dropzoneProps", "multiple", "accept", "dropzoneText", "lang", "removeFileText", "assistText", "disabled", "invalid", "errorMessage", "required", "reqText", "FileList", "onFilesUpdated", "onFilesRejected", "showFileSize", "showImagePreviews", "value"]);
-    const domid = (0, hooks_1.useDomid)(id);
+    var _a, _b, _c;
+    const lang = props.lang || i18n_1.DEFAULT_LANG;
+    const _d = (0, FormField_js_1.groupFormFieldWrapperProps)(props), { dropzoneProps, // eslint-disable-line deprecation/deprecation
+    multiple = (_b = (_a = props.dropzoneProps) === null || _a === void 0 ? void 0 : _a.multiple) !== null && _b !== void 0 ? _b : true, // eslint-disable-line deprecation/deprecation
+    accept = (_c = props.dropzoneProps) === null || _c === void 0 ? void 0 : _c.accept, // eslint-disable-line deprecation/deprecation
+    dropzoneText, removeFileText = defaultRemoveFileText[lang] || defaultRemoveFileText[i18n_1.DEFAULT_LANG], FileList = _FileInputFileList_js_1.DefaultFileList, onFilesUpdated = () => undefined, onFilesRejected, showFileSize, showImagePreviews, value = [], fieldWrapperProps } = _d, inputElementProps = tslib_1.__rest(_d, ["dropzoneProps", "multiple", "accept", "dropzoneText", "removeFileText", "FileList", "onFilesUpdated", "onFilesRejected", "showFileSize", "showImagePreviews", "value", "fieldWrapperProps"]);
+    const domid = (0, hooks_1.useDomid)(props.id);
     const fileInputWrapper = (0, react_1.useRef)(null);
     const fileInput = (0, react_1.useRef)(null);
     const files = value;
@@ -104,7 +109,7 @@ const FileInput = (props) => {
         }
         onFilesUpdated(fileList, diff);
     };
-    return (react_1.default.createElement(FormField_js_1.default, { className: (0, classUtils_1.modifiedClass)('FileInput', [multiple && 'multi'], className), label: label, id: domid + '-fake', LabelTag: "h4", assistText: assistText, hideLabel: hideLabel, disabled: disabled, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, renderInput: (className, inputProps /* , addFocusProps */) => {
+    return (react_1.default.createElement(FormField_js_1.default, Object.assign({ extraClassName: (0, classUtils_1.modifiedClass)('FileInput', [multiple && 'multi']) }, fieldWrapperProps, { id: domid + '-fake', LabelTag: "h4", renderInput: (className, inputProps /* , addFocusProps */) => {
             return (react_1.default.createElement("div", { className: className.control, ref: fileInputWrapper },
                 // Explicitly skip rendering of input element if no
                 // name prop is provided. This is implicitly what the
@@ -128,7 +133,7 @@ const FileInput = (props) => {
                     removeFile,
                     formatBytes: _FileInput_utils_js_1.formatBytes,
                 })))));
-        } }));
+        } })));
 };
 exports.FileInput = FileInput;
 exports.default = exports.FileInput;

package/Foonote.js

@@ -1,11 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Footnote = void 0;
-const tslib_1 = require("tslib");
-const Footnote_js_1 = tslib_1.__importDefault(require("./Footnote.js"));
+const Footnote_js_1 = require("./Footnote.js");
 /** @deprecated  (Will be removed in v0.11)
  *
  * This module file is a typo. import from `Footnote` instead
  */
-exports.Footnote = Footnote_js_1.default;
-exports.default = exports.Footnote;
+exports.Footnote = Footnote_js_1.Footnote;
+exports.default = exports.Footnote; // eslint-disable-line deprecation/deprecation

package/Footnote.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
+import { WrapperElmProps } from './utils.js';
 export type FootnoteProps = {
     children: ReactNode;
-};
+} & WrapperElmProps;
 export declare const Footnote: (props: FootnoteProps) => JSX.Element;
 export default Footnote;

package/Footnote.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Footnote = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const Footnote = (props) => (react_1.default.createElement("div", { className: "Footnote" }, props.children));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const Footnote = (props) => (react_1.default.createElement("div", Object.assign({}, props.wrapperProps, { className: (0, classUtils_1.modifiedClass)('Footnote', null, (props.wrapperProps || {}).className) }), props.children));
 exports.Footnote = Footnote;
 exports.default = exports.Footnote;

package/Form.js

@@ -4,12 +4,11 @@ exports.Form = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+// NOTE: As this component already accepts all `<form/>` props directly,
+// it makes little sense to add support for `wrapperProps` on top.
 const Form = (props) => {
-    const { children, align, wide } = props;
-    return (react_1.default.createElement("form", Object.assign({}, props, { className: (0, classUtils_1.modifiedClass)('Form', [
-            align === 'right' && 'align--' + align,
-            !align && wide && 'wide',
-        ]) }), children));
+    const { children, align, wide, className } = props, formProps = tslib_1.__rest(props, ["children", "align", "wide", "className"]);
+    return (react_1.default.createElement("form", Object.assign({}, formProps, { className: (0, classUtils_1.modifiedClass)('Form', [align === 'right' && 'align--' + align, !align && wide && 'wide'], className) }), children));
 };
 exports.Form = Form;
 exports.default = exports.Form;

package/FormField.d.ts

@@ -1,5 +1,7 @@
 import { RefObject } from 'react';
-import { SSRSupportProps } from './utils.js';
+import { RequireExplicitUndefined } from '@reykjavik/hanna-utils';
+import { TogglerGroupFieldProps } from './_abstract/_TogglerGroupField.js';
+import { SSRSupportProps, WrapperElmProps } from './utils.js';
 type InputClassNames = {
     /** Basic/raw FormField BEM name */
     bem: string;
@@ -49,9 +51,13 @@ export type FormFieldWrappingProps = {
     reqText?: string | false;
     /** Optional pre-determinted id="" for the __input */
     id?: string;
-    /** Ref object pointing to the outermost `.FormField` element */
+    /**
+     * @deprecated Use `*Props.wrapperProps.ref` instead (Will be removed in v0.11)
+     *
+     * Ref object pointing to the outermost `.FormField` element
+     */
     wrapperRef?: RefObject<HTMLElement>;
-} & SSRSupportProps;
+} & WrapperElmProps & SSRSupportProps;
 /**
  * Mixin base props type for components using `FormField` to contain
  * more complex multi-element, grouped choices, that require a Heading
@@ -61,8 +67,12 @@ export type FormFieldGroupWrappingProps = FormFieldWrappingProps & {
     LabelTag?: 'h3' | 'h4' | 'h5';
 };
 type FormFieldProps = FormFieldGroupWrappingProps & {
-    /** Container className - alongside "FormField" */
-    className: string;
+    /** Container className - alongside "FormField" and `props.className`/
+     * `props.wrapperProps.className`. \
+     * Ideal to use if your wrapping compoent accepts its own `className`
+     * prop, so you don't have to merge/join them yourself.
+     */
+    extraClassName?: string;
     small?: boolean;
     group?: boolean | 'inputlike';
     empty?: boolean;
@@ -71,3 +81,13 @@ type FormFieldProps = FormFieldGroupWrappingProps & {
 };
 export declare const FormField: (props: FormFieldProps) => JSX.Element;
 export default FormField;
+export declare const getFormFieldWrapperProps: (props: (FormFieldGroupWrappingProps | Pick<TogglerGroupFieldProps, keyof FormFieldGroupWrappingProps>) & {
+    small?: boolean;
+}) => RequireExplicitUndefined<FormFieldGroupWrappingProps> & {
+    small: boolean | undefined;
+};
+export declare const groupFormFieldWrapperProps: <T extends (FormFieldGroupWrappingProps | Pick<TogglerGroupFieldProps<"default">, "label" | "className" | "id" | "wrapperProps" | "disabled" | "ssr" | "invalid" | "readOnly" | "required" | "errorMessage" | "reqText" | "assistText" | "hideLabel" | "wrapperRef" | "LabelTag">) & {
+    small?: boolean | undefined;
+}>(props: T) => Omit<T, "label" | "small" | "className" | "id" | "wrapperProps" | "disabled" | "ssr" | "invalid" | "readOnly" | "required" | "errorMessage" | "reqText" | "assistText" | "hideLabel" | "wrapperRef" | "LabelTag"> & {
+    fieldWrapperProps: ReturnType<typeof getFormFieldWrapperProps>;
+};

package/FormField.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormField = void 0;
+exports.groupFormFieldWrapperProps = exports.getFormFieldWrapperProps = exports.FormField = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const hooks_1 = require("@hugsmidjan/react/hooks");
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const hooks_1 = require("@hugsmidjan/react/hooks");
 const env_js_1 = require("./utils/env.js");
 const utils_js_1 = require("./utils.js");
 const inputClassNames = {
@@ -16,8 +16,8 @@ const inputClassNames = {
 // ---------------------------------------------------------------------------
 // eslint-disable-next-line complexity
 const FormField = (props) => {
-    const { className, small, group, LabelTag = group ? 'h4' : undefined, label, assistText, hideLabel, empty, filled, readOnly, disabled, invalid, errorMessage, required, reqText, // i18n
-    renderInput, id, ssr, } = props;
+    const { extraClassName, className, small, group, LabelTag = group ? 'h4' : undefined, label, assistText, hideLabel, empty, filled, readOnly, disabled, invalid, errorMessage, required, reqText, // TODO: i18n
+    renderInput, id, ssr, wrapperProps, } = props;
     const isBrowser = (0, utils_js_1.useIsBrowserSide)(ssr);
     const isInvalid = invalid || !!errorMessage || undefined;
     const domid = (0, hooks_1.useDomid)(id);
@@ -56,7 +56,7 @@ const FormField = (props) => {
     const assistTextId = assistText ? `assist:${domid}` : undefined;
     const labelId = LabelTag ? `label:${domid}` : undefined;
     const reqStar = required && reqText !== false && (react_1.default.createElement("abbr", { className: "FormField__label__reqstar", 
-        // TODO: add mo-better i18n thinking
+        // FIXME: add mo-better i18n thinking
         title: `${reqText || 'Þarf að fylla út'}: ` }, "*"));
     const inputProps = {
         id: domid,
@@ -67,7 +67,7 @@ const FormField = (props) => {
         'aria-describedby': assistTextId && errorId ? assistTextId + ' ' + errorId : assistTextId || errorId,
         'aria-labelledby': labelId, // undefined if normalLabel
     };
-    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('FormField', [
+    return (react_1.default.createElement("div", Object.assign({ ref: props.wrapperRef }, wrapperProps, { className: (0, classUtils_1.modifiedClass)('FormField', [
             small && 'small',
             hideLabel && 'nolabel',
             isInvalid && 'invalid',
@@ -76,7 +76,10 @@ const FormField = (props) => {
             isBrowser && empty && 'empty',
             isBrowser && filled && 'filled',
             isBrowser && focused && 'focused',
-        ], className), ref: props.wrapperRef },
+        ], 
+        // Prefer `className` over `wrapperProps.className`
+        (className || (wrapperProps || {}).className || '') +
+            (extraClassName ? ` ${extraClassName}` : '')) }),
         LabelTag ? (react_1.default.createElement(LabelTag, { className: "FormField__label", "data-inputlabel": group === 'inputlike' || undefined, id: labelId },
             ' ',
             reqStar,
@@ -95,3 +98,25 @@ const FormField = (props) => {
 };
 exports.FormField = FormField;
 exports.default = exports.FormField;
+// ---------------------------------------------------------------------------
+const getFormFieldWrapperProps = (props) => {
+    /* prettier-ignore */
+    const { wrapperProps, label, hideLabel, LabelTag, required, reqText, disabled, readOnly, assistText, invalid, errorMessage, id, small, ssr, className, wrapperRef, // eslint-disable-line deprecation/deprecation
+     } = props;
+    /* prettier-ignore */
+    return {
+        wrapperProps, label, LabelTag, hideLabel, required, reqText,
+        disabled: disabled === true,
+        readOnly, assistText, invalid, errorMessage, id,
+        small, ssr, className,
+        wrapperRef,
+    };
+};
+exports.getFormFieldWrapperProps = getFormFieldWrapperProps;
+const groupFormFieldWrapperProps = (props) => {
+    /* prettier-ignore */
+    const { wrapperProps, label, hideLabel, LabelTag, required, reqText, disabled, readOnly, assistText, invalid, errorMessage, id, small, ssr, className, wrapperRef } = props, // eslint-disable-line deprecation/deprecation
+    rest = tslib_1.__rest(props, ["wrapperProps", "label", "hideLabel", "LabelTag", "required", "reqText", "disabled", "readOnly", "assistText", "invalid", "errorMessage", "id", "small", "ssr", "className", "wrapperRef"]);
+    return Object.assign({ fieldWrapperProps: (0, exports.getFormFieldWrapperProps)(props) }, rest);
+};
+exports.groupFormFieldWrapperProps = groupFormFieldWrapperProps;

package/Gallery/_GalleryItem.js

@@ -16,8 +16,8 @@ const GalleryItem = (props) => {
                 setCurrentImage(Object.assign(Object.assign({}, image), { caption, description, largeImageSrc }));
             } },
             ' ',
-            react_1.default.createElement(_Image_js_1.Image, Object.assign({ className: "GalleryItem__image" }, image)),
-            ' ')) : (react_1.default.createElement(_Image_js_1.Image, Object.assign({ className: "GalleryItem__image" }, image))),
+            react_1.default.createElement(_Image_js_1.Image, Object.assign({ bem: "GalleryItem__image" }, image)),
+            ' ')) : (react_1.default.createElement(_Image_js_1.Image, Object.assign({ bem: "GalleryItem__image" }, image))),
         description && react_1.default.createElement("div", { className: "GalleryItem__description" }, description)));
 };
 exports.GalleryItem = GalleryItem;

package/Gallery/_GalleryModalItem.js

@@ -10,6 +10,6 @@ const GalleryModalItem = (props) => {
         (caption || description) && (react_1.default.createElement("div", { className: "GalleryModalItem__text" },
             react_1.default.createElement("div", { className: "GalleryModalItem__caption" }, caption),
             react_1.default.createElement("div", { className: "GalleryModalItem__description" }, description))),
-        react_1.default.createElement(_Image_js_1.Image, { className: "GalleryModalItem__image", src: image.largeImageSrc || image.src })));
+        react_1.default.createElement(_Image_js_1.Image, { bem: "GalleryModalItem__image", src: image.largeImageSrc || image.src })));
 };
 exports.GalleryModalItem = GalleryModalItem;

package/Gallery.d.ts

@@ -1,6 +1,6 @@
 import { GalleryItemProps } from './Gallery/_GalleryItem.js';
 import { SeenProp } from './utils/seenEffect.js';
-import { SSRSupportProps } from './utils.js';
+import { SSRSupportProps, WrapperElmProps } from './utils.js';
 export type { GalleryItemProps } from './Gallery/_GalleryItem.js';
 export type GalleryI18n = {
     modalNextLabel: string;
@@ -11,6 +11,6 @@ export type GalleryProps = {
     items: Array<GalleryItemProps>;
     texts?: GalleryI18n;
     lang?: string;
-} & SSRSupportProps & SeenProp;
+} & SSRSupportProps & WrapperElmProps & SeenProp;
 export declare const Gallery: (props: GalleryProps) => JSX.Element;
 export default Gallery;

package/Gallery.js

@@ -23,10 +23,11 @@ const defaultTexts = {
 const Gallery = (props) => {
     const { items, ssr, startSeen } = props;
     const texts = (0, i18n_1.getTexts)(props, defaultTexts);
-    const [modalImage, setModalImage] = (0, react_1.useState)(undefined);
-    return (react_1.default.createElement(_GalleryModalContext_js_1.GalleryModalContext.Provider, { value: { items, setCurrentImage: setModalImage, currentImage: modalImage } },
-        react_1.default.createElement(_AbstractCarousel_js_1.AbstractCarousel, { bem: "Gallery", items: items, Component: _GalleryItem_js_1.GalleryItem, ssr: ssr, startSeen: startSeen }),
-        react_1.default.createElement(_GalleryModal_js_1.GalleryModal, Object.assign({}, modalImage, { texts: texts }))));
+    const [currentImage, setCurrentImage] = (0, react_1.useState)(undefined);
+    const galleryState = (0, react_1.useMemo)(() => ({ items, setCurrentImage, currentImage }), [items, currentImage]);
+    return (react_1.default.createElement(_GalleryModalContext_js_1.GalleryModalContext.Provider, { value: galleryState },
+        react_1.default.createElement(_AbstractCarousel_js_1.AbstractCarousel, { bem: "Gallery", items: items, Component: _GalleryItem_js_1.GalleryItem, ssr: ssr, startSeen: startSeen, wrapperProps: props.wrapperProps }),
+        react_1.default.createElement(_GalleryModal_js_1.GalleryModal, Object.assign({}, currentImage, { texts: texts }))));
 };
 exports.Gallery = Gallery;
 exports.default = exports.Gallery;

package/GridBlocks.d.ts

@@ -2,6 +2,7 @@ import { Efnistakn } 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';
 export type GridBlockItem = {
     title: string;
     summary: string | JSX.Element;
@@ -17,10 +18,6 @@ export type GridBlockItem = {
 export type GridBlocksProps = {
     blocks: Array<GridBlockItem>;
     twocol?: boolean;
-} & SeenProp;
-export type GridBlocksProp1s = {
-    blocks: Array<GridBlockItem>;
-    twocol?: boolean;
-};
+} & WrapperElmProps & SeenProp;
 export declare const GridBlocks: (props: GridBlocksProps) => JSX.Element;
 export default GridBlocks;

package/GridBlocks.js

@@ -10,12 +10,12 @@ const _Link_js_1 = require("./_abstract/_Link.js");
 const seenEffect_js_1 = require("./utils/seenEffect.js");
 const ButtonTertiary_js_1 = tslib_1.__importDefault(require("./ButtonTertiary.js"));
 const GridBlocks = (props) => {
-    const { blocks, twocol, startSeen } = props;
+    const { blocks, twocol, startSeen, wrapperProps } = props;
     const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
-    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('GridBlocks', [twocol && 'twocol']), ref: ref }, blocks.map(({ title, summary, href, links = [], icon, image }, i) => {
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('GridBlocks', [twocol && 'twocol'], (wrapperProps || {}).className), ref: ref }), blocks.map(({ title, summary, href, links = [], icon, image }, i) => {
         const imageProps = icon ? { src: (0, assets_1.getEfnistaknUrl)(icon) } : image;
         return (react_1.default.createElement("div", { key: i, className: "GridBlocks__item" },
-            imageProps && react_1.default.createElement(_Image_js_1.Image, Object.assign({ className: "GridBlocks__illustration" }, imageProps)),
+            imageProps && react_1.default.createElement(_Image_js_1.Image, Object.assign({ bem: "GridBlocks__illustration" }, imageProps)),
             react_1.default.createElement("div", { className: "GridBlocks__textwrap" },
                 react_1.default.createElement("h3", { className: "GridBlocks__item__title" }, href != null ? (react_1.default.createElement(_Link_js_1.Link, { className: "GridBlocks__item__titlelink", href: href }, title)) : (title)),
                 react_1.default.createElement("div", { className: "GridBlocks__item__summary" }, summary),

package/Heading.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { ComponentLayoutProps } from './constants.js';
+import { WrapperElmProps } from './utils.js';
 declare const sizes: {
     readonly small: "small";
     /** Default value */
@@ -17,6 +18,6 @@ export type HeadingProps = {
      * This prop is ignore if the `Tag` prop is defined.
      */
     forceH1?: boolean;
-} & ComponentLayoutProps;
+} & ComponentLayoutProps & WrapperElmProps;
 export declare const Heading: (props: HeadingProps) => JSX.Element;
 export default Heading;