@reykjavik/hanna-react 0.10.161 → 0.10.163

package/Alert.d.ts

@@ -11,8 +11,11 @@ type AlertType = 'info' | 'success' | 'warning' | 'error' | 'critical';
 export declare const alertTypes: Record<string, 1>;
 export type AlertProps = {
     type: AlertType;
+    /** Defaults to `true` if an `onClose` handler or a `closeUrl` is passaed */
     closable?: boolean;
+    /** The alert content */
     children?: ReactNode;
+    /** UNSAFE raw HTML content for the Alert, e.g. one emitted by a CMS. */
     childrenHTML?: string;
     /** server-side anchor href */
     closeUrl?: string;
@@ -21,8 +24,8 @@ export type AlertProps = {
     /** Set to true to opt out of the opening transition */
     instantShow?: boolean;
 } & SSRSupportProps & EitherObj<{
-    /** Seconds until the Alert auto-closes.
-     *
+    /**
+     * Seconds until the Alert auto-closes.
      * Mosueover and keyboard focus resets the timer.
      */
     autoClose: number;
@@ -31,7 +34,8 @@ export type AlertProps = {
     /** Callback that fires when the alert has closed/transitoned out */
     onClosed: () => void;
 }, {
-    /** @deprecated This signature with the `event` argument will be removed in hanna-react v0.11
+    /**
+     * NOTE: The signature with the `event` argument will be removed in hanna-react v0.11
      *
      * Return `false` to prevent the alert from closing
      */

package/Alert.js

@@ -48,8 +48,7 @@ exports.alertTypes = {
     critical: 1,
 };
 const Alert = (props) => {
-    const { type, childrenHTML, children, onClose, // eslint-disable-line deprecation/deprecation
-    closeUrl, closable = !!(onClose || closeUrl != null), ssr, onClosed, instantShow, wrapperProps, } = props;
+    const { type, childrenHTML, children, onClose, closeUrl, closable = !!(onClose || closeUrl != null), ssr, onClosed, instantShow, wrapperProps, } = props;
     const autoClose = Math.max(props.autoClose || 0, 0);
     const closing = (0, react_1.useRef)();
     const isBrowser = (0, utils_js_1.useIsBrowserSide)(ssr);
@@ -62,7 +61,7 @@ const Alert = (props) => {
     const closeAlert = (0, react_1.useCallback)((event) => {
         const ret = onClose &&
             // @ts-expect-error  (@deprecated `event` parameter will be removed in v0.11)
-            onClose(event); // eslint-disable-line deprecation/deprecation
+            onClose(event);
         if (ret !== false) {
             setOpen(false);
             if (closing.current) {

package/CHANGELOG.md

@@ -4,6 +4,19 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.163
+
+_2026-01-20_
+
+- feat: Add `useLaggedState` to `utils` for advanced delayed state updates
+
+## 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_

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

@@ -3,12 +3,12 @@ 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 = {
+type _DropdownButtonItem = {
     /** Visible label text */
     label: string | ReactElement;
     /** Un-abbreviated label set as `aria-label=""` */
@@ -41,7 +41,7 @@ export type DropdownButtonItem = {
      * NOTE: Clicking a menu item will automatically close tghe menu
      * … unless the `onClick` function explicitly returns `false`.
      */
-    onClick?: (item: MainMenu2Item) => void | boolean;
+    onClick?: (item: _DropdownButtonItem) => void | boolean;
     /** Sets `aria-controls=""` on `<button/>`s with `onClick` */
     controlsId?: string;
     Content?: never;
@@ -49,27 +49,28 @@ export type DropdownButtonItem = {
     destructive?: boolean;
     icon?: IconToken | IconName_old;
 };
-type DropdownButtonCustomItemFn = (props: {
+type DropdownbButtonCustomItemFn = (props: {
     closeMenu: () => void;
 }) => ReactElement;
-export type DropdownButtonCustomItem = Pick<DropdownButtonItem, 'modifier' | 'current'> & {
-    Content: DropdownButtonCustomItemFn;
+type _DropdownButtonCustomItem = Pick<ContextMenuItem, 'modifier' | 'current'> & {
+    Content: DropdownbButtonCustomItemFn;
 };
-/** Renders a divider line between `Dropdown*Item`s with an optional legend */
-export type DropdownButtonItemDivider = {
+type _DropdownButtonItemDivider = {
     divider: true;
     label?: string;
 };
-export type DropdownButtonProps = {
+type _DropdownButtonProps = {
     /** The items to display inside the dropdown menu */
-    items: Array<DropdownButtonItem | DropdownButtonCustomItem | DropdownButtonItemDivider>;
+    items: Array<_DropdownButtonItem | _DropdownButtonCustomItem | _DropdownButtonItemDivider>;
     /**
-     * NOTE: Clicking a DropdownButton item will automatically close the drropdown
+     * 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;
+    onItemClick?: (item: ContextMenuItem) => void | boolean;
 } & EitherObj<{
-    /** Label for the toggler button */
+    /** Label for the toggler */
     label: string | ReactElement;
     /** Longer accessible toggler label text */
     labelLong?: string;
@@ -81,5 +82,14 @@ export type DropdownButtonProps = {
         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,6 +19,8 @@ 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);

package/esm/Alert.d.ts

@@ -11,8 +11,11 @@ type AlertType = 'info' | 'success' | 'warning' | 'error' | 'critical';
 export declare const alertTypes: Record<string, 1>;
 export type AlertProps = {
     type: AlertType;
+    /** Defaults to `true` if an `onClose` handler or a `closeUrl` is passaed */
     closable?: boolean;
+    /** The alert content */
     children?: ReactNode;
+    /** UNSAFE raw HTML content for the Alert, e.g. one emitted by a CMS. */
     childrenHTML?: string;
     /** server-side anchor href */
     closeUrl?: string;
@@ -21,8 +24,8 @@ export type AlertProps = {
     /** Set to true to opt out of the opening transition */
     instantShow?: boolean;
 } & SSRSupportProps & EitherObj<{
-    /** Seconds until the Alert auto-closes.
-     *
+    /**
+     * Seconds until the Alert auto-closes.
      * Mosueover and keyboard focus resets the timer.
      */
     autoClose: number;
@@ -31,7 +34,8 @@ export type AlertProps = {
     /** Callback that fires when the alert has closed/transitoned out */
     onClosed: () => void;
 }, {
-    /** @deprecated This signature with the `event` argument will be removed in hanna-react v0.11
+    /**
+     * NOTE: The signature with the `event` argument will be removed in hanna-react v0.11
      *
      * Return `false` to prevent the alert from closing
      */

package/esm/Alert.js

@@ -44,8 +44,7 @@ export const alertTypes = {
     critical: 1,
 };
 export const Alert = (props) => {
-    const { type, childrenHTML, children, onClose, // eslint-disable-line deprecation/deprecation
-    closeUrl, closable = !!(onClose || closeUrl != null), ssr, onClosed, instantShow, wrapperProps, } = props;
+    const { type, childrenHTML, children, onClose, closeUrl, closable = !!(onClose || closeUrl != null), ssr, onClosed, instantShow, wrapperProps, } = props;
     const autoClose = Math.max(props.autoClose || 0, 0);
     const closing = useRef();
     const isBrowser = useIsBrowserSide(ssr);
@@ -58,7 +57,7 @@ export const Alert = (props) => {
     const closeAlert = useCallback((event) => {
         const ret = onClose &&
             // @ts-expect-error  (@deprecated `event` parameter will be removed in v0.11)
-            onClose(event); // eslint-disable-line deprecation/deprecation
+            onClose(event);
         if (ret !== false) {
             setOpen(false);
             if (closing.current) {

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

@@ -0,0 +1,98 @@
+import React, { useRef, useState, } from 'react';
+import { autoUpdate, flip, shift, useFloating } from '@floating-ui/react';
+import { modifiedClass } from '@reykjavik/hanna-utils';
+import { Button } from './_abstract/_Button.js';
+import { useCallbackOnEsc } from './utils/useCallbackOnEsc.js';
+import { useLaggedState } from './utils/useLaggedState.js';
+import { useOnClickOutside } from './utils/useOnClickOutside.js';
+import { FocusTrap } from './FocusTrap.js';
+import { useIsBrowserSide } from './utils.js';
+export const ContextMenu = (props) => {
+    const [isOpen, setIsOpen] = useLaggedState(false, 10);
+    const isBrowser = useIsBrowserSide(props.ssr);
+    const [isHovering, setIsHovering] = useState(false);
+    const wrapperRef = useRef(null);
+    const closeMenuStat = () => setIsOpen(false, 0);
+    useOnClickOutside(wrapperRef, isOpen && closeMenuStat);
+    useCallbackOnEsc(isOpen && closeMenuStat);
+    const { x, y, refs } = useFloating({
+        placement: 'bottom-start',
+        middleware: [flip(), shift()],
+        whileElementsMounted: autoUpdate,
+    });
+    const { onItemClick, wrapperProps = {} } = props;
+    const toggle = (e) => {
+        e.preventDefault();
+        setIsOpen(!isOpen, 0);
+    };
+    return (React.createElement("details", Object.assign({}, wrapperProps, { className: 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.createElement("summary", { className: "ContextMenu__toggler", onClick: toggle },
+            React.createElement(props.Toggler, { isOpen: isOpen }))) : (React.createElement(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.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.createElement("li", { key: i, className: modifiedClass('ContextMenu__itemDivider', item.label && 'labelled') }, item.label || false));
+                }
+                if (typeof item === 'function') {
+                    item = { Content: item };
+                }
+                const itemProps = {
+                    className: modifiedClass('ContextMenu__item', item.modifier),
+                    'aria-current': item.current || undefined,
+                };
+                if ('Content' in item && item.Content) {
+                    return (React.createElement("li", Object.assign({ key: i, "data-customitem": "" }, itemProps),
+                        React.createElement(item.Content, { closeMenu: closeMenuStat })));
+                }
+                const { label, onClick, href, destructive } = item;
+                const commonProps = {
+                    className: 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.createElement("li", { key: i, className: modifiedClass('ContextMenu__item', item.modifier), "aria-current": item.current || undefined }, doRenderButton ? (React.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.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.createElement(FocusTrap, { Tag: "li", depth: 2 }))));
+};

package/esm/DropdownButton.d.ts

@@ -3,12 +3,12 @@ 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 = {
+type _DropdownButtonItem = {
     /** Visible label text */
     label: string | ReactElement;
     /** Un-abbreviated label set as `aria-label=""` */
@@ -41,7 +41,7 @@ export type DropdownButtonItem = {
      * NOTE: Clicking a menu item will automatically close tghe menu
      * … unless the `onClick` function explicitly returns `false`.
      */
-    onClick?: (item: MainMenu2Item) => void | boolean;
+    onClick?: (item: _DropdownButtonItem) => void | boolean;
     /** Sets `aria-controls=""` on `<button/>`s with `onClick` */
     controlsId?: string;
     Content?: never;
@@ -49,27 +49,28 @@ export type DropdownButtonItem = {
     destructive?: boolean;
     icon?: IconToken | IconName_old;
 };
-type DropdownButtonCustomItemFn = (props: {
+type DropdownbButtonCustomItemFn = (props: {
     closeMenu: () => void;
 }) => ReactElement;
-export type DropdownButtonCustomItem = Pick<DropdownButtonItem, 'modifier' | 'current'> & {
-    Content: DropdownButtonCustomItemFn;
+type _DropdownButtonCustomItem = Pick<ContextMenuItem, 'modifier' | 'current'> & {
+    Content: DropdownbButtonCustomItemFn;
 };
-/** Renders a divider line between `Dropdown*Item`s with an optional legend */
-export type DropdownButtonItemDivider = {
+type _DropdownButtonItemDivider = {
     divider: true;
     label?: string;
 };
-export type DropdownButtonProps = {
+type _DropdownButtonProps = {
     /** The items to display inside the dropdown menu */
-    items: Array<DropdownButtonItem | DropdownButtonCustomItem | DropdownButtonItemDivider>;
+    items: Array<_DropdownButtonItem | _DropdownButtonCustomItem | _DropdownButtonItemDivider>;
     /**
-     * NOTE: Clicking a DropdownButton item will automatically close the drropdown
+     * 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;
+    onItemClick?: (item: ContextMenuItem) => void | boolean;
 } & EitherObj<{
-    /** Label for the toggler button */
+    /** Label for the toggler */
     label: string | ReactElement;
     /** Longer accessible toggler label text */
     labelLong?: string;
@@ -81,5 +82,14 @@ export type DropdownButtonProps = {
         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/esm/DropdownButton.js

@@ -1,3 +1,11 @@
+// ===========================================================================
+/*
+  NOTE:
+  THIS COMPONENT IS DEPRECATED AND WILL BE REMOVED IN A FUTURE VERSION.
+  DO NOT UPDATE IT OR ADD NEW FEATURES.
+
+*/
+// ===========================================================================
 import React, { useRef, useState, } from 'react';
 import { autoUpdate, flip, shift, useFloating } from '@floating-ui/react';
 import { modifiedClass } from '@reykjavik/hanna-utils';
@@ -7,6 +15,8 @@ import { useLaggedState } from './utils/useLaggedState.js';
 import { useOnClickOutside } from './utils/useOnClickOutside.js';
 import { FocusTrap } from './FocusTrap.js';
 import { useIsBrowserSide } from './utils.js';
+/** @deprecated Use `ContextMenu` instead.  (Will be removed in v0.11) */
+// eslint-disable-next-line deprecation/deprecation
 export const DropdownButton = (props) => {
     const [isOpen, setIsOpen] = useLaggedState(false, 10);
     const isBrowser = useIsBrowserSide(props.ssr);

package/esm/index.d.ts

@@ -77,6 +77,7 @@
 /// <reference path="./ExtraLinks.d.tsx" />
 /// <reference path="./DropdownButton.d.tsx" />
 /// <reference path="./Datepicker.d.tsx" />
+/// <reference path="./ContextMenu.d.tsx" />
 /// <reference path="./ContentImage.d.tsx" />
 /// <reference path="./ContentArticle.d.tsx" />
 /// <reference path="./ContactBubble.d.tsx" />

package/esm/utils/useLaggedState.d.ts

@@ -1,5 +1,6 @@
 /**
- * A `useState` alternative with in-built support for delayed (debounced) effect.
+ * An advanced `useState` alternative with in-built support for delayed
+ * (debounced) effect.
  *
  * This is especially useful when emulating "focusin"/"focusout" events,
  * and a less jittery 'onMouseEnter'/'onMouseLeave' behavior.

package/esm/utils/useLaggedState.js

@@ -1,7 +1,8 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 // ---------------------------------------------------------------------------
 /**
- * A `useState` alternative with in-built support for delayed (debounced) effect.
+ * An advanced `useState` alternative with in-built support for delayed
+ * (debounced) effect.
  *
  * This is especially useful when emulating "focusin"/"focusout" events,
  * and a less jittery 'onMouseEnter'/'onMouseLeave' behavior.

package/esm/utils.d.ts

@@ -5,6 +5,7 @@ export * from './utils/useDidChange.js';
 export * from './utils/useDomid.js';
 export * from './utils/useFormatMonitor.js';
 export * from './utils/useGetSVGtext.js';
+export * from './utils/useLaggedState.js';
 export * from './utils/useMixedControlState.js';
 export * from './utils/useScrollbarWidthCSSVar.js';
 /**

package/esm/utils.js

@@ -4,6 +4,7 @@ export * from './utils/useDidChange.js';
 export * from './utils/useDomid.js';
 export * from './utils/useFormatMonitor.js';
 export * from './utils/useGetSVGtext.js';
+export * from './utils/useLaggedState.js';
 export * from './utils/useMixedControlState.js';
 export * from './utils/useScrollbarWidthCSSVar.js';
 // ---------------------------------------------------------------------------

package/index.d.ts

@@ -77,6 +77,7 @@
 /// <reference path="./ExtraLinks.d.tsx" />
 /// <reference path="./DropdownButton.d.tsx" />
 /// <reference path="./Datepicker.d.tsx" />
+/// <reference path="./ContextMenu.d.tsx" />
 /// <reference path="./ContentImage.d.tsx" />
 /// <reference path="./ContentArticle.d.tsx" />
 /// <reference path="./ContactBubble.d.tsx" />

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.161",
+	"version": "0.10.163",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",
@@ -17,7 +17,7 @@
 		"@floating-ui/react": "^0.19.2",
 		"@hugsmidjan/qj": "^4.22.1",
 		"@hugsmidjan/react": "^0.4.32",
-		"@reykjavik/hanna-css": "^0.4.24",
+		"@reykjavik/hanna-css": "^0.4.25",
 		"@reykjavik/hanna-utils": "^0.2.21",
 		"@types/react-autosuggest": "^10.1.0",
 		"@types/react-datepicker": "^4.8.0",
@@ -361,6 +361,10 @@
 			"import": "./esm/Datepicker.js",
 			"require": "./Datepicker.js"
 		},
+		"./ContextMenu": {
+			"import": "./esm/ContextMenu.js",
+			"require": "./ContextMenu.js"
+		},
 		"./ContentImage": {
 			"import": "./esm/ContentImage.js",
 			"require": "./ContentImage.js"

package/utils/useLaggedState.d.ts

@@ -1,5 +1,6 @@
 /**
- * A `useState` alternative with in-built support for delayed (debounced) effect.
+ * An advanced `useState` alternative with in-built support for delayed
+ * (debounced) effect.
  *
  * This is especially useful when emulating "focusin"/"focusout" events,
  * and a less jittery 'onMouseEnter'/'onMouseLeave' behavior.

package/utils/useLaggedState.js

@@ -4,7 +4,8 @@ exports.useLaggedState = void 0;
 const react_1 = require("react");
 // ---------------------------------------------------------------------------
 /**
- * A `useState` alternative with in-built support for delayed (debounced) effect.
+ * An advanced `useState` alternative with in-built support for delayed
+ * (debounced) effect.
  *
  * This is especially useful when emulating "focusin"/"focusout" events,
  * and a less jittery 'onMouseEnter'/'onMouseLeave' behavior.

package/utils.d.ts

@@ -5,6 +5,7 @@ export * from './utils/useDidChange.js';
 export * from './utils/useDomid.js';
 export * from './utils/useFormatMonitor.js';
 export * from './utils/useGetSVGtext.js';
+export * from './utils/useLaggedState.js';
 export * from './utils/useMixedControlState.js';
 export * from './utils/useScrollbarWidthCSSVar.js';
 /**

package/utils.js

@@ -8,6 +8,7 @@ tslib_1.__exportStar(require("./utils/useDidChange.js"), exports);
 tslib_1.__exportStar(require("./utils/useDomid.js"), exports);
 tslib_1.__exportStar(require("./utils/useFormatMonitor.js"), exports);
 tslib_1.__exportStar(require("./utils/useGetSVGtext.js"), exports);
+tslib_1.__exportStar(require("./utils/useLaggedState.js"), exports);
 tslib_1.__exportStar(require("./utils/useMixedControlState.js"), exports);
 tslib_1.__exportStar(require("./utils/useScrollbarWidthCSSVar.js"), exports);
 // ---------------------------------------------------------------------------