@reykjavik/hanna-react 0.10.160 → 0.10.162

package/ButtonTertiary.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { ButtonProps, ButtonVariantProps } from './_abstract/_Button.js';
 type TertiarySize = Extract<ButtonVariantProps['size'], 'normal' | 'small'>;
-type TertiaryIcon = Extract<ButtonVariantProps['icon'], 'none' | 'go-back'>;
+type TertiaryIcon = Extract<ButtonVariantProps['icon'], 'go-back'>;
 export type ButtonTertiaryProps = ButtonProps & Omit<ButtonVariantProps, 'icon' | 'size'> & {
     size?: TertiarySize;
     icon?: TertiaryIcon;

package/ButtonTertiary.js

@@ -9,13 +9,12 @@ const sizes = {
     small: 'small',
 };
 const icons = {
-    none: 'none',
     'go-back': 'go-back',
 };
 // NOTE: As a `_abstract/_Button.tsx`-derived component, all `<button/>` and
 // `<a/>` props are allowed directly, so adding `wrapperProps` makes no sense.
 const ButtonTertiary = (props) => {
-    const { size = 'normal', icon = 'none' } = props;
+    const { size = 'normal', icon = '' } = props;
     return react_1.default.createElement(_Button_js_1.Button, Object.assign({ bem: "ButtonTertiary" }, props, { size: sizes[size], icon: icons[icon] }));
 };
 exports.ButtonTertiary = ButtonTertiary;

package/CHANGELOG.md

@@ -4,6 +4,29 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.162
+
+_2026-01-16_
+
+- feat: Add component `ContextMenu` (previously `DropdownButton`)
+- feat: Deprecate component `DropdownButton` (in favor of `ContextMenu`)
+
+## 0.10.161
+
+_2026-01-15_
+
+- feat: Add component `Icon`
+- feat: Add component `ReykjavikWaves`
+- `DropdownButton`:
+  - feat: Add prop `Toggler` for custom toggler content
+  - feat: Add "customitem" object with `Content`, `modifier` and `current`
+- `MainMenu2`:
+  - feat: Add prop `redhot` to `MainMenu2Props.items.hot` items to always show
+    them on mobile
+  - feat: Add "customitem" object with `Content`, `modifier` and `current`
+  - docs: Minor JSDoc corrections for on-click handlers
+- fix: Clicking `.SearchInput__button` always passed empty string as value
+
 ## 0.10.160
 
 _2025-10-13_

package/ContextMenu.d.ts

@@ -0,0 +1,86 @@
+import { HTMLAttributeAnchorTarget, ReactElement } from 'react';
+import { IconToken } from '@reykjavik/hanna-css';
+import { ClassNameModifiers, EitherObj } from '@reykjavik/hanna-utils';
+import { IconName_old } from '../../hanna-css/src/lib/icons.js';
+import { ButtonVariantProps } from './_abstract/_Button.js';
+import { SSRSupportProps, WrapperElmProps } from './utils.js';
+type Prefix<record extends Record<string, unknown>, prefix extends string> = {
+    [K in keyof record as `${prefix}${Capitalize<string & K>}`]: record[K];
+};
+export type ContextMenuItem = {
+    /** Visible label text */
+    label: string | ReactElement;
+    /** Un-abbreviated label set as `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?: ClassNameModifiers;
+    /** 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?: 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 tghe menu
+     * … unless the `onClick` function explicitly returns `false`.
+     */
+    onClick?: (item: ContextMenuItem) => void | boolean;
+    /** Sets `aria-controls=""` on `<button/>`s with `onClick` */
+    controlsId?: string;
+    Content?: never;
+    /** Seldom used flag for buttons that do destruction */
+    destructive?: boolean;
+    icon?: IconToken | IconName_old;
+};
+type ContextMenuCustomItemFn = (props: {
+    closeMenu: () => void;
+}) => ReactElement;
+export type ContextMenuCustomItem = Pick<ContextMenuItem, 'modifier' | 'current'> & {
+    Content: ContextMenuCustomItemFn;
+};
+/** Renders a divider line between `ContextMenu*Item`s with an optional legend */
+export type ContextMenuItemDivider = {
+    divider: true;
+    label?: string;
+};
+export type ContextMenuProps = {
+    /** The items to display inside the dropdown menu */
+    items: Array<ContextMenuItem | ContextMenuCustomItem | ContextMenuItemDivider>;
+    /**
+     * NOTE: Clicking a ContextMenu item will automatically close the drropdown
+     * … unless the `onItemClick` function explicitly returns `false`.
+     *
+     * **NOTE:** Customm items will need to call `closeMenu()` themselves.
+     */
+    onItemClick?: (item: ContextMenuItem) => void | boolean;
+} & EitherObj<{
+    /** Label for the toggler */
+    label: string | ReactElement;
+    /** Longer accessible toggler label text */
+    labelLong?: string;
+    /** Default: `"secondary"` */
+    togglerType?: 'primary' | 'secondary';
+} & Prefix<Omit<ButtonVariantProps, 'small'>, 'toggler'>, {
+    /** Custom toggler rendering function component */
+    Toggler: (props: {
+        isOpen: boolean;
+    }) => ReactElement;
+}> & WrapperElmProps<'details', 'open' | 'name'> & SSRSupportProps;
+export declare const ContextMenu: (props: ContextMenuProps) => JSX.Element;
+export {};

package/ContextMenu.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContextMenu = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_2 = require("@floating-ui/react");
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
+const _Button_js_1 = require("./_abstract/_Button.js");
+const useCallbackOnEsc_js_1 = require("./utils/useCallbackOnEsc.js");
+const useLaggedState_js_1 = require("./utils/useLaggedState.js");
+const useOnClickOutside_js_1 = require("./utils/useOnClickOutside.js");
+const FocusTrap_js_1 = require("./FocusTrap.js");
+const utils_js_1 = require("./utils.js");
+const ContextMenu = (props) => {
+    const [isOpen, setIsOpen] = (0, useLaggedState_js_1.useLaggedState)(false, 10);
+    const isBrowser = (0, utils_js_1.useIsBrowserSide)(props.ssr);
+    const [isHovering, setIsHovering] = (0, react_1.useState)(false);
+    const wrapperRef = (0, react_1.useRef)(null);
+    const closeMenuStat = () => setIsOpen(false, 0);
+    (0, useOnClickOutside_js_1.useOnClickOutside)(wrapperRef, isOpen && closeMenuStat);
+    (0, useCallbackOnEsc_js_1.useCallbackOnEsc)(isOpen && closeMenuStat);
+    const { x, y, refs } = (0, react_2.useFloating)({
+        placement: 'bottom-start',
+        middleware: [(0, react_2.flip)(), (0, react_2.shift)()],
+        whileElementsMounted: react_2.autoUpdate,
+    });
+    const { onItemClick, wrapperProps = {} } = props;
+    const toggle = (e) => {
+        e.preventDefault();
+        setIsOpen(!isOpen, 0);
+    };
+    return (react_1.default.createElement("details", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('ContextMenu', isOpen && 'open', wrapperProps.className), open: isOpen, onBlur: (e) => {
+            var _a;
+            if (!isHovering) {
+                setIsOpen(false, 300);
+            }
+            (_a = wrapperProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(wrapperProps, e);
+        }, ref: (elm) => {
+            if (!elm) {
+                return;
+            }
+            wrapperRef.current = elm;
+            refs.setReference(elm.querySelector('.ContextMenu__toggler'));
+            refs.setFloating(elm.querySelector('.ContextMenu__menu'));
+        } }),
+        props.Toggler ? (react_1.default.createElement("summary", { className: "ContextMenu__toggler", onClick: toggle },
+            react_1.default.createElement(props.Toggler, { isOpen: isOpen }))) : (react_1.default.createElement(_Button_js_1.Button, { as: "summary", className: "ContextMenu__toggler", bem: props.togglerType === 'primary' ? 'ButtonPrimary' : 'ButtonSecondary', icon: props.togglerIcon, size: props.togglerSize, variant: props.togglerVariant, "aria-label": props.labelLong, onClick: toggle }, props.label)),
+        react_1.default.createElement("ul", { className: "ContextMenu__menu", onMouseEnter: () => {
+                setIsHovering(true);
+            }, onMouseLeave: () => {
+                setIsHovering(false);
+            }, onFocus: () => {
+                setIsOpen(true, 0);
+            }, style: x != null
+                ? {
+                    '--ContextMenu-pos-y': `${y}px`,
+                    '--ContextMenu-pos-x': `${x}px`,
+                }
+                : undefined },
+            props.items.map(
+            // eslint-disable-next-line complexity
+            (item, i) => {
+                if ('divider' in item) {
+                    if ((i === 0 && !item.label) || i === props.items.length - 1) {
+                        // Gracefully omit pointless dividers
+                        return null;
+                    }
+                    return (react_1.default.createElement("li", { key: i, className: (0, hanna_utils_1.modifiedClass)('ContextMenu__itemDivider', item.label && 'labelled') }, item.label || false));
+                }
+                if (typeof item === 'function') {
+                    item = { Content: item };
+                }
+                const itemProps = {
+                    className: (0, hanna_utils_1.modifiedClass)('ContextMenu__item', item.modifier),
+                    'aria-current': item.current || undefined,
+                };
+                if ('Content' in item && item.Content) {
+                    return (react_1.default.createElement("li", Object.assign({ key: i, "data-customitem": "" }, itemProps),
+                        react_1.default.createElement(item.Content, { closeMenu: closeMenuStat })));
+                }
+                const { label, onClick, href, destructive } = item;
+                const commonProps = {
+                    className: (0, hanna_utils_1.modifiedClass)('ContextMenu__itembutton', destructive && 'destructive'),
+                    lang: item.lang,
+                    'data-icon': item.icon,
+                    'arial-label': item.labelLong,
+                };
+                const doRenderButton = isBrowser && (onClick || (onItemClick && href == null));
+                // TypeScript type-narrowing helper for the onClick callbacks below — because
+                // `item` is a variable and could hypothetically change before the click occurs
+                const _item = item;
+                return (react_1.default.createElement("li", { key: i, className: (0, hanna_utils_1.modifiedClass)('ContextMenu__item', item.modifier), "aria-current": item.current || undefined }, doRenderButton ? (react_1.default.createElement("button", Object.assign({}, commonProps, { type: "button", "aria-controls": item.controlsId, onClick: () => {
+                        const keepOpen1 = onClick && onClick(_item) === false;
+                        const keepOpen2 = onItemClick && onItemClick(_item) === false;
+                        !(keepOpen1 || keepOpen2) && closeMenuStat();
+                    } }), label)) : href != null ? (react_1.default.createElement("a", Object.assign({}, commonProps, { href: href, hrefLang: item.hrefLang, target: item.target, onClick: () => {
+                        const keepOpen = onItemClick && onItemClick(_item) === false;
+                        !keepOpen && closeMenuStat();
+                    } }), label)) : null));
+            }),
+            react_1.default.createElement(FocusTrap_js_1.FocusTrap, { Tag: "li", depth: 2 }))));
+};
+exports.ContextMenu = ContextMenu;

