@reykjavik/hanna-react 0.10.94 → 0.10.95

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

@@ -3,14 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Layout = exports.defaultLayoutTexts = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const assets_1 = require("@reykjavik/hanna-utils/assets");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const _Image_js_1 = require("./_abstract/_Image.js");
 const _Link_js_1 = require("./_abstract/_Link.js");
-const HannaUIState_js_1 = require("./utils/HannaUIState.js");
-const useMenuToggling_js_1 = require("./utils/useMenuToggling.js");
-const useScrollbarWidthCSSVar_js_1 = require("./utils/useScrollbarWidthCSSVar.js");
 const utils_js_1 = require("./utils.js");
 exports.defaultLayoutTexts = {
     is: {
@@ -27,18 +24,18 @@ exports.defaultLayoutTexts = {
     },
 };
 const Layout = (props) => {
-    (0, useScrollbarWidthCSSVar_js_1.useScrollbarWidthCSSVar)();
-    const { ssr, globalAlerts, mainChildren, navChildren, footerChildren, colorTheme, children, siteName = 'Reykjavík', logoLink = '/', } = props;
-    const { isMenuActive, isMenuOpen, closeMenu, toggleMenu } = (0, useMenuToggling_js_1.useMenuToggling)(ssr !== 'ssr-only');
+    (0, utils_js_1.useScrollbarWidthCSSVar)();
+    const { ssr, globalAlerts, mainChildren, navChildren, footerChildren, colorTheme, children, siteName = '', logoLink = '/', } = props;
+    const { isMenuActive, uiState, closeMenu, toggleMenu } = (0, utils_js_1.useMenuToggling)(ssr !== 'ssr-only');
     const isBrowser = (0, utils_js_1.useIsBrowserSide)( /* ssr */);
     const txt = (0, i18n_1.getTexts)(props, exports.defaultLayoutTexts);
-    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('Layout', props.modifier), "data-sprinkled": isBrowser, "data-color-theme": colorTheme },
+    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('Layout', props.modifier), "data-sprinkled": isBrowser, "data-color-theme": colorTheme },
         globalAlerts && (react_1.default.createElement("div", { className: "Layout__alerts", role: "alert" }, globalAlerts)),
         react_1.default.createElement("div", { className: "Layout__content" },
             react_1.default.createElement("div", { className: "Layout__header", role: "banner" },
                 react_1.default.createElement(_Link_js_1.Link, { className: "Layout__header__logo", href: logoLink },
                     ' ',
-                    react_1.default.createElement(_Image_js_1.Image, { className: undefined, inline: true, src: (0, assets_1.getAssetUrl)('reykjavik-logo.svg') }),
+                    react_1.default.createElement(_Image_js_1.Image, { className: undefined, inline: true, src: (0, assets_1.getAssetUrl)('reykjavik-logo.svg'), altText: "Reykjav\u00EDk" }),
                     ' ',
                     siteName,
                     ' '),
@@ -50,10 +47,7 @@ const Layout = (props) => {
                         }), "aria-label": txt.skipLinkLabel }, txt.skipLinkLabel))),
             react_1.default.createElement("div", { className: "Layout__main", role: "main" }, mainChildren || children),
             navChildren && (react_1.default.createElement("div", { className: "Layout__nav", id: "pagenav", role: "navigation" },
-                react_1.default.createElement(HannaUIState_js_1.HannaUIState, { value: {
-                        closeHamburgerMenu: closeMenu,
-                        isHamburgerMenuOpen: isMenuOpen,
-                    } }, navChildren),
+                react_1.default.createElement(utils_js_1.HannaUIState, { value: uiState }, navChildren),
                 isMenuActive && (react_1.default.createElement("button", { className: "Layout__nav__closebutton", onClick: closeMenu, "aria-label": txt.closeMenuLabelLong, type: "button" }, txt.closeMenuLabel)))),
             react_1.default.createElement("div", { className: "Layout__footer", role: "complementary" }, footerChildren))));
 };

