@reykjavik/hanna-react 0.10.111 → 0.10.113

package/Alert.js

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

package/BasicTable.js

@@ -12,7 +12,7 @@ const tableTypes = {
 };
 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_1.default.createElement(_ScrollWrapper_js_1.ScrollWrapper, { bem: "TableWrapper", modifier: [
             'BasicTable',
             modifier && 'BasicTable--' + modifier,
@@ -21,12 +21,12 @@ const BasicTable = (props) => {
                 : align === 'right'
                     ? 'BasicTable--align--' + align
                     : undefined,
-        ], wrapperProps: props.wrapperProps },
+        ], wrapperProps: wrapperProps },
         react_1.default.createElement(_Table_js_1.Table, Object.assign({ className: (0, classUtils_1.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 }))));
 };
 exports.BasicTable = BasicTable;
 exports.default = exports.BasicTable;

package/CHANGELOG.md

@@ -4,6 +4,39 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.113
+
+_2023-12-08_
+
+- feat: Add component `MainMenu2`
+- feat: Make `Datepicker` more flexible when parsing manual input strings –
+  adds several, localized default formats.
+- feat: Add accessibility helper component `FocusTrap`
+- Decouple all mobile-menu toggling logic from the `Layout` component
+  - feat: Deprecate `useFormatMonitor` media flags `*Hamburger`, `*Topmenu`
+  - feat: Deprecate `useMenuToggling` hook
+  - feat: Add `.Layout__header__navlink`
+  - feat: Make `MainMenu` define its own toggler button and "Hamburger" mode
+- feat: Add standalone `MobileMenuToggler` component
+- `Multiselect`:
+  - fix: Suppress required asterisks on individual options
+  - fix: Deduplicate the currentvalues list
+  - fix: Manage focus after clicking remove buttons on currentvalues
+- `BasicTable`:
+  - feat: Pass `rowData` as 3rd param to `rowProps` callbacks
+  - fix: Actually apply `rowProps` to the `<tr/>`s. (Awk)
+- `ButtonPrimary`, `ButtonSecondary`, `ButtonTertiary`, `ButtonBack`,
+  `TextButton`:
+  - feat: Allow props `className` and `style`
+- feat: Tweak `ContactBubble`'s show/hide scroll-distance thresholds
+- fix: Suppress `MainMenu` server-rendering no-op `<button/>` elements
+
+## 0.10.112
+
+_2023-11-17_
+
+- fix: `Modal` not reoppening when `open` prop is toggled
+
 ## 0.10.110 – 0.10.111
 
 _2023-11-10_
@@ -150,7 +183,7 @@ _2023-07-26_
 _2023-07-25_
 
 - feat: Add optional `altText` parameter to `useGetSVGtext()`
-- feat: Export `useMenuToggling` from 'utils' module
+- feat: Export `useMenuToggling` from `utils` module
 - feat: Export `SSRSupportProps` type
 - perf: Reduce render thrashing of `Layout`'s navChildren
 - fix: `Layout` components set `alt="Reykjavík"` text on their header logo

package/ContactBubble.js

@@ -59,7 +59,9 @@ const ContactBubble = (props) => {
             onToggle && onToggle(false);
             setFocus !== false && (0, focusElm_1.focusElm)(wrapperRef.current);
         },