package/DropdownButton.d.ts

@@ -1,29 +1,95 @@
-import React from 'react';
-import { IconName } from '@reykjavik/hanna-css';
+import { HTMLAttributeAnchorTarget, ReactElement } from 'react';
+import { IconToken } from '@reykjavik/hanna-css';
+import { ClassNameModifiers, EitherObj } from '@reykjavik/hanna-utils';
+import { IconName_old } from '../../hanna-css/src/lib/icons.js';
 import { ButtonVariantProps } from './_abstract/_Button.js';
-import { MainMenu2Item } from './MainMenu2.js';
+import { ContextMenuItem } from './ContextMenu.js';
 import { SSRSupportProps, WrapperElmProps } from './utils.js';
 type Prefix<record extends Record<string, unknown>, prefix extends string> = {
     [K in keyof record as `${prefix}${Capitalize<string & K>}`]: record[K];
 };
-export type DropdownButtonItem = MainMenu2Item & {
-    icon?: IconName;
+type _DropdownButtonItem = {
+    /** Visible label text */
+    label: string | ReactElement;
+    /** Un-abbreviated label set as `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?: ClassNameModifiers;
+    /** 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?: 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 tghe menu
+     * … unless the `onClick` function explicitly returns `false`.
+     */
+    onClick?: (item: _DropdownButtonItem) => void | boolean;
+    /** Sets `aria-controls=""` on `<button/>`s with `onClick` */
+    controlsId?: string;
+    Content?: never;
+    /** Seldom used flag for buttons that do destruction */
+    destructive?: boolean;
+    icon?: IconToken | IconName_old;
 };
-export type DropdownButtonCustomItem = (props: {
+type DropdownbButtonCustomItemFn = (props: {
     closeMenu: () => void;
-}) => React.ReactElement;
-export type DropdownButtonProps = {
-    label: string | NonNullable<React.ReactElement>;
-    labelLong?: string;
-    items: Array<DropdownButtonItem | DropdownButtonCustomItem>;
+}) => ReactElement;
+type _DropdownButtonCustomItem = Pick<ContextMenuItem, 'modifier' | 'current'> & {
+    Content: DropdownbButtonCustomItemFn;
+};
+type _DropdownButtonItemDivider = {
+    divider: true;
+    label?: string;
+};
+type _DropdownButtonProps = {
+    /** The items to display inside the dropdown menu */
+    items: Array<_DropdownButtonItem | _DropdownButtonCustomItem | _DropdownButtonItemDivider>;
     /**
-     * NOTE: Clicking a MainMenu2 item will automatically close HannaUIState's
-     * "Hamburger menu" (a.k.a. "Mobile menu")
+     * NOTE: Clicking a ContextMenu item will automatically close the drropdown
      * … unless the `onItemClick` function explicitly returns `false`.
+     *
+     * **NOTE:** Customm items will need to call `closeMenu()` themselves.
      */
-    onItemClick?: (item: MainMenu2Item) => void | boolean;
-    /** Default: `"seconcary"` */
+    onItemClick?: (item: ContextMenuItem) => void | boolean;
+} & EitherObj<{
+    /** Label for the toggler */
+    label: string | ReactElement;
+    /** Longer accessible toggler label text */
+    labelLong?: string;
+    /** Default: `"secondary"` */
     buttonType?: 'primary' | 'secondary';
-} & Prefix<Omit<ButtonVariantProps, 'small'>, 'button'> & WrapperElmProps<'details', 'open' | 'name'> & SSRSupportProps;
+} & Prefix<Omit<ButtonVariantProps, 'small'>, 'button'>, {
+    /** Custom toggler rendering function component */
+    Toggler: (props: {
+        isOpen: boolean;
+    }) => ReactElement;
+}> & WrapperElmProps<'details', 'open' | 'name'> & SSRSupportProps;
+/** @deprecated Use `ContextMenu` instead.  (Will be removed in v0.11) */
 export declare const DropdownButton: (props: DropdownButtonProps) => JSX.Element;
+/** @deprecated Use `ContextMenuItem` instead.  (Will be removed in v0.11) */
+export type DropdownButtonItem = _DropdownButtonItem;
+/** @deprecated Use `ContextMenuCustomItem` instead.  (Will be removed in v0.11) */
+export type DropdownButtonCustomItem = _DropdownButtonCustomItem;
+/** @deprecated Use `ContextMenuItemDivider` instead.  (Will be removed in v0.11) */
+export type DropdownButtonItemDivider = _DropdownButtonItemDivider;
+/** @deprecated Use `ContextMenuProps` instead.  (Will be removed in v0.11) */
+export type DropdownButtonProps = _DropdownButtonProps;
 export {};

package/DropdownButton.js

@@ -2,6 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropdownButton = void 0;
 const tslib_1 = require("tslib");
+// ===========================================================================
+/*
+  NOTE:
+  THIS COMPONENT IS DEPRECATED AND WILL BE REMOVED IN A FUTURE VERSION.
+  DO NOT UPDATE IT OR ADD NEW FEATURES.
+
+*/
+// ===========================================================================
 const react_1 = tslib_1.__importStar(require("react"));
 const react_2 = require("@floating-ui/react");
 const hanna_utils_1 = require("@reykjavik/hanna-utils");
@@ -11,11 +19,13 @@ const useLaggedState_js_1 = require("./utils/useLaggedState.js");
 const useOnClickOutside_js_1 = require("./utils/useOnClickOutside.js");
 const FocusTrap_js_1 = require("./FocusTrap.js");
 const utils_js_1 = require("./utils.js");
+/** @deprecated Use `ContextMenu` instead.  (Will be removed in v0.11) */
+// eslint-disable-next-line deprecation/deprecation
 const DropdownButton = (props) => {
     const [isOpen, setIsOpen] = (0, useLaggedState_js_1.useLaggedState)(false, 10);
     const isBrowser = (0, utils_js_1.useIsBrowserSide)(props.ssr);
     const [isHovering, setIsHovering] = (0, react_1.useState)(false);
-    const wrapperRef = react_1.default.useRef(null);
+    const wrapperRef = (0, react_1.useRef)(null);
     const closeMenuStat = () => setIsOpen(false, 0);
     (0, useOnClickOutside_js_1.useOnClickOutside)(wrapperRef, isOpen && closeMenuStat);
     (0, useCallbackOnEsc_js_1.useCallbackOnEsc)(isOpen && closeMenuStat);
@@ -25,6 +35,10 @@ const DropdownButton = (props) => {
         whileElementsMounted: react_2.autoUpdate,
     });
     const { onItemClick, wrapperProps = {} } = props;
+    const toggle = (e) => {
+        e.preventDefault();
+        setIsOpen(!isOpen, 0);
+    };
     return (react_1.default.createElement("details", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('DropdownButton', isOpen && 'open', wrapperProps.className), open: isOpen, onBlur: (e) => {
             var _a;
             if (!isHovering) {
@@ -39,10 +53,8 @@ const DropdownButton = (props) => {
             refs.setReference(elm.querySelector('.DropdownButton__toggler'));
             refs.setFloating(elm.querySelector('.DropdownButton__menu'));
         } }),
-        react_1.default.createElement(_Button_js_1.Button, { as: "summary", className: "DropdownButton__toggler", bem: props.buttonType === 'primary' ? 'ButtonPrimary' : 'ButtonSecondary', icon: props.buttonIcon, size: props.buttonSize, variant: props.buttonVariant, "aria-label": props.labelLong, onClick: (e) => {
-                e.preventDefault();
-                setIsOpen(!isOpen, 0);
-            } }, props.label),
+        props.Toggler ? (react_1.default.createElement("summary", { className: "DropdownButton__toggler", onClick: toggle },
+            react_1.default.createElement(props.Toggler, { isOpen: isOpen }))) : (react_1.default.createElement(_Button_js_1.Button, { as: "summary", className: "DropdownButton__toggler", bem: props.buttonType === 'primary' ? 'ButtonPrimary' : 'ButtonSecondary', icon: props.buttonIcon, size: props.buttonSize, variant: props.buttonVariant, "aria-label": props.labelLong, onClick: toggle }, props.label)),
         react_1.default.createElement("ul", { className: "DropdownButton__menu", onMouseEnter: () => {
                 setIsHovering(true);
             }, onMouseLeave: () => {
@@ -55,26 +67,44 @@ const DropdownButton = (props) => {
                     '--DropdownButton-pos-x': `${x}px`,
                 }
                 : undefined },
-            props.items.map((item, i) => {
+            props.items.map(
+            // eslint-disable-next-line complexity
+            (item, i) => {
+                if ('divider' in item) {
+                    if ((i === 0 && !item.label) || i === props.items.length - 1) {
+                        // Gracefully omit pointless dividers
+                        return null;
+                    }
+                    return (react_1.default.createElement("li", { key: i, className: (0, hanna_utils_1.modifiedClass)('DropdownButton__itemDivider', item.label && 'labelled') }, item.label || false));
+                }
                 if (typeof item === 'function') {
-                    const Item = item;
-                    return (react_1.default.createElement("li", { key: i, className: "DropdownButton__item" },
-                        react_1.default.createElement(Item, { closeMenu: closeMenuStat })));
+                    item = { Content: item };
+                }
+                const itemProps = {
+                    className: (0, hanna_utils_1.modifiedClass)('DropdownButton__item', item.modifier),
+                    'aria-current': item.current || undefined,
+                };
+                if ('Content' in item && item.Content) {
+                    return (react_1.default.createElement("li", Object.assign({ key: i, "data-customitem": "" }, itemProps),
+                        react_1.default.createElement(item.Content, { closeMenu: closeMenuStat })));
                 }
-                const { label, onClick, href } = item;
+                const { label, onClick, href, destructive } = item;
                 const commonProps = {
-                    className: 'DropdownButton__itembutton',
+                    className: (0, hanna_utils_1.modifiedClass)('DropdownButton__itembutton', destructive && 'destructive'),
                     lang: item.lang,
                     'data-icon': item.icon,
                     'arial-label': item.labelLong,
                 };
                 const doRenderButton = isBrowser && (onClick || (onItemClick && href == null));
+                // TypeScript type-narrowing helper for the onClick callbacks below — because
+                // `item` is a variable and could hypothetically change before the click occurs
+                const _item = item;
                 return (react_1.default.createElement("li", { key: i, className: (0, hanna_utils_1.modifiedClass)('DropdownButton__item', item.modifier), "aria-current": item.current || undefined }, doRenderButton ? (react_1.default.createElement("button", Object.assign({}, commonProps, { type: "button", "aria-controls": item.controlsId, onClick: () => {
-                        const keepOpen1 = onClick && onClick(item) === false;
-                        const keepOpen2 = onItemClick && onItemClick(item) === false;
+                        const keepOpen1 = onClick && onClick(_item) === false;
+                        const keepOpen2 = onItemClick && onItemClick(_item) === false;
                         !(keepOpen1 || keepOpen2) && closeMenuStat();
                     } }), label)) : href != null ? (react_1.default.createElement("a", Object.assign({}, commonProps, { href: href, hrefLang: item.hrefLang, target: item.target, onClick: () => {
-                        const keepOpen = onItemClick && onItemClick(item) === false;
+                        const keepOpen = onItemClick && onItemClick(_item) === false;
                         !keepOpen && closeMenuStat();
                     } }), label)) : null));
             }),

package/Icon.d.ts

@@ -0,0 +1,7 @@
+import { IconToken } from '../../hanna-css/src/iconfontTokens.js';
+import { HTMLProps } from './utils.js';
+export type IconProps = {
+    type: IconToken;
+    size?: 'small' | 'medium' | 'large';
+} & HTMLProps<'span'>;
+export declare const Icon: (props: IconProps) => JSX.Element;

package/Icon.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
+const Icon = (props) => {
+    const { className, type, size = 'medium' } = props, rest = tslib_1.__rest(props, ["className", "type", "size"]);
+    return (react_1.default.createElement("span", Object.assign({}, rest, { className: (0, hanna_utils_1.classes)('Icon', props.className), "data-icon": type, "data-icon-size": size !== 'medium' ? size : undefined })));
+};
+exports.Icon = Icon;

package/MainMenu2.d.ts

@@ -1,4 +1,5 @@
 import React, { ReactElement } from 'react';
+import { IconName, IconToken } from '@reykjavik/hanna-css';
 import { ClassNameModifiers, Cleanup, EitherObj } from '@reykjavik/hanna-utils';
 import { Illustration } from '@reykjavik/hanna-utils/assets';
 import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
@@ -44,32 +45,35 @@ export type MainMenu2Item = {
      * 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")
+     * NOTE: Clicking a menu item will automatically close tghe menu
      * … unless the `onClick` function explicitly returns `false`.
      */
     onClick?: (item: MainMenu2Item) => void | boolean;
     /** Sets `aria-controls=""` on `<button/>`s with `onClick` */
     controlsId?: string;
+    Content?: never;
 };
 export type MainMenu2ButtonItem = MainMenu2Item & {
-    icon?: 'search' | 'user' | 'alert' | 'globe';
+    icon?: IconToken | IconName;
 };
-export type MainMenu2CustomItem = (props: {
+type MainMenu2CustomItemFn = (props: {
     closeMenu: () => void;
     openMenu: () => void;
 }) => ReactElement;
+export type MainMenu2CustomItem = Pick<MainMenu2Item, 'modifier' | 'current'> & {
+    Content: MainMenu2CustomItemFn;
+};
 export type MainMenu2SubMenuItem = MainMenu2Item & {
     descr?: string;
 };
 export type MainMenu2SubMenu = {
     title: string;
     current?: boolean;
-    subItems: Array<MainMenu2SubMenuItem | MainMenu2CustomItem | Falseish>;
+    subItems: Array<MainMenu2SubMenuItem | MainMenu2CustomItem | MainMenu2CustomItemFn | Falseish>;
 };
-export type MainMenu2ItemList = Array<MainMenu2Item | MainMenu2CustomItem | Falseish>;
-export type MainMenu2ButtonItemList = Array<MainMenu2ButtonItem | MainMenu2CustomItem | Falseish>;
-export type MainMenu2SubMenuItemList = Array<MainMenu2SubMenuItem | MainMenu2CustomItem | Falseish>;
+export type MainMenu2ItemList = Array<MainMenu2Item | MainMenu2CustomItem | MainMenu2CustomItemFn | Falseish>;
+export type MainMenu2ButtonItemList<Extra = unknown> = Array<(MainMenu2ButtonItem & Extra) | (MainMenu2CustomItem & Extra) | MainMenu2CustomItemFn | Falseish>;
+export type MainMenu2SubMenuItemList = Array<MainMenu2SubMenuItem | MainMenu2CustomItem | MainMenu2CustomItemFn | Falseish>;
 export type MainMenu2Props = {
     /**
      * URL for the mandatory (usually screen-reader-only) homepage Link.
@@ -96,7 +100,9 @@ export type MainMenu2Props = {
          * "Open Menu" button. Make sure to only use 2–3 items, and remember that
          * they may be hidden on smaller screens.
          */
-        hot?: MainMenu2ButtonItemList;
+        hot?: MainMenu2ButtonItemList<{
+            redhot?: true;
+        }>;
         extra?: MainMenu2ButtonItemList;
         relatedTitle?: string;
         related?: MainMenu2ButtonItemList;
@@ -104,8 +110,7 @@ export type MainMenu2Props = {
     /** Visual type */
     variant?: 'default' | 'light';
     /**
-     * NOTE: Clicking a MainMenu2 item will automatically close HannaUIState's
-     * "Hamburger menu" (a.k.a. "Mobile menu")
+     * NOTE: Clicking a `MainMenu2` item will automatically close the menu
      * … unless the `onItemClick` function explicitly returns `false`.
      */
     onItemClick?: (item: MainMenu2Item) => void | boolean;