@reykjavik/hanna-react 0.10.112 → 0.10.113

package/MainMenu2.js

@@ -0,0 +1,235 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MainMenu2 = exports.defaultMainMenu2Texts = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const classUtils_1 = require("@hugsmidjan/qj/classUtils");
+const assets_1 = require("@reykjavik/hanna-utils/assets");
+const i18n_1 = require("@reykjavik/hanna-utils/i18n");
+const _Link_js_1 = require("./_abstract/_Link.js");
+const a11yHelpers_js_1 = require("./utils/a11yHelpers.js");
+const ButtonPrimary_js_1 = tslib_1.__importDefault(require("./ButtonPrimary.js"));
+const ButtonSecondary_js_1 = tslib_1.__importDefault(require("./ButtonSecondary.js"));
+const FocusTrap_js_1 = require("./FocusTrap.js");
+const utils_js_1 = require("./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',
+};
+exports.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_1.default.createElement("li", { key: key, className: `${classPrefix}item` },
+                react_1.default.createElement(Item, { closeMenu: closeMenu })));
+        }
+        const linkClassName = `${classPrefix}link`;
+        const { label, labelLong, href, target, lang, controlsId, onClick, descr, icon } = item;
+        const itemDescr = descr && (react_1.default.createElement(react_1.default.Fragment, null,
+            ' ',
+            react_1.default.createElement("small", { className: `${linkClassName}__descr` }, descr)));
+        const ButtonTag = button ? ButtonSecondary_js_1.default : 'button';
+        const LinkTag = button ? ButtonSecondary_js_1.default : _Link_js_1.Link;
+        const buttonCompProps = button
+            ? {
+                size: 'small',
+                'data-icon': icon && iconMap[icon],
+            }
+            : undefined;
+        return (react_1.default.createElement(Tag, { key: key, className: (0, classUtils_1.modifiedClass)(`${classPrefix}item`, item.modifier), "aria-current": item.current || undefined }, isBrowser && (onClick || !href) ? (react_1.default.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_1.default.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_1.default.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
+const MainMenu2 = (props) => {
+    const { homeLink = '/', items, onItemClick, illustration, imageUrl, wrapperProps = {}, } = props;
+    const domid = (0, utils_js_1.useDomid)(wrapperProps.id);
+    const isBrowser = (0, utils_js_1.useIsBrowserSide)(props.ssr);
+    const [isMenuOpen, setIsMenuOpen] = (0, react_1.useState)(false);
+    const _wrapperRef = (0, react_1.useRef)(null);
+    const wrapperRef = wrapperProps.ref || _wrapperRef;
+    const escHandler = (0, react_1.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);
+    };
+    (0, react_1.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 } = (0, react_1.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] = (0, react_1.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 = (0, react_1.useRef)(defaultActive);
+    if (defaultActive !== lastDefaultActive.current) {
+        lastDefaultActive.current = defaultActive;
+        setActiveSubmenu(defaultActive);
+    }
+    const txt = (0, i18n_1.getTexts)(props, exports.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 && (0, assets_1.getIllustrationUrl)(illustration));
+    const menuId = `${domid}-menu`;
+    return (react_1.default.createElement("nav", Object.assign({}, props.wrapperProps, { className: (0, classUtils_1.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_1.default.createElement(FocusTrap_js_1.FocusTrap, { atTop: true }),
+        react_1.default.createElement("div", { className: "MainMenu2__content" },
+            react_1.default.createElement("h2", { className: "MainMenu2__title" }, txt.title),
+            isBrowser ? (react_1.default.createElement(ButtonPrimary_js_1.default, 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_1.default.createElement(ButtonPrimary_js_1.default, { className: "MainMenu2__toggler", size: "small", href: `#${menuId}`, onClick: a11yHelpers_js_1.handleAnchorLinkClick, "aria-hidden": "true", "data-icon": "text" }, txt.title)),
+            mainItems && (react_1.default.createElement("div", { className: (0, classUtils_1.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_1.default.createElement(react_1.Fragment, { key: i },
+                            react_1.default.createElement("div", { className: "MainMenu2__main__item", "aria-current": mainItem.current || undefined }, isBrowser ? (react_1.default.createElement("button", { className: "MainMenu2__main__link", type: "button", onClick: () => setActiveSubmenu(i), "aria-controls": submenuId, "aria-pressed": isActive }, mainItem.title)) : (react_1.default.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_1.default.createElement("div", { className: "MainMenu2__related" },
+                items.relatedTitle && (react_1.default.createElement("h3", { className: "MainMenu2__related__title" }, items.relatedTitle)),
+                renderList('MainMenu2__related__', items.related)))),
+        isMenuOpen && react_1.default.createElement(FocusTrap_js_1.FocusTrap, null)));
+};
+exports.MainMenu2 = MainMenu2;

package/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/{utils/useMenuToggling.js → MobileMenuToggler/_useMobileMenuToggling.js}

@@ -1,15 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMenuToggling = void 0;
+exports.useMobileMenuTogglerState = exports.MobileMenuStateProvider = exports.useMobileMenuToggling = void 0;
 const react_1 = require("react");
 const hanna_utils_1 = require("@reykjavik/hanna-utils");
-const useFormatMonitor_js_1 = require("./useFormatMonitor.js");
+const useFormatMonitor_js_1 = require("../utils/useFormatMonitor.js");
 const htmlClass = (className, add) => {
     document.documentElement.classList[add ? 'add' : 'remove'](className);
 };
 const noop = () => undefined;
-// ---------------------------------------------------------------------------
-const useMenuToggling = (doInitialize = true) => {
+const HamburgerMedias = { phone: 1, phablet: 1, tablet: 1 };
+const useMobileMenuToggling = (opts) => {
+    const { doInitialize, togglerElm = '.MainMenuToggler' } = typeof opts === 'boolean'
+        ? ({ doInitialize: opts })
+        : !opts
+            ? ({ doInitialize: true })
+            : opts;
     const stateRef = (0, react_1.useRef)({
         isMenuOpen: false,
         isMenuActive: undefined,
@@ -22,16 +27,17 @@ 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] = (0, react_1.useState)({
+    const [{ isMenuOpen, isMenuActive, uiState }, setMenuState] = (0, react_1.useState)(() => ({
         isMenuOpen: false,
         isMenuActive: undefined,
         uiState: {
             closeHamburgerMenu: () => stateRef.current.closeMenu(),
             isHamburgerMenuOpen: false,
+            isHamburgerMenuActive: false,
         },
-    });
+    }));
     stateRef.current.isMenuOpen = isMenuOpen;
     stateRef.current.isMenuActive = isMenuActive;
     const _openMenu = () => {
@@ -39,7 +45,11 @@ 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);
-            (0, hanna_utils_1.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) {
+                (0, hanna_utils_1.focusElement)('#' + menuElmId);
+            }
         }
     };
     const _closeMenu = () => {
@@ -47,19 +57,21 @@ 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);
-            (0, hanna_utils_1.focusElement)('.Layout__header__skiplink');
+            (0, hanna_utils_1.focusElement)(togglerElm);
         }
     };
     (0, useFormatMonitor_js_1.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);
             }
@@ -73,4 +85,12 @@ const useMenuToggling = (doInitialize = true) => {
         uiState,
     };
 };
-exports.useMenuToggling = useMenuToggling;
+exports.useMobileMenuToggling = useMobileMenuToggling;
+const _MobileMenuTogglerContext = (0, react_1.createContext)({
+    closeHamburgerMenu: () => undefined,
+    isHamburgerMenuOpen: undefined,
+    isHamburgerMenuActive: undefined,
+});
+exports.MobileMenuStateProvider = _MobileMenuTogglerContext.Provider;
+const useMobileMenuTogglerState = () => (0, react_1.useContext)(_MobileMenuTogglerContext);
+exports.useMobileMenuTogglerState = useMobileMenuTogglerState;

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMobileMenuTogglerState = exports.MobileMenuToggler = exports.defaultMobileMenuTogglerTexts = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const i18n_1 = require("@reykjavik/hanna-utils/i18n");
+const _useMobileMenuToggling_js_1 = require("./MobileMenuToggler/_useMobileMenuToggling.js");
+exports.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.
+ */
+const MobileMenuToggler = (props) => {
+    const { isMenuActive, isMenuOpen, uiState, closeMenu, toggleMenu } = (0, _useMobileMenuToggling_js_1.useMobileMenuToggling)({
+        doInitialize: props.ssr !== 'ssr-only',
+    });
+    const txt = (0, i18n_1.getTexts)(props, exports.defaultMobileMenuTogglerTexts);
+    // const isBrowser = useIsBrowserSide()
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        isMenuActive && (react_1.default.createElement("button", { className: "MobileMenuToggler", onClick: toggleMenu, "aria-controls": props.controlsId, "aria-pressed": isMenuOpen }, txt.togglerLabel)),
+        react_1.default.createElement(_useMobileMenuToggling_js_1.MobileMenuStateProvider, { value: uiState }, props.children),
+        isMenuActive && (react_1.default.createElement("button", { className: "MobileMenuToggler__closebutton", onClick: closeMenu, "aria-label": txt.closeMenuLabelLong, type: "button" }, txt.closeMenuLabel))));
+};
+exports.MobileMenuToggler = MobileMenuToggler;
+// ---------------------------------------------------------------------------
+var _useMobileMenuToggling_js_2 = require("./MobileMenuToggler/_useMobileMenuToggling.js");
+Object.defineProperty(exports, "useMobileMenuTogglerState", { enumerable: true, get: function () { return _useMobileMenuToggling_js_2.useMobileMenuTogglerState; } });

package/Multiselect.js

@@ -7,11 +7,11 @@ const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const domid_1 = tslib_1.__importDefault(require("@hugsmidjan/qj/domid"));
 const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
-const _FocusTrap_js_1 = require("./_abstract/_FocusTrap.js");
 const _Multiselect_search_js_1 = require("./Multiselect/_Multiselect.search.js");
 const useDomid_js_1 = require("./utils/useDomid.js");
 const useOnClickOutside_js_1 = require("./utils/useOnClickOutside.js");
 const Checkbox_js_1 = tslib_1.__importDefault(require("./Checkbox.js"));
+const FocusTrap_js_1 = require("./FocusTrap.js");
 const FormField_js_1 = tslib_1.__importStar(require("./FormField.js"));
 const TagPill_js_1 = tslib_1.__importDefault(require("./TagPill.js"));
 const utils_js_1 = require("./utils.js");
@@ -105,9 +105,12 @@ 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({
@@ -221,6 +224,10 @@ 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 }))))))),
@@ -233,14 +240,14 @@ const Multiselect = (props) => {
                             const insertGroupSeparator = !isFiltered &&
                                 item.group !== (filteredOptions[idx - 1] || {}).group &&
                                 (idx > 0 || !!item.group);
-                            const checkbox = (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: {
+                            const checkbox = (react_1.default.createElement(Checkbox_js_1.default, Object.assign({ key: idx, className: (0, classUtils_1.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_1.default.createElement(react_1.Fragment, { key: idx },
                                 react_1.default.createElement("li", { className: (0, classUtils_1.modifiedClass)('Multiselect__optionSeparator', !item.group && 'empty'), "aria-label": item.group ? undefined : '—' }, item.group || false),
                                 checkbox)) : (checkbox);
                         })) : searchQuery ? (react_1.default.createElement("li", { className: "Multiselect__noresults" }, texts.noneFoundMsg)) : undefined,
-                        isBrowser && react_1.default.createElement(_FocusTrap_js_1.FocusTrap, { Tag: "li" })))));
+                        isBrowser && react_1.default.createElement(FocusTrap_js_1.FocusTrap, { Tag: "li" })))));
         } })));
 };
 exports.Multiselect = Multiselect;

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

