@reykjavik/hanna-react 0.10.93 → 0.10.95

package/esm/ContactBubble.d.ts

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

package/esm/ContactBubble.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { focusElm } from '@hugsmidjan/qj/focusElm';
 import { useDomid } from '@hugsmidjan/react/hooks';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { getTexts } from '@reykjavik/hanna-utils/i18n';
 import { Link } from './_abstract/_Link.js';
 import { breakOnNL } from './_abstract/breakOnNL.js';
@@ -121,7 +121,7 @@ export const ContactBubble = (props) => {
         React.createElement("ul", { className: "ContactBubble__list" }, links.map((linkInfo, i) => {
             const { href, label, extraLabel, target, onClick } = linkInfo;
             const icon = ensureIcon(linkInfo.icon);
-            const itemClass = getBemClass('ContactBubble__item', icon && 'type--' + icon);
+            const itemClass = modifiedClass('ContactBubble__item', icon && 'type--' + icon);
             const onClickHandler = (e) => {
                 if (onClick) {
                     const doPreventDefault = onClick() !== true;

package/esm/Datepicker.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useDomid } from '@hugsmidjan/react/hooks';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 // For more info on localization see: https://stackoverflow.com/questions/54399084/change-locale-in-react-datepicker/58306958#58306958
 import is from 'date-fns/locale/is/index.js';
 import pl from 'date-fns/locale/pl/index.js';
@@ -69,7 +69,7 @@ export const Datepicker = (props) => {
     const txts = i18n[localeCode] || {};
     const filled = !!value;
     const empty = !filled && !placeholder;
-    return (React.createElement(FormField, { className: getBemClass('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.createElement(FormField, { className: 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.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 =

package/esm/ExtraLinks.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { CardList } from './_abstract/_CardList.js';
 import { Link } from './_abstract/_Link.js';
 import { useSeenEffect } from './utils/seenEffect.js';
@@ -10,13 +10,13 @@ const ExtraLinks__related = (props) => {
         relatedTitle && React.createElement("h3", { className: "ExtraLinks__related__title" }, relatedTitle),
         React.createElement("ul", { className: "ExtraLinks__related__list" }, relatedLinks &&
             relatedLinks.map(({ href, label, blank = false, type }, i) => (React.createElement("li", { className: "ExtraLinks__related__item", key: i },
-                React.createElement(Link, { className: getBemClass('ExtraLinks__related__link', type), href: href, target: blank ? '_blank' : '', rel: blank ? 'noreferrer noopener' : '' }, label)))))));
+                React.createElement(Link, { className: modifiedClass('ExtraLinks__related__link', type), href: href, target: blank ? '_blank' : '', rel: blank ? 'noreferrer noopener' : '' }, label)))))));
 };
 export const ExtraLinks = (props) => {
     const { relatedTitle, relatedLinks, className, startSeen } = props, cardListProps = __rest(props, ["relatedTitle", "relatedLinks", "className", "startSeen"]);
     const hasRelated = !!(relatedLinks && relatedLinks.length);
     const [ref] = useSeenEffect(startSeen);
-    return (React.createElement("div", { className: getBemClass('ExtraLinks', hasRelated && 'related', className), ref: ref },
+    return (React.createElement("div", { className: modifiedClass('ExtraLinks', hasRelated && 'related', className), ref: ref },
         React.createElement("div", { className: "ExtraLinks__main" },
             React.createElement(CardList, Object.assign({}, cardListProps, { bemPrefix: "ExtraLinks" }))),
         hasRelated && (React.createElement(ExtraLinks__related, { relatedTitle: relatedTitle, relatedLinks: relatedLinks }))));

package/esm/FieldGroup.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 export const FieldGroup = (props) => {
     const { legend, children, className, disabled, small } = props;
-    return (React.createElement("fieldset", { className: getBemClass('FieldGroup', small && 'small', className), disabled: disabled },
+    return (React.createElement("fieldset", { className: modifiedClass('FieldGroup', small && 'small', className), disabled: disabled },
         React.createElement("legend", { className: "FieldGroup__legend" }, legend),
         children));
 };

package/esm/FileInput.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import React, { useEffect, useRef, useState } from 'react';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { useDomid } from '@hugsmidjan/react/hooks';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
 import { DEFAULT_LANG } from '@reykjavik/hanna-utils/i18n';
 import { useDropzone } from './_mixed_export_resolution_/ReactDropzone.js';
 import { addPreview, formatBytes, getFileListUpdate, releasePreview, } from './FileInput/_FileInput.utils.js';
@@ -101,7 +101,7 @@ export const FileInput = (props) => {
         }
         onFilesUpdated(fileList, diff);
     };
-    return (React.createElement(FormField, { className: getBemClass('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.createElement(FormField, { className: 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.createElement("div", { className: className.control, ref: fileInputWrapper },
                 // Explicitly skip rendering of input element if no
                 // name prop is provided. This is implicitly what the
@@ -115,7 +115,7 @@ export const FileInput = (props) => {
                     // it's contents are wiped on every "add" action.
                     className: "FileInput__input--fake" }, getInputProps(), { tabIndex: undefined, style: undefined, multiple: multiple || undefined }, inputProps, { required: undefined })),
                 ' ',
-                React.createElement("div", Object.assign({ className: getBemClass('FileInput__dropzone', [isHover && 'highlight']) }, getRootProps({ isDragReject }), { tabIndex: undefined }),
+                React.createElement("div", Object.assign({ className: modifiedClass('FileInput__dropzone', [isHover && 'highlight']) }, getRootProps({ isDragReject }), { tabIndex: undefined }),
                     React.createElement("p", { className: "FileInput__droptext" }, dropzoneText)),
                 FileList && (React.createElement(FileList, Object.assign({}, {
                     files,

package/esm/FooterInfo.d.ts

@@ -1,11 +1,11 @@
-import { BemPropsModifier } from '@hugsmidjan/react/types';
+import { BemModifierProps } from './utils/types.js';
 export type FooterInfoGroup = {
     title: string;
     modifier?: string;
     main?: boolean;
     /** @deprecated (Will be removed in v0.11) */
     role?: JSX.IntrinsicElements['div']['role'];
-} & BemPropsModifier & ({
+} & BemModifierProps & ({
     content: JSX.Element;
     html?: undefined;
 } | {

package/esm/FooterInfo.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 export const FooterInfo = (props) => {
     const { boxes } = props;
-    return (React.createElement("div", { className: "FooterInfo" }, boxes.map((group, i) => (React.createElement("div", { className: getBemClass('FooterInfo__group', [
+    return (React.createElement("div", { className: "FooterInfo" }, boxes.map((group, i) => (React.createElement("div", { className: modifiedClass('FooterInfo__group', [
             group.main && 'main',
             group.modifier,
         ]), key: i },
         React.createElement("h3", { className: "FooterInfo__grouptitle" }, group.title),
-        group.content ? (React.createElement("div", { className: getBemClass('FooterInfo__groupcontent', group.modifier) }, group.content)) : (React.createElement("div", { className: getBemClass('FooterInfo__groupcontent', group.modifier), dangerouslySetInnerHTML: { __html: group.html } })))))));
+        group.content ? (React.createElement("div", { className: modifiedClass('FooterInfo__groupcontent', group.modifier) }, group.content)) : (React.createElement("div", { className: modifiedClass('FooterInfo__groupcontent', group.modifier), dangerouslySetInnerHTML: { __html: group.html } })))))));
 };
 export default FooterInfo;

package/esm/Form.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 export const Form = (props) => {
     const { children, align, wide } = props;
-    return (React.createElement("form", Object.assign({}, props, { className: getBemClass('Form', [
+    return (React.createElement("form", Object.assign({}, props, { className: modifiedClass('Form', [
             align === 'right' && 'align--' + align,
             !align && wide && 'wide',
         ]) }), children));

package/esm/FormField.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-import { SSRSupport } from './utils.js';
+import { SSRSupportProps } from './utils.js';
 type InputClassNames = {
     /** Basic/raw FormField BEM name */
     bem: string;
@@ -51,8 +51,7 @@ export type FormFieldWrappingProps = {
     id?: string;
     /** Ref object pointing to the outermost `.FormField` element */
     wrapperRef?: RefObject<HTMLElement>;
-    ssr?: SSRSupport;
-};
+} & SSRSupportProps;
 /**
  * Mixin base props type for components using `FormField` to contain
  * more complex multi-element, grouped choices, that require a Heading

package/esm/FormField.js

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import { useDomid } from '@hugsmidjan/react/hooks';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { isPreact } from './utils/env.js';
 import { useIsBrowserSide } from './utils.js';
 const inputClassNames = {
@@ -63,7 +63,7 @@ export const FormField = (props) => {
         'aria-describedby': assistTextId && errorId ? assistTextId + ' ' + errorId : assistTextId || errorId,
         'aria-labelledby': labelId, // undefined if normalLabel
     };
-    return (React.createElement("div", { className: getBemClass('FormField', [
+    return (React.createElement("div", { className: modifiedClass('FormField', [
             small && 'small',
             hideLabel && 'nolabel',
             isInvalid && 'invalid',

package/esm/Gallery.d.ts

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

package/esm/GridBlocks.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { getEfnistaknUrl } from '@reykjavik/hanna-utils/assets';
 import { Image } from './_abstract/_Image.js';
 import { Link } from './_abstract/_Link.js';
@@ -8,7 +8,7 @@ import ButtonTertiary from './ButtonTertiary.js';
 export const GridBlocks = (props) => {
     const { blocks, twocol, startSeen } = props;
     const [ref] = useSeenEffect(startSeen);
-    return (React.createElement("div", { className: getBemClass('GridBlocks', [twocol && 'twocol']), ref: ref }, blocks.map(({ title, summary, href, links = [], icon, image }, i) => {
+    return (React.createElement("div", { className: modifiedClass('GridBlocks', [twocol && 'twocol']), ref: ref }, blocks.map(({ title, summary, href, links = [], icon, image }, i) => {
         const imageProps = icon ? { src: getEfnistaknUrl(icon) } : image;
         return (React.createElement("div", { key: i, className: "GridBlocks__item" },
             imageProps && React.createElement(Image, Object.assign({ className: "GridBlocks__illustration" }, imageProps)),

package/esm/Heading.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 const sizes = {
     small: 'small',
     /** Default value */
@@ -10,7 +10,7 @@ export const Heading = (props) => {
     const { size = 'normal', align, wide, children } = props;
     const Tag = props.Tag || (props.forceH1 ? 'h1' : 'h2');
     const suppressWarning = process.env.NODE_ENV !== 'production' && Tag === 'h1' ? true : undefined;
-    return (React.createElement(Tag, { "data-dev-forcedh1": suppressWarning, className: getBemClass('Heading', [
+    return (React.createElement(Tag, { "data-dev-forcedh1": suppressWarning, className: modifiedClass('Heading', [
             sizes[size],
             align === 'right' && 'align--' + align,
             !align && wide && 'wide',

package/esm/IframeBlock.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import IframeResizer from 'iframe-resizer-react';
 /**
  * When `height` is undefined or "auto", then Add the following code-snipped to the iframed page:
@@ -11,7 +11,7 @@ import IframeResizer from 'iframe-resizer-react';
  */
 export const IframeBlock = (props) => {
     const { title, src, framed, compact, scrolling, height = 'auto', align, checkOrigin = false, } = props;
-    const className = getBemClass('IframeBlock', [
+    const className = modifiedClass('IframeBlock', [
         framed && 'framed',
         compact && 'compact',
         align === 'right' && 'align--' + align,

package/esm/ImageCards.js

@@ -1,12 +1,12 @@
 import { __rest } from "tslib";
 import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { CardList, } from './_abstract/_CardList.js';
 import { useSeenEffect } from './utils/seenEffect.js';
 export const ImageCards = (props) => {
     const { background, startSeen } = props, cardListProps = __rest(props, ["background", "startSeen"]);
     const [ref] = useSeenEffect(startSeen);
-    return (React.createElement("div", { className: getBemClass('ImageCards', background && 'background'), ref: ref },
+    return (React.createElement("div", { className: modifiedClass('ImageCards', background && 'background'), ref: ref },
         React.createElement(CardList, Object.assign({}, cardListProps, { bemPrefix: "ImageCards", imgPlaceholder: props.imgPlaceholder || true }))));
 };
 export default ImageCards;

package/esm/InfoHero.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { Blings } from './_abstract/_Blings.js';
 import { Image } from './_abstract/_Image.js';
 import { breakOnNL } from './_abstract/breakOnNL.js';
@@ -69,7 +69,7 @@ export const InfoHero = (props) => {
     const alignment = align && aligns[align] ? align : 'right';
     const blings = (blingType && blingOptions[blingType]) ||
         blingOptions.waves; // default to `waves`
-    return (React.createElement("div", { className: getBemClass('InfoHero', 'align--' + alignment) },
+    return (React.createElement("div", { className: modifiedClass('InfoHero', 'align--' + alignment) },
         React.createElement("div", { className: "InfoHero__content" },
             React.createElement("h1", { className: "InfoHero__title" }, title),
             titleBlurb && React.createElement("div", { className: "InfoHero__titleblurb" }, titleBlurb),

package/esm/LabeledTextBlock.js

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

package/esm/Layout.d.ts

@@ -1,9 +1,9 @@
 import { ReactNode } from 'react';
-import { BemPropsModifier } from '@hugsmidjan/react/types';
 import type { HannaColorTheme } from '@reykjavik/hanna-css';
 import { EitherObj } from '@reykjavik/hanna-utils';
 import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
-import { SSRSupport } from './utils.js';
+import { BemModifierProps } from './utils/types.js';
+import { SSRSupportProps } from './utils.js';
 export type LayoutI18n = {
     lang?: string;
     skipLinkLabel: string;
@@ -13,17 +13,14 @@ export type LayoutI18n = {
 export declare const defaultLayoutTexts: DefaultTexts<LayoutI18n>;
 type LayoutProps = {
     globalAlerts?: ReactNode;
-    mainChildren?: ReactNode;
     navChildren?: ReactNode;
     footerChildren?: ReactNode;
     colorTheme?: HannaColorTheme;
     logoLink?: string;
     siteName?: string;
-    modifier?: BemPropsModifier['modifier'];
-    ssr?: SSRSupport;
     texts?: LayoutI18n;
     lang?: string;
-} & EitherObj<{
+} & SSRSupportProps & BemModifierProps & EitherObj<{
     mainChildren: ReactNode;
 }, {
     children: ReactNode;

package/esm/Layout.js

@@ -1,13 +1,10 @@
 import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { getAssetUrl } from '@reykjavik/hanna-utils/assets';
 import { getTexts } from '@reykjavik/hanna-utils/i18n';
 import { Image } from './_abstract/_Image.js';
 import { Link } from './_abstract/_Link.js';
-import { HannaUIState } from './utils/HannaUIState.js';
-import { useMenuToggling } from './utils/useMenuToggling.js';
-import { useScrollbarWidthCSSVar } from './utils/useScrollbarWidthCSSVar.js';
-import { useIsBrowserSide } from './utils.js';
+import { HannaUIState, useIsBrowserSide, useMenuToggling, useScrollbarWidthCSSVar, } from './utils.js';
 export const defaultLayoutTexts = {
     is: {
         lang: 'is',
@@ -24,17 +21,17 @@ export const defaultLayoutTexts = {
 };
 export const Layout = (props) => {
     useScrollbarWidthCSSVar();
-    const { ssr, globalAlerts, mainChildren, navChildren, footerChildren, colorTheme, children, siteName = 'Reykjavík', logoLink = '/', } = props;
-    const { isMenuActive, isMenuOpen, closeMenu, toggleMenu } = useMenuToggling(ssr !== 'ssr-only');
+    const { ssr, globalAlerts, mainChildren, navChildren, footerChildren, colorTheme, children, siteName = '', logoLink = '/', } = props;
+    const { isMenuActive, uiState, closeMenu, toggleMenu } = useMenuToggling(ssr !== 'ssr-only');
     const isBrowser = useIsBrowserSide( /* ssr */);
     const txt = getTexts(props, defaultLayoutTexts);
-    return (React.createElement("div", { className: getBemClass('Layout', props.modifier), "data-sprinkled": isBrowser, "data-color-theme": colorTheme },
+    return (React.createElement("div", { className: modifiedClass('Layout', props.modifier), "data-sprinkled": isBrowser, "data-color-theme": colorTheme },
         globalAlerts && (React.createElement("div", { className: "Layout__alerts", role: "alert" }, globalAlerts)),
         React.createElement("div", { className: "Layout__content" },
             React.createElement("div", { className: "Layout__header", role: "banner" },
                 React.createElement(Link, { className: "Layout__header__logo", href: logoLink },
                     ' ',
-                    React.createElement(Image, { className: undefined, inline: true, src: getAssetUrl('reykjavik-logo.svg') }),
+                    React.createElement(Image, { className: undefined, inline: true, src: getAssetUrl('reykjavik-logo.svg'), altText: "Reykjav\u00EDk" }),
                     ' ',
                     siteName,
                     ' '),
@@ -46,10 +43,7 @@ export const Layout = (props) => {
                         }), "aria-label": txt.skipLinkLabel }, txt.skipLinkLabel))),
             React.createElement("div", { className: "Layout__main", role: "main" }, mainChildren || children),
             navChildren && (React.createElement("div", { className: "Layout__nav", id: "pagenav", role: "navigation" },
-                React.createElement(HannaUIState, { value: {
-                        closeHamburgerMenu: closeMenu,
-                        isHamburgerMenuOpen: isMenuOpen,
-                    } }, navChildren),
+                React.createElement(HannaUIState, { value: uiState }, navChildren),
                 isMenuActive && (React.createElement("button", { className: "Layout__nav__closebutton", onClick: closeMenu, "aria-label": txt.closeMenuLabelLong, type: "button" }, txt.closeMenuLabel)))),
             React.createElement("div", { className: "Layout__footer", role: "complementary" }, footerChildren))));
 };

package/esm/MainMenu/_PrimaryPanel.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { Link } from '../_abstract/_Link.js';
 export const PrimaryPanel = (props) => {
     const { setActivePanel, panel, isParent, isActive, isBrowser, texts } = props;
     const { items } = panel;
-    return (React.createElement("li", { ref: isActive ? props.activeRef : undefined, className: getBemClass('PrimaryPanel', [
+    return (React.createElement("li", { ref: isActive ? props.activeRef : undefined, className: modifiedClass('PrimaryPanel', [
             isParent && 'parent',
             isActive && 'active',
             items.length > 5 && 'twocol', // TODO: allow setting twocol manually?

package/esm/MainMenu.d.ts

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

package/esm/MainMenu.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { focusElm } from '@hugsmidjan/qj/focusElm';
 import useShortState from '@hugsmidjan/react/hooks/useShortState';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
 import { getTexts } from '@reykjavik/hanna-utils/i18n';
 import { Link } from './_abstract/_Link.js';
 import { AuxiliaryPanel, } from './MainMenu/_Auxiliary.js';
@@ -184,7 +184,7 @@ export const MainMenu = (props) => {
             }
             const { label, labelLong, lang, controlsId, onClick } = item;
             const pressed = (activePanel && controlsId === activePanel.id) || undefined;
-            return (React.createElement("li", { key: i, className: getBemClass('MainMenu__item', item.modifier), "aria-current": item.current || undefined }, onClick || (!!item.megaPanel && (isBrowser || !item.href)) ? (
+            return (React.createElement("li", { key: i, className: modifiedClass('MainMenu__item', item.modifier), "aria-current": item.current || undefined }, onClick || (!!item.megaPanel && (isBrowser || !item.href)) ? (
             // only print script-driven buttons in the browser
             React.createElement("button", { className: "MainMenu__link", onClick: () => {
                     const keepOpen1 = onClick && onClick(i, item) === false;
@@ -205,7 +205,7 @@ export const MainMenu = (props) => {
             ));
         })),
         '\n\n',
-        megaPanels.length > 0 && (React.createElement("div", { className: getBemClass('MainMenu__panelsWrap', [activePanel && 'active']) },
+        megaPanels.length > 0 && (React.createElement("div", { className: modifiedClass('MainMenu__panelsWrap', [activePanel && 'active']) },
             React.createElement("ul", { className: "MainMenu__panels", onClick: handleMegaPanelClicks },
                 megaPanels.map((panel, i) => {
                     if (!panel.items.length) {

package/esm/Multiselect.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import domId from '@hugsmidjan/qj/domid';
 import { useDomid, useOnClickOutside } from '@hugsmidjan/react/hooks';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
 import { notNully } from '@reykjavik/hanna-utils';
 import { getTexts } from '@reykjavik/hanna-utils/i18n';
 import { FocusTrap } from './_abstract/_FocusTrap.js';
@@ -24,7 +24,7 @@ const metaData = {
      *
      * (This summary just gets in the way with ultra short option lists.)
      */
-    summaryLimit: 10,
+    summaryLimit: 20,
 };
 const { searchableLimit, summaryLimit } = metaData;
 const defaultTexts = {
@@ -187,9 +187,9 @@ export const Multiselect = (props) => {
             block: 'nearest',
         });
     }, [activeItemIndex]);
-    return (React.createElement(FormField, { className: getBemClass('Multiselect', props.nowrap && 'nowrap', props.className), ssr: props.ssr, group: "inputlike", label: props.label, LabelTag: props.LabelTag, hideLabel: props.hideLabel, small: props.small, filled: filled, empty: empty, disabled: disabled, invalid: props.invalid, errorMessage: props.errorMessage, assistText: props.assistText, readOnly: readOnly, required: props.required, reqText: props.reqText, id: props.id, renderInput: (className, inputProps, addFocusProps, isBrowser) => {
+    return (React.createElement(FormField, { className: modifiedClass('Multiselect', props.nowrap && 'nowrap', props.className), ssr: props.ssr, group: "inputlike", label: props.label, LabelTag: props.LabelTag, hideLabel: props.hideLabel, small: props.small, filled: filled, empty: empty, disabled: disabled, invalid: props.invalid, errorMessage: props.errorMessage, assistText: props.assistText, readOnly: readOnly, required: props.required, reqText: props.reqText, id: props.id, renderInput: (className, inputProps, addFocusProps, isBrowser) => {
             const { id } = inputProps;
-            return (React.createElement("div", Object.assign({ className: getBemClass('Multiselect__input', [isOpen && 'open'], className.input) }, addFocusProps(), { "data-sprinkled": isBrowser, ref: wrapperRef }),
+            return (React.createElement("div", Object.assign({ className: modifiedClass('Multiselect__input', [isOpen && 'open'], className.input) }, addFocusProps(), { "data-sprinkled": isBrowser, ref: wrapperRef }),
                 !isBrowser ? null : isSearchable ? (React.createElement("input", { className: "Multiselect__search", id: `toggler:${id}`, "aria-label": texts.search, "aria-controls": domId(), "data-expanded": isOpen || undefined, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onClick: () => toggleOpen(), value: searchQuery, 
                     // onFocus={handleInputFocus}
                     placeholder: placeholderText, disabled: disabled, ref: inputRef })) : (React.createElement("button", { className: "Multiselect__toggler", id: `toggler:${id}`, type: "button", "aria-label": texts.buttonShow, "aria-controls": domId(), "aria-expanded": isOpen, onClick: () => toggleOpen(), disabled: disabled, 
@@ -220,7 +220,7 @@ export const Multiselect = (props) => {
                                 ? item.disabled
                                 : disableds && disableds.includes(idx);
                             const isChecked = values.includes(item.value);
-                            return (React.createElement(Checkbox, Object.assign({ key: idx, className: getBemClass('Multiselect__option', activeItemIndex === idx && 'focused'), disabled: isDisabled, readOnly: readOnly, required: props.required, Wrapper: "li", name: name }, item, { checked: isChecked, "aria-invalid": props.invalid, label: item.label || item.value, onChange: () => handleCheckboxSelection(item), onFocus: () => setActiveItemIndex(idx), wrapperProps: {
+                            return (React.createElement(Checkbox, Object.assign({ key: idx, className: modifiedClass('Multiselect__option', activeItemIndex === idx && 'focused'), disabled: isDisabled, readOnly: readOnly, required: props.required, Wrapper: "li", name: name }, item, { checked: isChecked, "aria-invalid": props.invalid, label: item.label || item.value, onChange: () => handleCheckboxSelection(item), onFocus: () => setActiveItemIndex(idx), wrapperProps: {
                                     onMouseEnter: () => setActiveItemIndex(idx),
                                 } })));
                         })) : searchQuery ? (React.createElement("li", { className: "Multiselect__noresults" }, texts.noneFoundMsg)) : undefined,

package/esm/NameCard.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { getTexts } from '@reykjavik/hanna-utils/i18n';
 import { Button } from './_abstract/_Button.js';
 import { breakOnNL } from './_abstract/breakOnNL.js';
@@ -44,7 +44,7 @@ export const NameCard = (props) => {
         const texts = getTexts(props, defaultTexts);
         const { updatedLabel, availableLabel, unavailableLabel } = texts;
         return (React.createElement("div", { className: "NameCard__meta" },
-            available != null && (React.createElement("span", { className: getBemClass('NameCard__availability', available && 'available') },
+            available != null && (React.createElement("span", { className: modifiedClass('NameCard__availability', available && 'available') },
                 available
                     ? availableLabel || texts.vacancyLabel
                     : unavailableLabel || texts.noVacancyLabel,

package/esm/NewsHero.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { getStableRandomItem } from '@reykjavik/hanna-utils';
 import { Blings } from './_abstract/_Blings.js';
 import { Image } from './_abstract/_Image.js';
@@ -75,7 +75,7 @@ export const NewsHero = (props) => {
     const { title, sharing = true, meta, summary, image, blingType, startSeen } = props;
     const [ref] = useSeenEffect(startSeen);
     const blings = (blingType && blingOptions[blingType]) || getStableRandomItem(blingOptions, title);
-    return (React.createElement("div", { className: getBemClass('NewsHero', [!image && 'align--right']), ref: ref },
+    return (React.createElement("div", { className: modifiedClass('NewsHero', [!image && 'align--right']), ref: ref },
         React.createElement("div", { className: "NewsHero__content" },
             React.createElement("h1", { className: "NewsHero__title" }, title),
             meta && React.createElement("span", { className: "NewsHero__meta" }, meta),

package/esm/PageFilter.js

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

package/esm/PageHeading.js

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

package/esm/Picture.js

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

package/esm/ProcessOverview.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 export const ProcessOverview = (props) => {
     const { title, items, attention, transparent, narrow } = props;
-    return (React.createElement("div", { className: getBemClass('ProcessOverview', [
+    return (React.createElement("div", { className: modifiedClass('ProcessOverview', [
             transparent && 'transparent',
             narrow && 'narrow',
         ]) },

package/esm/ReadSpeakerPlayer.js

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { getTexts } from '@reykjavik/hanna-utils/i18n';
 const scriptTagId = 'rs_req_Init';
 const scriptTagSelector = `script#${scriptTagId}`;
@@ -50,7 +50,7 @@ export const ReadSpeakerPlayer = (props) => {
     // or multiple different `customerId`s on the same page.
     // If you try that, things will be weird and wonky.
     ]);
-    return (React.createElement("div", Object.assign({}, wrapperProps, { className: getBemClass('ReadSpeakerPlayer', [align === 'right' && `align-${align}`, float && 'float'], wrapperProps.className) }),
+    return (React.createElement("div", Object.assign({}, wrapperProps, { className: modifiedClass('ReadSpeakerPlayer', [align === 'right' && `align-${align}`, float && 'float'], wrapperProps.className) }),
         React.createElement("div", { id: "readspeaker_button1", className: "rs_skip rsbtn rs_preserve" },
             React.createElement("a", { rel: "nofollow", className: "rsbtn_play", accessKey: "L", title: linkLabel || linkText, href: `https://app-eu.readspeaker.com/cgi-bin/rsent?${new URLSearchParams({
                     customerid: customerId,