@reykjavik/hanna-react 0.10.111 → 0.10.113

package/esm/MainMenu2.js

@@ -0,0 +1,230 @@
+import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { modifiedClass } from '@hugsmidjan/qj/classUtils';
+import { getIllustrationUrl } from '@reykjavik/hanna-utils/assets';
+import { getTexts } from '@reykjavik/hanna-utils/i18n';
+import { Link } from './_abstract/_Link.js';
+import { handleAnchorLinkClick } from './utils/a11yHelpers.js';
+import ButtonPrimary from './ButtonPrimary.js';
+import ButtonSecondary from './ButtonSecondary.js';
+import { FocusTrap } from './FocusTrap.js';
+import { useDomid, useIsBrowserSide, } from './utils.js';
+const htmlCl = 
+// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+(typeof document !== 'undefined') && document.documentElement.classList;
+const globalClasses = {
+    // menuIsActive: '.menu-is-active',
+    menuIsOpen: 'menu-is-open',
+    menuIsClosed: 'menu-is-closed',
+};
+export const defaultMainMenu2Texts = {
+    is: {
+        title: 'Aðalvalmynd',
+        homeLink: 'Forsíða',
+        openMenu: 'Valmynd',
+        openMenuLong: 'Opna Aðalvalmynd',
+        closeMenu: 'Loka',
+        closeMenuLong: 'Loka Aðalvalmynd',
+    },
+    en: {
+        title: 'Main Menu',
+        homeLink: 'Home page',
+        openMenu: 'Menu',
+        openMenuLong: 'Open main menu',
+        closeMenu: 'Close',
+        closeMenuLong: 'Close main menu',
+    },
+    pl: {
+        title: 'Menu główne',
+        homeLink: 'Strona główna',
+        openMenu: 'Menu',
+        openMenuLong: 'Otwórz menu główne',
+        closeMenu: 'Zamknij',
+        closeMenuLong: 'Zamknij menu główne',
+    },
+    se: {
+        title: 'Huvudmeny',
+        homeLink: 'Förstasida',
+        openMenu: 'Meny',
+        openMenuLong: 'Öppna huvudmenyn',
+        closeMenu: 'Stäng',
+        closeMenuLong: 'Stäng huvudmenyn',
+    },
+};
+// ---------------------------------------------------------------------------
+const iconMap = {
+    alert: 'info',
+    globe: undefined,
+    search: 'search',
+    user: 'user',
+    // NOTE: We're temporarily coerceing `IconName` to `ButtonIcon`
+    // TODO: Remove this once Hanna icons (and `ButtonIcons` sperifically)
+    // have been expanded better standardised.
+};
+/**
+ * Function that turns menu item props/objects into HTML
+ * rendering <a/> or <button/> elements depending on the context,
+ * Whether we're rendering the menu on the server or in the browser, etc.
+ */
+const getRenderers = (props) => {
+    const { onItemClick, closeMenu, isBrowser } = props;
+    // eslint-disable-next-line complexity
+    const renderItem = (classPrefix, item, opts = {}) => {
+        const { key, Tag = 'li', button } = opts;
+        if (typeof item === 'function') {
+            const Item = item;
+            return (React.createElement("li", { key: key, className: `${classPrefix}item` },
+                React.createElement(Item, { closeMenu: closeMenu })));
+        }
+        const linkClassName = `${classPrefix}link`;
+        const { label, labelLong, href, target, lang, controlsId, onClick, descr, icon } = item;
+        const itemDescr = descr && (React.createElement(React.Fragment, null,
+            ' ',
+            React.createElement("small", { className: `${linkClassName}__descr` }, descr)));
+        const ButtonTag = button ? ButtonSecondary : 'button';
+        const LinkTag = button ? ButtonSecondary : Link;
+        const buttonCompProps = button
+            ? {
+                size: 'small',
+                'data-icon': icon && iconMap[icon],
+            }
+            : undefined;
+        return (React.createElement(Tag, { key: key, className: modifiedClass(`${classPrefix}item`, item.modifier), "aria-current": item.current || undefined }, isBrowser && (onClick || !href) ? (React.createElement(ButtonTag, Object.assign({ className: linkClassName, type: "button", onClick: () => {
+                const keepOpen1 = onClick && onClick(item) === false;
+                const keepOpen2 = onItemClick && onItemClick(item) === false;
+                !(keepOpen1 || keepOpen2) && closeMenu();
+            }, "aria-controls": controlsId, "aria-label": labelLong, title: labelLong, lang: lang }, buttonCompProps),
+            label,
+            " ",
+            itemDescr)) : href ? (React.createElement(LinkTag, Object.assign({ className: linkClassName, href: href, target: target, "aria-label": labelLong, title: labelLong, onClick: () => {
+                const keepOpen = onItemClick && onItemClick(item) === false;
+                !keepOpen && closeMenu();
+            }, lang: lang, hrefLang: item.hrefLang }, buttonCompProps),
+            label,
+            " ",
+            itemDescr)) : null));
+    };
+    const renderList = (classSuffix, items, opts = {}) => {
+        if (!items || !items.length) {
+            return null;
+        }
+        return (React.createElement("ul", Object.assign({ className: `${classSuffix}items` }, opts.listProps), items.map((listItem, i) => renderItem(classSuffix, listItem, { key: i, button: opts.buttons }))));
+    };
+    return { renderList, renderItem };
+};
+// eslint-disable-next-line complexity
+export const MainMenu2 = (props) => {
+    const { homeLink = '/', items, onItemClick, illustration, imageUrl, wrapperProps = {}, } = props;
+    const domid = useDomid(wrapperProps.id);
+    const isBrowser = useIsBrowserSide(props.ssr);
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const _wrapperRef = useRef(null);
+    const wrapperRef = wrapperProps.ref || _wrapperRef;
+    const escHandler = useCallback(
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    (e) => e.key === 'Escape' && closeMenu(), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    const openMenu = () => {
+        htmlCl.add(globalClasses.menuIsOpen);
+        htmlCl.remove(globalClasses.menuIsClosed);
+        setIsMenuOpen(true);
+        document.addEventListener('keydown', escHandler);
+    };
+    const closeMenu = () => {
+        htmlCl.remove(globalClasses.menuIsOpen);
+        htmlCl.add(globalClasses.menuIsClosed);
+        setIsMenuOpen(false);
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        setActiveSubmenu(defaultActive);
+        wrapperRef.current.scrollTo(0, 0);
+        document.removeEventListener('keydown', escHandler);
+    };
+    useEffect(() => {
+        if (!isBrowser) {
+            return;
+        }
+        htmlCl.add(globalClasses.menuIsClosed);
+        return () => {
+            closeMenu();
+            htmlCl.remove(globalClasses.menuIsClosed);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isBrowser]);
+    const { mainItems, defaultActive } = useMemo(() => {
+        if (!items.main || !items.main.length) {
+            return { mainItems: undefined, defaultActive: -1 };
+        }
+        const mainItems = items.main.map((item) => {
+            var _a;
+            if (!('title' in item) || 'current' in item) {
+                return item;
+            }
+            const current = (_a = item.subItems.find((subItem) => 'current' in subItem && !!subItem.current)) === null || _a === void 0 ? void 0 : _a.current;
+            return Object.assign(Object.assign({}, item), { current });
+        });
+        const defaultActive = mainItems.findIndex((item) => 'current' in item && item.current);
+        return { mainItems, defaultActive };
+    }, [items.main]);
+    const [activeSubmenu, setActiveSubmenu] = useState(defaultActive);
+    // Insta-reset activeSubmenu when defaultActive changes (i.e. when the
+    // menu-items updated) because we otherwise retain the menu's
+    // activeSubmenu state between open/close cycles.
+    const lastDefaultActive = useRef(defaultActive);
+    if (defaultActive !== lastDefaultActive.current) {
+        lastDefaultActive.current = defaultActive;
+        setActiveSubmenu(defaultActive);
+    }
+    const txt = getTexts(props, defaultMainMenu2Texts);
+    const { renderItem, renderList } = getRenderers({
+        onItemClick,
+        closeMenu,
+        isBrowser,
+    });
+    const homeLinkItem = Object.assign(Object.assign({}, (typeof homeLink === 'string'
+        ? { href: homeLink, label: txt.homeLink }
+        : homeLink)), { modifier: 'home' });
+    const menuImageUrl = imageUrl || (illustration && getIllustrationUrl(illustration));
+    const menuId = `${domid}-menu`;
+    return (React.createElement("nav", Object.assign({}, props.wrapperProps, { className: modifiedClass('MainMenu2', isBrowser && (isMenuOpen ? 'open' : 'closed'), wrapperProps.className), style: menuImageUrl
+            ? Object.assign(Object.assign({}, wrapperProps.style), { '--menu-image': `url(${menuImageUrl})` })
+            : wrapperProps.style, ref: wrapperRef, "aria-label": txt.title, "data-sprinkled": isBrowser, id: menuId }),
+        isMenuOpen && React.createElement(FocusTrap, { atTop: true }),
+        React.createElement("div", { className: "MainMenu2__content" },
+            React.createElement("h2", { className: "MainMenu2__title" }, txt.title),
+            isBrowser ? (React.createElement(ButtonPrimary, Object.assign({ className: "MainMenu2__toggler", size: "small", type: "button", "aria-pressed": isMenuOpen, "aria-controls": menuId, "data-icon": "text" }, (isMenuOpen
+                ? {
+                    onClick: closeMenu,
+                    'aria-label': txt.closeMenuLong,
+                    title: txt.closeMenuLong,
+                    children: txt.closeMenu,
+                }
+                : {
+                    onClick: openMenu,
+                    'aria-label': txt.openMenuLong,
+                    title: txt.openMenuLong,
+                    children: txt.openMenu,
+                })))) : (React.createElement(ButtonPrimary, { className: "MainMenu2__toggler", size: "small", href: `#${menuId}`, onClick: handleAnchorLinkClick, "aria-hidden": "true", "data-icon": "text" }, txt.title)),
+            mainItems && (React.createElement("div", { className: modifiedClass('MainMenu2__main', activeSubmenu < 0 && 'noneActive') },
+                renderItem('MainMenu2__main__', homeLinkItem, { Tag: 'div' }),
+                mainItems.map((mainItem, i) => {
+                    if ('title' in mainItem) {
+                        const submenuId = `${domid}-submenu-${i}`;
+                        const isActive = i === activeSubmenu;
+                        return (React.createElement(Fragment, { key: i },
+                            React.createElement("div", { className: "MainMenu2__main__item", "aria-current": mainItem.current || undefined }, isBrowser ? (React.createElement("button", { className: "MainMenu2__main__link", type: "button", onClick: () => setActiveSubmenu(i), "aria-controls": submenuId, "aria-pressed": isActive }, mainItem.title)) : (React.createElement("strong", { className: "MainMenu2__main__link" }, mainItem.title))),
+                            renderList('MainMenu2__main__sub__', mainItem.subItems, isBrowser && {
+                                listProps: {
+                                    id: submenuId,
+                                    hidden: !isActive,
+                                },
+                            })));
+                    }
+                    return renderItem('MainMenu2__main__', mainItem, { key: i, Tag: 'div' });
+                }))),
+            renderList('MainMenu2__hot__', items.hot, { buttons: true }),
+            renderList('MainMenu2__extra__', items.extra, { buttons: true }),
+            items.related && items.related.length > 0 && (React.createElement("div", { className: "MainMenu2__related" },
+                items.relatedTitle && (React.createElement("h3", { className: "MainMenu2__related__title" }, items.relatedTitle)),
+                renderList('MainMenu2__related__', items.related)))),
+        isMenuOpen && React.createElement(FocusTrap, null)));
+};

package/esm/MobileMenuToggler/_useMobileMenuToggling.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+type MenuTogglingState = {
+    isMenuActive: true | undefined;
+    isMenuOpen: boolean;
+    toggleMenu: () => void;
+    closeMenu: () => void;
+    uiState: MobileMenuTogglerState;
+};
+type Opts = {
+    doInitialize?: boolean;
+    togglerElm?: string | HTMLElement;
+};
+export declare const useMobileMenuToggling: (opts?: boolean | Opts) => MenuTogglingState;
+export type MobileMenuTogglerState = {
+    closeHamburgerMenu: () => void;
+    isHamburgerMenuOpen: boolean | undefined;
+    isHamburgerMenuActive: boolean | undefined;
+};
+export declare const MobileMenuStateProvider: import("react").Provider<MobileMenuTogglerState>;
+export declare const useMobileMenuTogglerState: () => MobileMenuTogglerState;
+export {};

package/esm/{utils/useMenuToggling.js → MobileMenuToggler/_useMobileMenuToggling.js}

@@ -1,12 +1,17 @@
-import { useRef, useState } from 'react';
+import { createContext, useContext, useRef, useState } from 'react';
 import { focusElement } from '@reykjavik/hanna-utils';
-import { useFormatMonitor } from './useFormatMonitor.js';
+import { useFormatMonitor } from '../utils/useFormatMonitor.js';
 const htmlClass = (className, add) => {
     document.documentElement.classList[add ? 'add' : 'remove'](className);
 };
 const noop = () => undefined;
-// ---------------------------------------------------------------------------
-export const useMenuToggling = (doInitialize = true) => {
+const HamburgerMedias = { phone: 1, phablet: 1, tablet: 1 };
+export const useMobileMenuToggling = (opts) => {
+    const { doInitialize, togglerElm = '.MainMenuToggler' } = typeof opts === 'boolean'
+        ? ({ doInitialize: opts })
+        : !opts
+            ? ({ doInitialize: true })
+            : opts;
     const stateRef = useRef({
         isMenuOpen: false,
         isMenuActive: undefined,
@@ -19,16 +24,17 @@ export const useMenuToggling = (doInitialize = true) => {
             }
             : noop,
         // eslint-disable-next-line @typescript-eslint/no-use-before-define
-        closeMenu: () => doInitialize && _closeMenu(),
+        closeMenu: doInitialize ? () => _closeMenu() : noop,
     });
-    const [{ isMenuOpen, isMenuActive, uiState }, setMenuState] = useState({
+    const [{ isMenuOpen, isMenuActive, uiState }, setMenuState] = useState(() => ({
         isMenuOpen: false,
         isMenuActive: undefined,
         uiState: {
             closeHamburgerMenu: () => stateRef.current.closeMenu(),
             isHamburgerMenuOpen: false,
+            isHamburgerMenuActive: false,
         },
-    });
+    }));
     stateRef.current.isMenuOpen = isMenuOpen;
     stateRef.current.isMenuActive = isMenuActive;
     const _openMenu = () => {
@@ -36,7 +42,11 @@ export const useMenuToggling = (doInitialize = true) => {
             setMenuState((state) => (Object.assign(Object.assign({}, state), { isMenuOpen: true, uiState: Object.assign(Object.assign({}, state.uiState), { isHamburgerMenuOpen: true }) })));
             htmlClass('menu-is-open', true);
             htmlClass('menu-is-closed', false);
-            focusElement('#pagenav');
+            const toggler = typeof togglerElm === 'string' ? document.querySelector(togglerElm) : togglerElm;
+            const menuElmId = toggler === null || toggler === void 0 ? void 0 : toggler.getAttribute('aria-controls');
+            if (menuElmId) {
+                focusElement('#' + menuElmId);
+            }
         }
     };
     const _closeMenu = () => {
@@ -44,19 +54,21 @@ export const useMenuToggling = (doInitialize = true) => {
             setMenuState((state) => (Object.assign(Object.assign({}, state), { isMenuOpen: false, uiState: Object.assign(Object.assign({}, state.uiState), { isHamburgerMenuOpen: false }) })));
             htmlClass('menu-is-closed', true);
             htmlClass('menu-is-open', false);
-            focusElement('.Layout__header__skiplink');
+            focusElement(togglerElm);
         }
     };
     useFormatMonitor(doInitialize
         ? (media) => {
-            if (media.becameHamburger) {
-                setMenuState((state) => (Object.assign(Object.assign({}, state), { isMenuActive: true })));
+            const becameHamburger = HamburgerMedias[media.is] && !HamburgerMedias[media.was || ''];
+            const leftHamburger = !HamburgerMedias[media.is] && HamburgerMedias[media.was || ''];
+            if (becameHamburger) {
+                setMenuState((state) => (Object.assign(Object.assign({}, state), { isMenuActive: true, uiState: Object.assign(Object.assign({}, state.uiState), { isHamburgerMenuActive: true }) })));
                 htmlClass('menu-is-active', true);
                 htmlClass('menu-is-closed', true);
             }
-            if (media.leftHamburger) {
+            else if (leftHamburger) {
                 _closeMenu();
-                setMenuState((state) => (Object.assign(Object.assign({}, state), { isMenuActive: undefined })));
+                setMenuState((state) => (Object.assign(Object.assign({}, state), { isMenuActive: undefined, uiState: Object.assign(Object.assign({}, state.uiState), { isHamburgerMenuActive: false }) })));
                 htmlClass('menu-is-active', false);
                 htmlClass('menu-is-closed', false);
             }
@@ -70,3 +82,10 @@ export const useMenuToggling = (doInitialize = true) => {
         uiState,
     };
 };
+const _MobileMenuTogglerContext = createContext({
+    closeHamburgerMenu: () => undefined,
+    isHamburgerMenuOpen: undefined,
+    isHamburgerMenuActive: undefined,
+});
+export const MobileMenuStateProvider = _MobileMenuTogglerContext.Provider;
+export const useMobileMenuTogglerState = () => useContext(_MobileMenuTogglerContext);

package/esm/MobileMenuToggler.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
+import { I18NProps } from './utils/types.js';
+import { SSRSupportProps } from './utils.js';
+export type MobileMenuTogglerI18n = {
+    togglerLabel: string;
+    closeMenuLabel: string;
+    closeMenuLabelLong?: string;
+};
+export declare const defaultMobileMenuTogglerTexts: DefaultTexts<MobileMenuTogglerI18n>;
+export type MobileMenuTogglerProps = {
+    /** The DOM id of the menu that is being toggled */
+    controlsId: string;
+    children: NonNullable<ReactNode>;
+} & I18NProps<MobileMenuTogglerI18n> & SSRSupportProps;
+/**
+ * A wrapper component that handles conditional hiding/toggling
+ * behavior, similar to the one `MainMenu` uses.
+ */
+export declare const MobileMenuToggler: (props: MobileMenuTogglerProps) => JSX.Element;
+export { type MobileMenuTogglerState, useMobileMenuTogglerState, } from './MobileMenuToggler/_useMobileMenuToggling.js';

package/esm/MobileMenuToggler.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { getTexts } from '@reykjavik/hanna-utils/i18n';
+import { MobileMenuStateProvider, useMobileMenuToggling, } from './MobileMenuToggler/_useMobileMenuToggling.js';
+export const defaultMobileMenuTogglerTexts = {
+    is: {
+        togglerLabel: 'Opna/loka Aðalvalmynd',
+        closeMenuLabel: 'Loka',
+        closeMenuLabelLong: 'Loka aðalvalmynd',
+    },
+    en: {
+        togglerLabel: 'Toggle Main Menu',
+        closeMenuLabel: 'Close',
+        closeMenuLabelLong: 'Close main menu',
+    },
+    pl: {
+        togglerLabel: 'Otwórz/zamknij menu główne',
+        closeMenuLabel: 'Zamknij',
+        closeMenuLabelLong: 'Zamknij menu główne',
+    },
+};
+/**
+ * A wrapper component that handles conditional hiding/toggling
+ * behavior, similar to the one `MainMenu` uses.
+ */
+export const MobileMenuToggler = (props) => {
+    const { isMenuActive, isMenuOpen, uiState, closeMenu, toggleMenu } = useMobileMenuToggling({
+        doInitialize: props.ssr !== 'ssr-only',
+    });
+    const txt = getTexts(props, defaultMobileMenuTogglerTexts);
+    // const isBrowser = useIsBrowserSide()
+    return (React.createElement(React.Fragment, null,
+        isMenuActive && (React.createElement("button", { className: "MobileMenuToggler", onClick: toggleMenu, "aria-controls": props.controlsId, "aria-pressed": isMenuOpen }, txt.togglerLabel)),
+        React.createElement(MobileMenuStateProvider, { value: uiState }, props.children),
+        isMenuActive && (React.createElement("button", { className: "MobileMenuToggler__closebutton", onClick: closeMenu, "aria-label": txt.closeMenuLabelLong, type: "button" }, txt.closeMenuLabel))));
+};
+// ---------------------------------------------------------------------------
+export { useMobileMenuTogglerState, } from './MobileMenuToggler/_useMobileMenuToggling.js';

package/esm/Multiselect.js

@@ -3,11 +3,11 @@ import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import domId from '@hugsmidjan/qj/domid';
 import { notNully } from '@reykjavik/hanna-utils';
 import { getTexts } from '@reykjavik/hanna-utils/i18n';
-import { FocusTrap } from './_abstract/_FocusTrap.js';
 import { filterItems } from './Multiselect/_Multiselect.search.js';
 import { useDomid } from './utils/useDomid.js';
 import { useOnClickOutside } from './utils/useOnClickOutside.js';
 import Checkbox from './Checkbox.js';
+import { FocusTrap } from './FocusTrap.js';
 import FormField, { getFormFieldWrapperProps } from './FormField.js';
 import TagPill from './TagPill.js';
 import { useMixedControlState } from './utils.js';
@@ -101,9 +101,12 @@ export const Multiselect = (props) => {
         const _newValues = isAdding
             ? [...values, selValue]
             : values.filter((value) => value !== selValue);
-        const selectedValues = options
-            .filter((item) => _newValues.includes(item.value))
-            .map((item) => item.value);
+        const selectedValues = [
+            // deduplicate selectedValues
+            ...new Set(options
+                .filter((item) => _newValues.includes(item.value))
+                .map((item) => item.value)),
+        ];
         setValues(selectedValues);
         if (onSelected) {
             onSelected({
@@ -217,6 +220,10 @@ export const Multiselect = (props) => {
                             removable: true,
                             onRemove: () => {
                                 handleCheckboxSelection(item);
+                                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                                inputWrapperRef
+                                    .current.querySelector('.Multiselect__choices')
+                                    .focus();
                             },
                         }
                         : { removable: false }))))))),
@@ -229,7 +236,7 @@ export const Multiselect = (props) => {
                             const insertGroupSeparator = !isFiltered &&
                                 item.group !== (filteredOptions[idx - 1] || {}).group &&
                                 (idx > 0 || !!item.group);
-                            const checkbox = (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: {
+                            const checkbox = (React.createElement(Checkbox, Object.assign({ key: idx, className: modifiedClass('Multiselect__option', activeItemIndex === idx && 'focused'), reqText: false, 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),
                                 } })));
                             return insertGroupSeparator ? (React.createElement(Fragment, { key: idx },

package/esm/TagPill.d.ts

@@ -10,6 +10,8 @@ declare const colors: {
 };
 export type TagPillColor = keyof typeof colors;
 export type TagPillProps = ButtonProps & {
+    /** Not allowed */
+    className?: never;
     children?: ReactNode;
     large?: boolean;
     color?: TagPillColor;

package/esm/_abstract/_AbstractModal.js

@@ -2,9 +2,9 @@ import React, { Fragment, useEffect, useRef, useState, } from 'react';
 import { modifiedClass } from '@hugsmidjan/qj/classUtils';
 import { focusElm } from '@hugsmidjan/qj/focusElm';
 import { getTexts } from '@reykjavik/hanna-utils/i18n';
+import { FocusTrap } from '../FocusTrap.js';
 import { useDomid, useIsBrowserSide, } from '../utils.js';
 import { useCallbackOnEsc } from '../utils/useCallbackOnEsc.js';
-import { FocusTrap } from './_FocusTrap.js';
 import { Portal } from './_Portal.js';
 const MODAL_OPEN_CLASS = 'modal-open';
 // ---------------------------------------------------------------------------
@@ -70,12 +70,17 @@ export const AbstractModal = (props) => {
             setTimeout(props.onClosed, closeDelay);
         }
     };
+    // ---
+    // Update open state when props.open changes. Icky but simple.
     const lastPropsOpen = useRef(props.open);
-    // Update state when props.open changes. Icky but simple.
     if (props.open !== lastPropsOpen.current && props.open !== open) {
         lastPropsOpen.current = props.open;
+        // these update state during render, which aborts the current render
+        // and triggers an immediate rerender.
         props.open ? openModal() : closeModal();
     }
+    lastPropsOpen.current = props.open;
+    // ---
     const closeOnCurtainClick = isFickle &&
         ((e) => {
             if (e.target === e.currentTarget) {

package/esm/_abstract/_Button.d.ts

@@ -2,13 +2,13 @@ import { ReactNode } from 'react';
 import { BemModifierProps, BemProps } from '../utils/types.js';
 type ButtonElmProps = {
     href?: never;
-} & BemModifierProps & Omit<JSX.IntrinsicElements['button'], 'className' | 'style'>;
+} & BemModifierProps & JSX.IntrinsicElements['button'];
 type AnchorElmProps = {
     href: string;
     type?: never;
     name?: never;
     value?: never;
-} & BemModifierProps & Omit<JSX.IntrinsicElements['a'], 'className' | 'style'>;
+} & BemModifierProps & JSX.IntrinsicElements['a'];
 export type ButtonProps = {
     /** Label takes preference over `children` */
     label?: string | JSX.Element;
@@ -25,7 +25,7 @@ declare const variants: {
 };
 type ButtonVariant = keyof typeof variants;
 type NavigationFlag = 'none' | 'go-back' | 'go-forward';
-type ButtonIcon = 'edit';
+export type ButtonIcon = 'edit';
 export type ButtonVariantProps = {
     size?: ButtonSize;
     variant?: ButtonVariant;

package/esm/_abstract/_Button.js

@@ -28,12 +28,12 @@ export const Button = (props) => {
     const { bem, small, // eslint-disable-line deprecation/deprecation
     size = small ? 'small' : 'normal', modifier, children, variant = 'normal', icon = 'none', label = children } = props, buttonProps = __rest(props, ["bem", "small", "size", "modifier", "children", "variant", "icon", "label"]);
     const className = bem &&
-        modifiedClass(bem, [modifier, variants[variant], sizes[size], navigationFlags[icon]]);
+        modifiedClass(bem, [modifier, variants[variant], sizes[size], navigationFlags[icon]], props.className);
     const iconProp = icons[icon] && { 'data-icon': icons[icon] };
     if (buttonProps.href != null) {
-        return (React.createElement(Link, Object.assign({ className: className }, buttonProps, { style: undefined }, iconProp), label));
+        return (React.createElement(Link, Object.assign({}, buttonProps, { className: className }, iconProp), label));
     }
     else {
-        return (React.createElement("button", Object.assign({ className: className, type: "button" }, buttonProps, { style: undefined }, iconProp), label));
+        return (React.createElement("button", Object.assign({ type: "button" }, buttonProps, { className: className }, iconProp), label));
     }
 };

package/esm/_abstract/_Table.d.ts

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import { HTMLProps, WrapperElmProps } from '../utils.js';
 type SectionTag = 'thead' | 'tfoot' | 'tbody';
-type RowPropsFunction = (rowIdx: number, section: SectionTag) => HTMLProps<'tr'> | undefined;
+type RowPropsFunction = (rowIdx: number, section: SectionTag, rowData: Array<TableCellData>) => HTMLProps<'tr'> | undefined;
 export type TableCellMeta = {
     className?: string;
     number?: false;
@@ -28,7 +28,7 @@ export type TableCellData = {
     colSpan?: number;
     key?: string | number;
 } & TableCellMeta;
-type RowData = {
+type _RowData = {
     cells: Array<TableCellData>;
     key: string | number | undefined;
 };
@@ -55,7 +55,7 @@ export type TableData = {
     tbodies: Array<TableBody>;
 });
 type TableSectionProps = {
-    section: Array<RowData>;
+    section: Array<_RowData>;
     cols?: TableCols;
     Tag: SectionTag;
     getRowProps: RowPropsFunction;

package/esm/_abstract/_Table.js

@@ -20,7 +20,7 @@ const TableCell = (props) => {
 };
 const TableSection = ({ section, cols = [], Tag, getRowProps }) => section.length ? (React.createElement(Tag, null, section.map(({ key, cells }, rowIdx) => {
     let colIdx = 0;
-    return (React.createElement("tr", Object.assign({}, getRowProps(rowIdx, Tag), { key: key != null ? key : rowIdx }), cells.map((cell, i) => {
+    return (React.createElement("tr", Object.assign({}, getRowProps(rowIdx, Tag, cells), { key: key != null ? key : rowIdx }), cells.map((cell, i) => {
         const rowScope = i === 0;
         const meta = cols[colIdx];
         colIdx += cell.colSpan || 1;

package/esm/index.d.ts

@@ -41,7 +41,9 @@
 /// <reference path="./NameCard.d.tsx" />
 /// <reference path="./Multiselect.d.tsx" />
 /// <reference path="./Modal.d.tsx" />
+/// <reference path="./MobileMenuToggler.d.tsx" />
 /// <reference path="./MiniMetrics.d.tsx" />
+/// <reference path="./MainMenu2.d.tsx" />
 /// <reference path="./MainMenu.d.tsx" />
 /// <reference path="./Layout.d.tsx" />
 /// <reference path="./LabeledTextBlock.d.tsx" />
@@ -62,6 +64,7 @@
 /// <reference path="./FooterInfo.d.tsx" />
 /// <reference path="./FooterBadges.d.tsx" />
 /// <reference path="./Foonote.d.tsx" />
+/// <reference path="./FocusTrap.d.tsx" />
 /// <reference path="./FileInput.d.tsx" />
 /// <reference path="./FieldGroup.d.tsx" />
 /// <reference path="./FeatureList.d.tsx" />

package/esm/utils/a11yHelpers.d.ts

@@ -0,0 +1,2 @@
+import { MouseEventHandler } from 'react';
+export declare const handleAnchorLinkClick: MouseEventHandler<HTMLAnchorElement>;

package/esm/utils/a11yHelpers.js

@@ -0,0 +1,11 @@
+import { focusElement } from '@reykjavik/hanna-utils';
+export const handleAnchorLinkClick = (e) => {
+    e.preventDefault();
+    const targetId = e.currentTarget.hash.slice(1);
+    const targetElm = targetId && document.getElementById(targetId);
+    if (!targetElm) {
+        return;
+    }
+    targetElm.tabIndex = -1;
+    focusElement(targetElm);
+};

package/esm/utils/types.d.ts

@@ -13,3 +13,7 @@ export type BemProps<Required extends boolean = false> = BemModifierProps & (Req
     /** CSS BEM class-name prefix to be used for this component. Defaults to the same as the original component's displayName */
     bem?: string;
 });
+export type I18NProps<Texts extends Record<string, unknown>> = {
+    texts?: Texts;
+    lang?: string;
+};

package/esm/utils/useFormatMonitor.d.ts

@@ -1,3 +1,4 @@
+import { MediaFormat } from '@reykjavik/hanna-utils';
 /**
  * Pass a callback that gets called whenever the browser window
  * resizes past one of the preconfigured "media-format" breakpoints.
@@ -25,16 +26,8 @@
  *  // type Formats = 'phone' | 'phablet' | 'tablet' | 'netbook' | 'wide'
  *  media.is // : Format
  *  media.was // ?: Format
- *  // Category/mode boolean flags
- *  // (Hamburger refers to the "mobile menu" mode)
- *  media.isTopmenu
- *  media.isHamburger
- *  media.wasTopmenu
- *  media.wasHamburger
- *  media.becameTopmenu
- *  media.becameHamburger
- *  media.leftTopmenu
- *  media.leftHamburger
  * ```
  */
-export declare const useFormatMonitor: (callback: ((media: import("formatchange").BaseMedia & Record<"isHamburger" | "isTopmenu" | "wasHamburger" | "wasTopmenu" | "becameHamburger" | "becameTopmenu" | "leftHamburger" | "leftTopmenu", boolean>) => void) | undefined) => void;
+export declare const useFormatMonitor: HookTypeWithDeprecation;
+type HookTypeWithDeprecation = (callback: (media: MediaFormat) => void) => void;
+export {};