@@ -6,9 +6,9 @@ const react_1 = tslib_1.__importStar(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const focusElm_1 = require("@hugsmidjan/qj/focusElm");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
+const FocusTrap_js_1 = require("../FocusTrap.js");
 const utils_js_1 = require("../utils.js");
 const useCallbackOnEsc_js_1 = require("../utils/useCallbackOnEsc.js");
-const _FocusTrap_js_1 = require("./_FocusTrap.js");
 const _Portal_js_1 = require("./_Portal.js");
 const MODAL_OPEN_CLASS = 'modal-open';
 // ---------------------------------------------------------------------------
@@ -121,10 +121,10 @@ const AbstractModal = (props) => {
                     onClick(e);
                 }
                 : closeOnCurtainClick || onClick, id: domid }),
-            isBrowser && react_1.default.createElement(_FocusTrap_js_1.FocusTrap, { atTop: true }),
+            isBrowser && react_1.default.createElement(FocusTrap_js_1.FocusTrap, { atTop: true }),
             react_1.default.createElement("div", { className: (0, classUtils_1.modifiedClass)(bem, modifier), ref: modalElmRef },
                 children,
                 isBrowser && !props.noCloseButton && (react_1.default.createElement("button", { className: `${bem}__closebutton`, type: "button", onClick: closeModal, "aria-label": closeButtonLabel, "aria-controls": domid, title: closeButtonLabel }, txt.closeButton))),