-    }), [useLocalState, onToggle]);
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [useLocalState, onToggle]);
     (0, react_1.useEffect)(() => {
         const wrapperElm = wrapperRef.current;
         if (!wrapperElm) {
@@ -77,7 +79,8 @@ const ContactBubble = (props) => {
                     const scrollLength = scrollHeight - clientHeight;
                     // const f = scrollLength > 600 ? 1 : (scrollLength - 200) / 600;
                     const f = 1;
-                    const show = scrollTop > f * 150 && scrollLength - scrollTop > f * 250;
+                    const show = scrollTop > f * 130 && // minimum distance from the top
+                        scrollLength - scrollTop > f * 200; // ...and bottom
                     wrapperElm.dataset.show = String(show);
                     !show && closeBubble(false);
                     pending = 0;
@@ -98,7 +101,9 @@ const ContactBubble = (props) => {
             document.removeEventListener('scroll', checkScroll);
             document.documentElement.removeEventListener('scroll', checkScroll);
         };
-    }, [isBrowser, alwaysShow, closeBubble]);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isBrowser, alwaysShow, closeBubble]);
     (0, react_1.useEffect)(() => {
         const escHandler = (e) => e.key === 'Escape' && closeBubble();
         const outsideClickHandler = (e) => {

package/Datepicker.d.ts

@@ -63,6 +63,7 @@ export type DatepickerLocaleProps = {
     weekLabel: string;
     chooseDayAriaLabelPrefix: string;
     disabledDayAriaLabelPrefix: string;
+    dateFormats: Array<string>;
 };
 /**
  * A compo

package/Datepicker.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Datepicker = exports.getDateDiff = void 0;
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 // For more info on localization see: https://stackoverflow.com/questions/54399084/change-locale-in-react-datepicker/58306958#58306958
 const index_js_1 = tslib_1.__importDefault(require("date-fns/locale/is/index.js"));
@@ -40,6 +40,16 @@ const defaultDatepickerTexts = {
         monthAriaLabelPrefix: 'Mánuður:',
         chooseDayAriaLabelPrefix: 'Veldu:',
         disabledDayAriaLabelPrefix: 'Ekki í boði:',
+        dateFormats: [
+            'dd.MM.yyyy',
+            'dd.MM.yy',
+            'dd/MM/yyyy',
+            'dd/MM/yy',
+            'dd. MM. yyyy',
+            'dd. MM. yy',
+            'dd MM yyyy',
+            'dd MM yy',
+        ],
     },
     // React-datepicker has its own (default) English translation built in.
     // No need to repeat all of it here.
@@ -59,6 +69,16 @@ const defaultDatepickerTexts = {
         monthAriaLabelPrefix: 'Month:',
         chooseDayAriaLabelPrefix: 'Choose:',
         disabledDayAriaLabelPrefix: 'Not available:',
+        dateFormats: [
+            'MM.dd.yyyy',
+            'MM.dd.yy',
+            'MM/dd/yyyy',
+            'MM/dd/yy',
+            'MM. dd. yyyy',
+            'MM. dd. yy',
+            'MM dd yyyy',
+            'MM dd yy',
+        ],
     },
     pl: {
         ariaLabelClose: 'Zamknij',
@@ -76,6 +96,16 @@ const defaultDatepickerTexts = {
         monthAriaLabelPrefix: 'Miesiąc:',
         chooseDayAriaLabelPrefix: 'Wybierać:',
         disabledDayAriaLabelPrefix: 'Niedostępna:',
+        dateFormats: [
+            'dd.MM.yyyy',
+            'dd.MM.yy',
+            'dd/MM/yyyy',
+            'dd/MM/yy',
+            'dd. MM. yyyy',
+            'dd. MM. yy',
+            'dd MM yyyy',
+            'dd MM yy',
+        ],
     },
 };
 /**
@@ -84,7 +114,7 @@ const defaultDatepickerTexts = {
  * Internally, this component uses the [`react-datepicker`](https://reactdatepicker.com/) component.
  */
 const Datepicker = (props) => {
-    const { placeholder, dateFormat = 'd.M.yyyy', name, startDate, endDate, minDate, maxDate, isStartDate = false, isEndDate = false, onChange, datepickerExtraProps, inputRef, isoMode, texts, lang = props.localeCode, fieldWrapperProps, } = (0, FormField_js_1.groupFormFieldWrapperProps)(props);
+    const { placeholder, dateFormat, name, startDate, endDate, minDate, maxDate, isStartDate = false, isEndDate = false, onChange, datepickerExtraProps, inputRef, isoMode, texts, lang = props.localeCode, fieldWrapperProps, } = (0, FormField_js_1.groupFormFieldWrapperProps)(props);
     const [value, setValue] = utils_js_1.useMixedControlState.raw(props.value || props.initialDate, // eslint-disable-line deprecation/deprecation
     props.defaultValue, 'value');
     /*
@@ -96,6 +126,24 @@ const Datepicker = (props) => {
     const txts = (0, i18n_1.getTexts)({ texts, lang }, defaultDatepickerTexts);
     const filled = !!value;
     const empty = !filled && !placeholder;
+    const normalizedDateFormats = (0, react_1.useMemo)(() => {
+        const dateFormatProp = !dateFormat
+            ? ['d.M.yyyy']
+            : typeof dateFormat === 'string'
+                ? [dateFormat]
+                : dateFormat.slice(0);
+        // NOTE: Force all dateFormat values into Array<string> to temporarily work around
+        // a bug in the current version of react-datepicker where invalid `string` values
+        // are re-parsed with `new Date()`, causing surprising (weird) false positives
+        // AND where Arrayed formats get parsed in order of "increasing priority".
+        //
+        // TODO: Revert back to the plain `dateFormat={dateFormat}` pass-through once
+        // https://github.com/Hacker0x01/react-datepicker/pull/3988 has been accepted and released.
+        return dateFormatProp
+            .concat(['yyyy-MM-dd'])
+            .concat(txts.dateFormats)
+            .concat(['P', 'PP', 'PPP']);
+    }, [dateFormat, txts]);
     return (react_1.default.createElement(FormField_js_1.FormField, Object.assign({ extraClassName: "Datepicker", filled: filled, empty: empty }, fieldWrapperProps, { renderInput: (className, inputProps, addFocusProps) => {
             return (react_1.default.createElement("div", Object.assign({ className: className.input, onClick: ({ target, currentTarget }) => { var _a; return target === currentTarget && ((_a = currentTarget.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus()); }, ref: inputRef &&
                     ((elm) => {
@@ -104,17 +152,7 @@ const Datepicker = (props) => {
                         return elm;
                     }) }, addFocusProps()),
                 isoMode && (react_1.default.createElement("input", { type: "hidden", name: name, value: value === null || value === void 0 ? void 0 : value.toISOString().slice(0, 10) })),
-                react_1.default.createElement(ReactDatepicker_js_1.ReactDatePicker, Object.assign({ id: domid, required: inputProps.required, disabled: inputProps.disabled, readOnly: inputProps.readOnly, selected: value, name: isoMode ? undefined : name, locale: lang, dateFormat: 
-                    // NOTE: Force all dateFormat values into Array<string> to temporarily work around
-                    // a bug in the current version of react-datepicker where invalid `string` values
-                    // are re-parsed with `new Date()`, causing surprising (weird) false positives
-                    // AND where Arrayed formats get parsed in order of "increasing priority".
-                    //
-                    // TODO: Revert back to the plain `dateFormat={dateFormat}` pass-through once
-                    // https://github.com/Hacker0x01/react-datepicker/pull/3988 has been accepted and released.
-                    typeof dateFormat === 'string'
-                        ? [dateFormat]
-                        : dateFormat.slice(0).reverse(), onChange: (date) => {
+                react_1.default.createElement(ReactDatepicker_js_1.ReactDatePicker, Object.assign({ id: domid, required: inputProps.required, disabled: inputProps.disabled, readOnly: inputProps.readOnly, selected: value, name: isoMode ? undefined : name, locale: lang, dateFormat: normalizedDateFormats, onChange: (date) => {
                         date = date || undefined;
                         setValue(date);
                         onChange && onChange(date);

package/{_abstract/_FocusTrap.d.ts → FocusTrap.d.ts}

@@ -10,5 +10,9 @@ export type FocusTrapProps = {
      */
     depth?: number;
 };
-/** A focus trap element that can be used to keep keyboard focus within a container block. */
+/**
+ * A focus trap element that can be used to keep keyboard focus within a container block.
+ *
+ * Make sure you only trap focus when a modal or
+ */
 export declare const FocusTrap: (props: FocusTrapProps) => JSX.Element;

package/{_abstract/_FocusTrap.js → FocusTrap.js}

@@ -3,7 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FocusTrap = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-/** A focus trap element that can be used to keep keyboard focus within a container block. */
+/**
+ * A focus trap element that can be used to keep keyboard focus within a container block.
+ *
+ * Make sure you only trap focus when a modal or
+ */
 const FocusTrap = (props) => {
     const Tag = props.Tag || 'span';
     return (react_1.default.createElement(Tag, { tabIndex: 0, onFocus: (e) => {

package/Layout.d.ts

@@ -3,10 +3,12 @@ import type { HannaColorTheme } from '@reykjavik/hanna-css';
 import { EitherObj } from '@reykjavik/hanna-utils';
 import { DefaultTexts, HannaLang } from '@reykjavik/hanna-utils/i18n';
 import { BemModifierProps } from './utils/types.js';
-import { SSRSupportProps, WrapperElmProps } from './utils.js';
+import { SSRSupport, WrapperElmProps } from './utils.js';
 export type LayoutI18n = {
     skipLinkLabel: string;
-    closeMenuLabel: string;
+    /** @deprecated Not used (Will be removed in v0.11) */
+    closeMenuLabel?: string;
+    /** @deprecated Not used (Will be removed in v0.11) */
     closeMenuLabelLong?: string;
     /** @deprecated Not used (Will be removed in v0.11) */
     lang?: string;
@@ -21,7 +23,9 @@ type LayoutProps = {
     siteName?: string;
     texts?: LayoutI18n;
     lang?: HannaLang;
-} & SSRSupportProps & WrapperElmProps & BemModifierProps & EitherObj<{
+    /** @deprecated Not used (Will be removed in v0.11) */
+    ssr?: SSRSupport;
+} & WrapperElmProps & BemModifierProps & EitherObj<{
     mainChildren: ReactNode;
 }, {
     children: ReactNode;

package/Layout.js

@@ -6,30 +6,17 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const classUtils_1 = require("@hugsmidjan/qj/classUtils");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const _Layouts_js_1 = require("./_abstract/_Layouts.js");
-const _Link_js_1 = require("./_abstract/_Link.js");
+const a11yHelpers_js_1 = require("./utils/a11yHelpers.js");
 const utils_js_1 = require("./utils.js");
 exports.defaultLayoutTexts = {
-    is: {
-        skipLinkLabel: 'Valmynd',
-        closeMenuLabel: 'Loka',
-        closeMenuLabelLong: 'Loka valmynd',
-    },
-    en: {
-        skipLinkLabel: 'Skip to navigation',
-        closeMenuLabel: 'Close',
-        closeMenuLabelLong: 'Close menu',
-    },
-    pl: {
-        skipLinkLabel: 'Przejdź do nawigacji',
-        closeMenuLabel: 'Zamknij',
-        closeMenuLabelLong: 'Zamknij menu',
-    },
+    is: { skipLinkLabel: 'Fara í leiðakerfi' },
+    en: { skipLinkLabel: 'Skip to navigation' },
+    pl: { skipLinkLabel: 'Przejdź do nawigacji' },
 };
 const Layout = (props) => {
     (0, utils_js_1.useScrollbarWidthCSSVar)();
-    const { ssr, globalAlerts, mainChildren, navChildren, footerChildren, colorTheme, children, siteName, logoLink = '/', wrapperProps, } = props;
+    const { globalAlerts, mainChildren, navChildren, footerChildren, colorTheme, children, siteName, logoLink = '/', wrapperProps, } = props;
     (0, _Layouts_js_1.issueSiteNameWarningInDev)(props);
-    const { isMenuActive, uiState, closeMenu, toggleMenu } = (0, utils_js_1.useMenuToggling)(ssr !== 'ssr-only');
     const txt = (0, i18n_1.getTexts)(props, exports.defaultLayoutTexts);
     return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, classUtils_1.modifiedClass)('Layout', props.modifier, (wrapperProps || {}).className), "data-color-theme": colorTheme }),
         globalAlerts && (react_1.default.createElement("div", { className: "Layout__alerts", role: "alert" }, globalAlerts)),
@@ -37,15 +24,9 @@ const Layout = (props) => {
             react_1.default.createElement("div", { className: "Layout__header", role: "banner" },
                 (0, _Layouts_js_1.renderLayoutHomeLink)('Layout', logoLink, siteName),
                 ' ',
-                navChildren && (react_1.default.createElement(_Link_js_1.Link, { className: "Layout__header__skiplink", href: "#pagenav", onClick: isMenuActive &&
-                        ((e) => {
-                            e.preventDefault();
-                            toggleMenu();
-                        }), "aria-label": txt.skipLinkLabel }, txt.skipLinkLabel))),
+                navChildren && (react_1.default.createElement("a", { className: "Layout__header__navlink", href: "#pagenav", onClick: a11yHelpers_js_1.handleAnchorLinkClick, "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(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)))),
+            navChildren && (react_1.default.createElement("div", { className: "Layout__nav", id: "pagenav", tabIndex: -1, role: "navigation" }, navChildren)),
             react_1.default.createElement("div", { className: "Layout__footer", role: "complementary" }, footerChildren))));
 };
 exports.Layout = Layout;

package/MainMenu.d.ts

@@ -1,48 +1,81 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { Modifiers } from '@hugsmidjan/qj/classUtils';
-import { Cleanup } from '@reykjavik/hanna-utils';
-import { DefaultTexts, HannaLang } from '@reykjavik/hanna-utils/i18n';
+import { Cleanup, EitherObj } from '@reykjavik/hanna-utils';
 import { AuxilaryPanelIllustration, AuxiliaryPanelProps } from './MainMenu/_Auxiliary.js';
 import { MegaMenuItem, MegaMenuItemList, MegaMenuPanel, PrimaryPanelI18n } from './MainMenu/_PrimaryPanel.js';
+import { I18NProps } from './utils/types.js';
+import { MobileMenuTogglerI18n } from './MobileMenuToggler.js';
 import { SSRSupportProps, WrapperElmProps } from './utils.js';
 export type MainMenuI18n = Cleanup<{
     homeLabel?: string;
     title: string;
     /** @deprecated Not used (Will be removed in v0.11) */
     lang?: string;
-} & PrimaryPanelI18n>;
-export declare const defaultMainMenuTexts: DefaultTexts<Required<Omit<MainMenuI18n, 'lang'>>>;
+} & PrimaryPanelI18n & EitherObj<MobileMenuTogglerI18n, {}>>;
+export declare const defaultMainMenuTexts: {
+    is: {
+        title: string;
+        homeLabel: string;
+        backToMenu: string;
+        backToMenuLong: string;
+    };
+    en: {
+        title: string;
+        homeLabel: string;
+        backToMenu: string;
+        backToMenuLong: string;
+    };
+    pl: {
+        title: string;
+        homeLabel: string;
+        backToMenu: string;
+        backToMenuLong: string;
+    };
+};
 export type { AuxilaryPanelIllustration, AuxiliaryPanelProps, MegaMenuItem, MegaMenuItemList, MegaMenuPanel, };
 export type MainMenuItem = {
+    /** Visible label text */
     label: string;
+    /** Un-abbreviated label set as `title=""` and `aria-label=""` */
     labelLong?: string;
+    /** Language of the link label */
     lang?: string;
+    /** Languge of the linked resource */
     hrefLang?: string;
     /**
-     * Puts a modifier className on the menu item element.
-     *
-     * Example:
-     *
-     * ```html
-     * <li class="MainMenu__item MainMenu__item--${modifier}">
-     * ```
+     * Puts a modifier className for the menu __item <li/> element.
      * */
     modifier?: Modifiers;
+    /** Signifies if the menu item is part of the page's breadcrumb trail */
     current?: boolean;
+    /**
+     * The URL the link points to.
+     *
+     * If neither `href` nor `onClick` is passed, then the item is not rendered
+     * at all.
+     */
     href?: string;
+    /** Sets `target=""` on anchor tags with a `href` attribute. */
+    target?: React.HTMLAttributeAnchorTarget;
     /**
-     * Adding `onClick` automatically results in a <button/> element being rendered.
+     * Adding `onClick` automatically results in a <button/> element being
+     * rendered. If `href` is also passed, then a <a href/> element is rendered
+     * during initial (server-side) render, which then gets replaced by a
+     * <button/> element during the first client-side render.
      *
-     * NOTE: Clicking a MainMenu item will automatically close HannaUIState's
+     * NOTE: Clicking a menu item will automatically close HannaUIState's
      * "Hamburger menu" (a.k.a. "Mobile menu")
      * … unless the `onClick` function explicitly returns `false`.
      */
     onClick?: (index: number, item: MainMenuItem) => void | boolean;
+    /** Sets `aria-controls=""` on `<button/>`s with `onClick` */
     controlsId?: string;
-    target?: React.HTMLAttributeAnchorTarget;
 };
+/** String token that hints that a flexible space should be inserted at this
+ * point in the menu item list.
+ */
 export type MainMenuSeparator = '---';
-export type MainMenuItemList = Array<MainMenuItem | MainMenuSeparator | (() => JSX.Element)>;
+export type MainMenuItemList = Array<MainMenuItem | MainMenuSeparator | (() => ReactElement)>;
 export type MainMenuProps = {
     /**
      * Top-level screen-reader headline/label for the whole menu.
@@ -64,8 +97,7 @@ export type MainMenuProps = {
      */
     onItemClick?: (index: number, item: MainMenuItem) => void | boolean;
     activePanelId?: string;
-    texts?: MainMenuI18n;
-    lang?: HannaLang;
-} & SSRSupportProps & WrapperElmProps<null, 'aria-label'>;
-export declare const MainMenu: (props: MainMenuProps) => JSX.Element | null;
+} & SSRSupportProps & I18NProps<MainMenuI18n> & WrapperElmProps<null, 'aria-label'>;
+export declare const _MainMenu: (props: MainMenuProps) => JSX.Element | null;
+export declare const MainMenu: (props: MainMenuProps) => JSX.Element;
 export default MainMenu;

package/MainMenu.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MainMenu = exports.defaultMainMenuTexts = void 0;
+exports.MainMenu = 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");
@@ -9,11 +9,13 @@ const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const _Link_js_1 = require("./_abstract/_Link.js");
 const _Auxiliary_js_1 = require("./MainMenu/_Auxiliary.js");
 const _PrimaryPanel_js_1 = require("./MainMenu/_PrimaryPanel.js");
-const HannaUIState_js_1 = require("./utils/HannaUIState.js");
 const useFormatMonitor_js_1 = require("./utils/useFormatMonitor.js");
 const useShortState_js_1 = require("./utils/useShortState.js");
+const MobileMenuToggler_js_1 = require("./MobileMenuToggler.js");
 const utils_js_1 = require("./utils.js");
 const findActivePanel = (megaPanels, activeId) => activeId ? megaPanels.find((panel) => activeId === panel.id) : undefined;
+// const HamburgerMedias: Record<string, 1> = { phone: 1, phablet: 1, tablet: 1 };
+const TopmenuMedias = { netbook: 1, wide: 1 };
 exports.defaultMainMenuTexts = {
     is: {
         title: 'Aðalvalmynd',
@@ -80,11 +82,19 @@ const normalizeMenuItems = (itemsProp, megaPanels, homeLink, texts) => {
 };
 // ---------------------------------------------------------------------------
 const emptyPanelList = [];
-const MainMenu = (props) => {
+/*
+  NOTE:
+  This is made into sub-component to allow using the `useMobileMenuTogglerState`
+  hook. This MainMenu component will eventually be deprecated, and we're
+  maintaining a bunch of already deprecated legacy hook/utils exports,
+  so it doesn't seem worth the effort to refactor this into something slightly
+  "cleaner", cecause that would increase more complexity for the legacy exports.
+*/
+const _MainMenu = (props) => {
     const { megaPanels = emptyPanelList, onItemClick, ssr, auxiliaryPanel, wrapperProps = {}, } = props;
     const texts = (0, i18n_1.getTexts)(props, exports.defaultMainMenuTexts);
     const title = props.title || texts.title;
-    const { closeHamburgerMenu } = (0, HannaUIState_js_1.useHannaUIState)();
+    const { closeHamburgerMenu } = (0, MobileMenuToggler_js_1.useMobileMenuTogglerState)();
     const isBrowser = (0, utils_js_1.useIsBrowserSide)(ssr);
     const _menuElmRef = (0, react_1.useRef)(null);
     const menuElmRef = wrapperProps.ref || _menuElmRef;
@@ -132,7 +142,8 @@ const MainMenu = (props) => {
         }
         : () => undefined, [setLaggyActivePanel, isBrowser]);
     (0, useFormatMonitor_js_1.useFormatMonitor)((media) => {
-        if (media.leftTopmenu) {
+        const leftTopmenu = !TopmenuMedias[media.is] && TopmenuMedias[media.was || ''];
+        if (leftTopmenu) {
             setActivePanel(undefined);
         }
     });
@@ -190,7 +201,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, classUtils_1.modifiedClass)('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 }, isBrowser && !!(item.megaPanel || onClick) ? (
             // only print script-driven buttons in the browser
             react_1.default.createElement("button", { className: "MainMenu__link", onClick: () => {
                     const keepOpen1 = onClick && onClick(i, item) === false;
@@ -223,5 +234,15 @@ const MainMenu = (props) => {
                 }),
                 auxiliaryPanel && react_1.default.createElement(_Auxiliary_js_1.AuxiliaryPanel, Object.assign({}, auxiliaryPanel)))))));
 };
+exports._MainMenu = _MainMenu;
+// ---------------------------------------------------------------------------
+const MainMenu = (props) => {
+    const _wrapperProps = props.wrapperProps;
+    const id = (0, utils_js_1.useDomid)(_wrapperProps && _wrapperProps.id);
+    const wrapperProps = _wrapperProps ? Object.assign(Object.assign({}, _wrapperProps), { id }) : { id };
+    const texts = (0, i18n_1.getTexts)(props, exports.defaultMainMenuTexts);
+    return (react_1.default.createElement(MobileMenuToggler_js_1.MobileMenuToggler, { ssr: props.ssr, lang: props.lang, texts: texts.togglerLabel ? texts : undefined, controlsId: id },
+        react_1.default.createElement(exports._MainMenu, Object.assign({}, props, { wrapperProps: wrapperProps }))));
+};
 exports.MainMenu = MainMenu;
 exports.default = exports.MainMenu;

package/MainMenu2.d.ts

@@ -0,0 +1,114 @@
+import React, { ReactElement } from 'react';
+import { Modifiers } from '@hugsmidjan/qj/classUtils';
+import { Cleanup, EitherObj } from '@reykjavik/hanna-utils';
+import { Illustration } from '@reykjavik/hanna-utils/assets';
+import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
+import { I18NProps } from './utils/types.js';
+import { SSRSupportProps, WrapperElmProps } from './utils.js';
+export type MainMenu2I18n = {
+    title: string;
+    homeLink: string;
+    openMenu: string;
+    openMenuLong: string;
+    closeMenu: string;
+    closeMenuLong: string;
+};
+export declare const defaultMainMenu2Texts: DefaultTexts<MainMenu2I18n>;
+export type MainMenu2Item = {
+    /** Visible label text */
+    label: string;
+    /** Un-abbreviated label set as `title=""` and `aria-label=""` */
+    labelLong?: string;
+    /** Language of the link label */
+    lang?: string;
+    /** Languge of the linked resource */
+    hrefLang?: string;
+    /**
+     * Puts a modifier className for the menu __item <li/> element.
+     * */
+    modifier?: Modifiers;
+    /** Signifies if the menu item is part of the page's breadcrumb trail */
+    current?: boolean;
+    /**
+     * The URL the link points to.
+     *
+     * If neither `href` nor `onClick` is passed, then the item is not rendered
+     * at all.
+     */
+    href?: string;
+    /** Sets `target=""` on anchor tags with a `href` attribute. */
+    target?: React.HTMLAttributeAnchorTarget;
+    /**
+     * Adding `onClick` automatically results in a <button/> element being
+     * rendered. If `href` is also passed, then a <a href/> element is rendered
+     * during initial (server-side) render, which then gets replaced by a
+     * <button/> element during the first client-side
+     *
+     * NOTE: Clicking a menu item will automatically close HannaUIState's
+     * "Hamburger menu" (a.k.a. "Mobile menu")
+     * … unless the `onClick` function explicitly returns `false`.
+     */
+    onClick?: (item: MainMenu2Item) => void | boolean;
+    /** Sets `aria-controls=""` on `<button/>`s with `onClick` */
+    controlsId?: string;
+};
+export type MainMenu2ButtonItem = MainMenu2Item & {
+    icon?: 'search' | 'user' | 'alert' | 'globe';
+};
+export type MainMenu2CustomItem = (props: {
+    closeMenu: () => void;
+}) => ReactElement;
+export type MainMenu2SubMenuItem = MainMenu2Item & {
+    descr?: string;
+};
+export type MainMenu2SubMenu = {
+    title: string;
+    current?: boolean;
+    subItems: Array<MainMenu2SubMenuItem | MainMenu2CustomItem>;
+};
+export type MainMenu2ItemList = Array<MainMenu2Item | MainMenu2CustomItem>;
+export type MainMenu2ButtonItemList = Array<MainMenu2ButtonItem | MainMenu2CustomItem>;
+export type MainMenu2SubMenuItemList = Array<MainMenu2SubMenuItem | MainMenu2CustomItem>;
+export type MainMenu2Props = {
+    /**
+     * URL for the mandatory (usually screen-reader-only) homepage Link.
+     *
+     * Default: `"/"`
+     *
+     * NOTE: The link's label is by default "Forsíða"/"Home Page"/"Strona główna"
+     * (depending on your page language) but it can be custom-translated via the
+     * `props.texts` translation prop.
+     */
+    homeLink?: string | Cleanup<Omit<MainMenu2Item, 'modifier' | 'controlsId'> & {
+        href: string;
+    }>;
+    items: {
+        /**
+         * The "Main" menu items that appear once the menu is open.
+         *
+         * Each of these items normally contains a list of `subItems` and a title,
+         * but it can also be a direct link/button (or even a custom component).
+         */
+        main?: Array<MainMenu2SubMenu | MainMenu2Item | MainMenu2CustomItem>;
+        /**
+         * The always-visible items that appear at the top of the page next the
+         * "Open Menu" button. Make sure to only use 2–3 items, and remember that
+         * they may be hidden on smaller screens.
+         */
+        hot?: MainMenu2ButtonItemList;
+        extra?: MainMenu2ButtonItemList;
+        relatedTitle?: string;
+        related?: MainMenu2ItemList;
+    };
+    /**
+     * NOTE: Clicking a MainMenu2 item will automatically close HannaUIState's
+     * "Hamburger menu" (a.k.a. "Mobile menu")
+     * … unless the `onItemClick` function explicitly returns `false`.
+     */
+    onItemClick?: (item: MainMenu2Item) => void | boolean;
+} & EitherObj<{
+    illustration?: Illustration;
+}, {
+    imageUrl?: string;
+}> & WrapperElmProps & I18NProps<MainMenu2I18n> & SSRSupportProps;
+export declare const MainMenu2: (props: MainMenu2Props) => JSX.Element;