package/MainMenu/_PrimaryPanel.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PrimaryPanel = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const _Link_js_1 = require("../_abstract/_Link.js");
 const PrimaryPanel = (props) => {
     const { setActivePanel, panel, isParent, isActive, isBrowser, texts } = props;
     const { items } = panel;
-    return (react_1.default.createElement("li", { ref: isActive ? props.activeRef : undefined, className: (0, getBemClass_1.default)('PrimaryPanel', [
+    return (react_1.default.createElement("li", { ref: isActive ? props.activeRef : undefined, className: (0, classUtils_1.modifiedClass)('PrimaryPanel', [
             isParent && 'parent',
             isActive && 'active',
             items.length > 5 && 'twocol', // TODO: allow setting twocol manually?

package/MainMenu.d.ts

@@ -3,7 +3,7 @@ import { Cleanup } from '@reykjavik/hanna-utils';
 import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
 import { AuxilaryPanelIllustration, AuxiliaryPanelProps } from './MainMenu/_Auxiliary.js';
 import { MegaMenuItem, MegaMenuPanel, PrimaryPanelI18n } from './MainMenu/_PrimaryPanel.js';
-import { 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/MainMenu.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MainMenu = exports.defaultMainMenuTexts = 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 useShortState_1 = tslib_1.__importDefault(require("@hugsmidjan/react/hooks/useShortState"));
-const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const _Link_js_1 = require("./_abstract/_Link.js");
 const _Auxiliary_js_1 = require("./MainMenu/_Auxiliary.js");
@@ -188,7 +188,7 @@ const MainMenu = (props) => {
             }
             const { label, labelLong, lang, controlsId, onClick } = item;
             const pressed = (activePanel && controlsId === activePanel.id) || undefined;
-            return (react_1.default.createElement("li", { key: i, className: (0, getBemClass_1.default)('MainMenu__item', item.modifier), "aria-current": item.current || undefined }, onClick || (!!item.megaPanel && (isBrowser || !item.href)) ? (
+            return (react_1.default.createElement("li", { key: i, className: (0, classUtils_1.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_1.default.createElement("button", { className: "MainMenu__link", onClick: () => {
                     const keepOpen1 = onClick && onClick(i, item) === false;
@@ -209,7 +209,7 @@ const MainMenu = (props) => {
             ));
         })),
         '\n\n',
-        megaPanels.length > 0 && (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('MainMenu__panelsWrap', [activePanel && 'active']) },
+        megaPanels.length > 0 && (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('MainMenu__panelsWrap', [activePanel && 'active']) },
             react_1.default.createElement("ul", { className: "MainMenu__panels", onClick: handleMegaPanelClicks },
                 megaPanels.map((panel, i) => {
                     if (!panel.items.length) {

package/Multiselect.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Multiselect = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const domid_1 = tslib_1.__importDefault(require("@hugsmidjan/qj/domid"));
 const hooks_1 = require("@hugsmidjan/react/hooks");
-const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
 const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const _FocusTrap_js_1 = require("./_abstract/_FocusTrap.js");
@@ -28,7 +28,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 = {
@@ -191,9 +191,9 @@ const Multiselect = (props) => {
             block: 'nearest',
         });
     }, [activeItemIndex]);
-    return (react_1.default.createElement(FormField_js_1.default, { className: (0, getBemClass_1.default)('Multiselect', props.nowrap && 'nowrap', props.className), ssr: props.ssr, group: "inputlike", label: props.label, LabelTag: props.LabelTag, hideLabel: props.hideLabel, small: props.small, filled: filled, empty: empty, disabled: disabled, invalid: props.invalid, errorMessage: props.errorMessage, assistText: props.assistText, readOnly: readOnly, required: props.required, reqText: props.reqText, id: props.id, renderInput: (className, inputProps, addFocusProps, isBrowser) => {
+    return (react_1.default.createElement(FormField_js_1.default, { className: (0, classUtils_1.modifiedClass)('Multiselect', props.nowrap && 'nowrap', props.className), ssr: props.ssr, group: "inputlike", label: props.label, LabelTag: props.LabelTag, hideLabel: props.hideLabel, small: props.small, filled: filled, empty: empty, disabled: disabled, invalid: props.invalid, errorMessage: props.errorMessage, assistText: props.assistText, readOnly: readOnly, required: props.required, reqText: props.reqText, id: props.id, renderInput: (className, inputProps, addFocusProps, isBrowser) => {
             const { id } = inputProps;
-            return (react_1.default.createElement("div", Object.assign({ className: (0, getBemClass_1.default)('Multiselect__input', [isOpen && 'open'], className.input) }, addFocusProps(), { "data-sprinkled": isBrowser, ref: wrapperRef }),
+            return (react_1.default.createElement("div", Object.assign({ className: (0, classUtils_1.modifiedClass)('Multiselect__input', [isOpen && 'open'], className.input) }, addFocusProps(), { "data-sprinkled": isBrowser, ref: wrapperRef }),
                 !isBrowser ? null : isSearchable ? (react_1.default.createElement("input", { className: "Multiselect__search", id: `toggler:${id}`, "aria-label": texts.search, "aria-controls": (0, domid_1.default)(), "data-expanded": isOpen || undefined, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onClick: () => toggleOpen(), value: searchQuery, 
                     // onFocus={handleInputFocus}
                     placeholder: placeholderText, disabled: disabled, ref: inputRef })) : (react_1.default.createElement("button", { className: "Multiselect__toggler", id: `toggler:${id}`, type: "button", "aria-label": texts.buttonShow, "aria-controls": (0, domid_1.default)(), "aria-expanded": isOpen, onClick: () => toggleOpen(), disabled: disabled, 
@@ -224,7 +224,7 @@ const Multiselect = (props) => {
                                 ? item.disabled
                                 : disableds && disableds.includes(idx);
                             const isChecked = values.includes(item.value);
-                            return (react_1.default.createElement(Checkbox_js_1.default, Object.assign({ key: idx, className: (0, getBemClass_1.default)('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_1.default.createElement(Checkbox_js_1.default, Object.assign({ key: idx, className: (0, classUtils_1.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_1.default.createElement("li", { className: "Multiselect__noresults" }, texts.noneFoundMsg)) : undefined,

package/NameCard.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NameCard = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const _Button_js_1 = require("./_abstract/_Button.js");
 const breakOnNL_js_1 = require("./_abstract/breakOnNL.js");
@@ -48,7 +48,7 @@ const NameCard = (props) => {
         const texts = (0, i18n_1.getTexts)(props, defaultTexts);
         const { updatedLabel, availableLabel, unavailableLabel } = texts;
         return (react_1.default.createElement("div", { className: "NameCard__meta" },
-            available != null && (react_1.default.createElement("span", { className: (0, getBemClass_1.default)('NameCard__availability', available && 'available') },
+            available != null && (react_1.default.createElement("span", { className: (0, classUtils_1.modifiedClass)('NameCard__availability', available && 'available') },
                 available
                     ? availableLabel || texts.vacancyLabel
                     : unavailableLabel || texts.noVacancyLabel,

package/NewsHero.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NewsHero = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const _Blings_js_1 = require("./_abstract/_Blings.js");
 const _Image_js_1 = require("./_abstract/_Image.js");
@@ -79,7 +79,7 @@ const NewsHero = (props) => {
     const { title, sharing = true, meta, summary, image, blingType, startSeen } = props;
     const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
     const blings = (blingType && blingOptions[blingType]) || (0, hanna_utils_1.getStableRandomItem)(blingOptions, title);
-    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('NewsHero', [!image && 'align--right']), ref: ref },
+    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('NewsHero', [!image && 'align--right']), ref: ref },
         react_1.default.createElement("div", { className: "NewsHero__content" },
             react_1.default.createElement("h1", { className: "NewsHero__title" }, title),
             meta && react_1.default.createElement("span", { className: "NewsHero__meta" }, meta),

package/PageFilter.js

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageFilter = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const seenEffect_js_1 = require("./utils/seenEffect.js");
 const Footnote_js_1 = tslib_1.__importDefault(require("./Footnote.js"));
 const PageFilter = (props) => {
     const { title, summary, footnote, filters, children, buttonRow, underlap, startSeen } = props;
     const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
-    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('PageFilter', underlap && 'underlap'), ref: ref },
+    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('PageFilter', underlap && 'underlap'), ref: ref },
         react_1.default.createElement("h2", { className: "PageFilter__title" }, title),
         summary && react_1.default.createElement("div", { className: "PageFilter__summary" }, summary),
         react_1.default.createElement("div", { className: "PageFilter__filters" }, filters || children),

package/PageHeading.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageHeading = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const seenEffect_js_1 = require("./utils/seenEffect.js");
 const PageHeading = (props) => {
     const { Tag = 'h1', align, small, children, startSeen } = props;
     const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
-    return (react_1.default.createElement(Tag, { className: (0, getBemClass_1.default)('PageHeading', [
+    return (react_1.default.createElement(Tag, { className: (0, classUtils_1.modifiedClass)('PageHeading', [
             small && 'small',
             align === 'right' && 'align--' + align,
         ]), ref: ref }, children));

package/Picture.js

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

package/ProcessOverview.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProcessOverview = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const ProcessOverview = (props) => {
     const { title, items, attention, transparent, narrow } = props;
-    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('ProcessOverview', [
+    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('ProcessOverview', [
             transparent && 'transparent',
             narrow && 'narrow',
         ]) },

package/ReadSpeakerPlayer.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.stopReading = exports.ReadSpeakerPlayer = exports.defaultReadSpeakerPlayerTexts = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const scriptTagId = 'rs_req_Init';
 const scriptTagSelector = `script#${scriptTagId}`;
@@ -54,7 +54,7 @@ const ReadSpeakerPlayer = (props) => {
     // or multiple different `customerId`s on the same page.
     // If you try that, things will be weird and wonky.
     ]);
-    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, getBemClass_1.default)('ReadSpeakerPlayer', [align === 'right' && `align-${align}`, float && 'float'], wrapperProps.className) }),
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('ReadSpeakerPlayer', [align === 'right' && `align-${align}`, float && 'float'], wrapperProps.className) }),
         react_1.default.createElement("div", { id: "readspeaker_button1", className: "rs_skip rsbtn rs_preserve" },
             react_1.default.createElement("a", { rel: "nofollow", className: "rsbtn_play", accessKey: "L", title: linkLabel || linkText, href: `https://app-eu.readspeaker.com/cgi-bin/rsent?${new URLSearchParams({
                     customerid: customerId,

package/RowBlock.d.ts

@@ -1,12 +1,12 @@
 import { ReactNode } from 'react';
-import { BemPropsModifier } from '@hugsmidjan/react/types';
 import { SeenProp } from './utils/seenEffect.js';
+import { BemModifierProps } from './utils/types.js';
 export type RowBlockProps = {
     /** Float the first RowBlockColumn to the right on larger screens. */
     right?: boolean;
     /** Custom **additional** class-name */
     className?: string;
     children: ReactNode;
-} & BemPropsModifier & SeenProp;
+} & BemModifierProps & SeenProp;
 export declare const RowBlock: (props: RowBlockProps) => JSX.Element;
 export default RowBlock;

package/RowBlock.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RowBlock = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const seenEffect_js_1 = require("./utils/seenEffect.js");
 const RowBlock = (props) => {
     const { right, modifier, className, children, startSeen } = props;
     const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
-    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('RowBlock', [modifier, right && 'align--right'], className), ref: ref }, children));
+    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('RowBlock', [modifier, right && 'align--right'], className), ref: ref }, children));
 };
 exports.RowBlock = RowBlock;
 exports.default = exports.RowBlock;

package/RowBlockColumn.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RowBlockColumn = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const RowBlockColumn = (props) => {
     const { background, narrow, children } = props;
-    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('RowBlockColumn', [
+    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('RowBlockColumn', [
             narrow && 'narrow',
             background && 'background',
             background === 'primary' && 'background--primary',

package/SearchInput.js

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

package/SearchResults.js

@@ -4,10 +4,10 @@ exports.SearchResults = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const react_intersection_observer_1 = require("react-intersection-observer");
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const prettyNum_1 = require("@hugsmidjan/qj/prettyNum");
 const range_1 = tslib_1.__importDefault(require("@hugsmidjan/qj/range"));
 const hooks_1 = require("@hugsmidjan/react/hooks");
-const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const _SearchResultsItem_js_1 = require("./SearchResults/_SearchResultsItem.js");
 const Alert_js_1 = tslib_1.__importDefault(require("./Alert.js"));
@@ -101,7 +101,7 @@ const SearchResults = (props) => {
     const { filters, activeFilterIdx, setFilter, status, errorText } = props;
     const texts = (0, i18n_1.getTexts)(props, defaultTexts);
     const domid = (0, hooks_1.useDomid)();
-    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('SearchResults', status !== 'results' && status) },
+    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('SearchResults', status !== 'results' && status) },
         renderTitle(props, texts),
         react_1.default.createElement(SearchResults_Tabs, { domid: domid, filters: filters, activeIdx: activeFilterIdx, setFilter: setFilter, lang: texts.lang }),
         react_1.default.createElement("div", { className: "SearchResults__results", id: domid },

package/Selectbox.js

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

package/ShareButtons.d.ts

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

package/Sharpie.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Sharpie = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const colors = {
     green: 1,
     red: 1,
@@ -21,7 +21,7 @@ const Sharpie = (props) => {
     const { color, tag, children } = props;
     const colorModifier = colors[color] ? color : 'green';
     const Tag = tag && tags[tag] ? tag : 'span';
-    return react_1.default.createElement(Tag, { className: (0, getBemClass_1.default)('Sharpie', colorModifier) }, children);
+    return react_1.default.createElement(Tag, { className: (0, classUtils_1.modifiedClass)('Sharpie', colorModifier) }, children);
 };
 exports.Sharpie = Sharpie;
 exports.default = exports.Sharpie;

package/SiteSearchAutocomplete.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import Autosuggest, { RenderSuggestion } from 'react-autosuggest';
-import { BemProps } from '@hugsmidjan/react/types';
 import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
+import { BemProps } from './utils/types.js';
 export type SiteSearchACI18n = {
     lang?: string;
     /** Label for the autocomplete's combobox container div */

package/SiteSearchCurtain.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SiteSearchCurtain = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const hooks_1 = require("@hugsmidjan/react/hooks");
-const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
 const env_js_1 = require("./utils/env.js");
 const SiteSearchCurtain = (props) => {
     const [focused, setFocused] = (0, hooks_1.useLaggedState)(false);
@@ -27,7 +27,7 @@ const SiteSearchCurtain = (props) => {
             setFocused(false, 100);
         }
     };
-    return (react_1.default.createElement("div", Object.assign({ className: (0, getBemClass_1.default)('SiteSearchCurtain', [focused && 'focused']), onFocus: focusHandler, onBlur: blurHandler }, (env_js_1.isPreact && { onfocusin: focusHandler, onfocusout: blurHandler })), props.children));
+    return (react_1.default.createElement("div", Object.assign({ className: (0, classUtils_1.modifiedClass)('SiteSearchCurtain', [focused && 'focused']), onFocus: focusHandler, onBlur: blurHandler }, (env_js_1.isPreact && { onfocusin: focusHandler, onfocusout: blurHandler })), props.children));
 };
 exports.SiteSearchCurtain = SiteSearchCurtain;
 exports.default = exports.SiteSearchCurtain;

package/SiteSearchInput.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormFieldWrappingProps } from './FormField.js';
-import { SSRSupport } from './utils.js';
+import { SSRSupportProps } from './utils.js';
 type InputElmProps = Omit<JSX.IntrinsicElements['input'], 'className' | 'type' | 'disabled' | 'readOnly' | 'required' | 'onSubmit'>;
 type WrappingProps = Pick<FormFieldWrappingProps, 'id' | 'label'>;
 export type SiteSearchInputProps = {
@@ -18,7 +18,6 @@ export type SiteSearchInputProps = {
     onButtonClick?: () => boolean | void;
     buttonText?: string;
     children?: never;
-    ssr?: SSRSupport;
-} & WrappingProps & InputElmProps;
+} & SSRSupportProps & WrappingProps & InputElmProps;
 export declare const SiteSearchInput: React.ForwardRefExoticComponent<Pick<SiteSearchInputProps, "form" | "label" | "slot" | "style" | "title" | "key" | "list" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "step" | "value" | "pattern" | "name" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "size" | "src" | "multiple" | "alt" | "ssr" | "accept" | "autoComplete" | "capture" | "checked" | "crossOrigin" | "enterKeyHint" | "height" | "max" | "maxLength" | "min" | "minLength" | "width" | "onButtonClick" | "buttonText"> & React.RefAttributes<HTMLInputElement>>;
 export default SiteSearchInput;

package/Skeleton.js

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Skeleton = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const range_1 = tslib_1.__importDefault(require("@hugsmidjan/qj/range"));
-const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
-const makeRenderSkeleton = (props) => (key) => (react_1.default.createElement("span", { key: key, className: (0, getBemClass_1.default)('Skeleton', [
+const makeRenderSkeleton = (props) => (key) => (react_1.default.createElement("span", { key: key, className: (0, classUtils_1.modifiedClass)('Skeleton', [
         props.text && 'text',
         props.height && 'height--' + props.height,
         props.gap && 'gap--' + props.gap,

package/SubHeading.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SubHeading = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const seenEffect_js_1 = require("./utils/seenEffect.js");
 const SubHeading = (props) => {
     const { small, Tag = 'h2', children, align, wide, startSeen } = props;
     const [ref] = (0, seenEffect_js_1.useSeenEffect)(startSeen);
-    return (react_1.default.createElement(Tag, { className: (0, getBemClass_1.default)('SubHeading', [
+    return (react_1.default.createElement(Tag, { className: (0, classUtils_1.modifiedClass)('SubHeading', [
             small && 'small',
             align === 'right' && 'align--' + align,
             !align && wide && 'wide',

package/Tabs.d.ts

@@ -1,5 +1,5 @@
 import { SeenProp } from './utils/seenEffect.js';
-import { SSRSupport } from './utils.js';
+import { SSRSupportProps } from './utils.js';
 export type TabItemProps = {
     label: string;
     badge?: string | number;
@@ -22,8 +22,7 @@ type BaseTabsProps<T extends TabItemProps = TabItemProps> = {
     role?: 'tablist' | 'toc';
     'aria-controls'?: string;
     activateOnFocus?: boolean;
-    ssr?: SSRSupport;
-};
+} & SSRSupportProps;
 export type TabsProps<T extends TabItemProps = TabItemProps> = BaseTabsProps<T> & {
     vertical?: boolean;
     /** Optional <Tabs/> block connected to the currently active tab */

package/Tabs.js

@@ -4,7 +4,7 @@ exports.Tabs = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const frag_1 = require("@hugsmidjan/qj/frag");
-const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const seenEffect_js_1 = require("./utils/seenEffect.js");
 const utils_js_1 = require("./utils.js");
 const navKeyEffects = {
@@ -89,7 +89,7 @@ const Tabs = (props) => {
         listAriaControls,
         isBrowser,
     };
-    return (react_1.default.createElement("div", { className: (0, getBemClass_1.default)('Tabs', vertical && 'vertical'), role: tabRole && role, id: id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onKeyDown: handleKeydown, "data-sprinkled": isBrowser, ref: ref },
+    return (react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)('Tabs', vertical && 'vertical'), role: tabRole && role, id: id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, onKeyDown: handleKeydown, "data-sprinkled": isBrowser, ref: ref },
         tabs.map((tabProps, index) => renderTab(tabProps, index, listProps)),
         subTabs && (react_1.default.createElement(exports.Tabs, Object.assign({}, subTabs, { role: 'role' in subTabs ? subTabs.role : role, activateOnFocus: (_a = subTabs.activateOnFocus) !== null && _a !== void 0 ? _a : activateOnFocus, ssr: (_b = subTabs.ssr) !== null && _b !== void 0 ? _b : ssr, startSeen: true, 
             // just to be sure