-            isBrowser && react_1.default.createElement(_FocusTrap_js_1.FocusTrap, { atTop: true }))));
+            isBrowser && react_1.default.createElement(FocusTrap_js_1.FocusTrap, { atTop: true }))));
 };
 exports.AbstractModal = AbstractModal;

package/_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/_abstract/_Button.js

@@ -31,13 +31,13 @@ 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 = tslib_1.__rest(props, ["bem", "small", "size", "modifier", "children", "variant", "icon", "label"]);
     const className = bem &&
-        (0, classUtils_1.modifiedClass)(bem, [modifier, variants[variant], sizes[size], navigationFlags[icon]]);
+        (0, classUtils_1.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_1.default.createElement(_Link_js_1.Link, Object.assign({ className: className }, buttonProps, { style: undefined }, iconProp), label));
+        return (react_1.default.createElement(_Link_js_1.Link, Object.assign({}, buttonProps, { className: className }, iconProp), label));
     }
     else {
-        return (react_1.default.createElement("button", Object.assign({ className: className, type: "button" }, buttonProps, { style: undefined }, iconProp), label));
+        return (react_1.default.createElement("button", Object.assign({ type: "button" }, buttonProps, { className: className }, iconProp), label));
     }
 };
 exports.Button = Button;

package/_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/_abstract/_Table.js

@@ -24,7 +24,7 @@ const TableCell = (props) => {
 };
 const TableSection = ({ section, cols = [], Tag, getRowProps }) => section.length ? (react_1.default.createElement(Tag, null, section.map(({ key, cells }, rowIdx) => {
     let colIdx = 0;
-    return (react_1.default.createElement("tr", Object.assign({}, getRowProps(rowIdx, Tag), { key: key != null ? key : rowIdx }), cells.map((cell, i) => {
+    return (react_1.default.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/Alert.js

@@ -48,8 +48,8 @@ export const Alert = (props) => {
     closeUrl, closable = !!(onClose || closeUrl != null), ssr, onClosed, wrapperProps, } = props;
     const autoClose = Math.max(props.autoClose || 0, 0);
     const closing = useRef();
-    const [open, setOpen] = useState(!!ssr);
     const isBrowser = useIsBrowserSide(ssr);
+    const [open, setOpen] = useState(!isBrowser);
     const showCloseButton = closable && (isBrowser || closeUrl != null);
     const { closeLabel, closeLabelLong } = getTexts(props, defaultAlertTexts);
     useEffect(() => {

package/esm/BasicTable.js

@@ -8,7 +8,7 @@ const tableTypes = {
 };
 export const BasicTable = (props) => {
     // eslint-disable-next-line deprecation/deprecation
-    const { align, fullWidth, type, tbody, tbodies, modifier } = props;
+    const { align, fullWidth, type, tbody, tbodies, modifier, thead, tfoot, tableProps, caption, rowProps, compact, cols, wrapperProps, } = props;
     return (React.createElement(ScrollWrapper, { bem: "TableWrapper", modifier: [
             'BasicTable',
             modifier && 'BasicTable--' + modifier,
@@ -17,11 +17,11 @@ export const BasicTable = (props) => {
                 : align === 'right'
                     ? 'BasicTable--align--' + align
                     : undefined,
-        ], wrapperProps: props.wrapperProps },
+        ], wrapperProps: wrapperProps },
         React.createElement(Table, Object.assign({ className: modifiedClass('BasicTable', [
-                props.compact && 'compact',
+                compact && 'compact',
                 type && tableTypes[type],
                 modifier,
-            ]), cols: props.cols, caption: props.caption, thead: props.thead, tfoot: props.tfoot }, (tbody ? { tbody } : { tbodies }), { wrapperProps: props.tableProps }))));
+            ]), cols: cols, caption: caption, thead: thead, tfoot: tfoot }, (tbody ? { tbody } : { tbodies }), { rowProps: rowProps, wrapperProps: tableProps }))));
 };
 export default BasicTable;