@reykjavik/hanna-react 0.10.138 → 0.10.139

package/CHANGELOG.md

@@ -4,6 +4,23 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.139
+
+_2024-11-20_
+
+- feat: Add component `DropdownButton`
+- `Multiselect`:
+  - fix: Incorrect `aria-controls` attribute value on input/toggler elements
+- `MainMenu2`:
+  - fix: Skip rendering pointless `<button/>`s when `onItemClick` is undefined
+- `FocusTrap:`
+  - fix: Add `iframe` and `summary` to the list of focusable elements
+  - docs: Add short JSDoc on why/how the `depth` prop is useful
+- `FormField`:
+  - fix: Indicate that `renderInput`'s `inputProps.id` value is always set
+- `utils`:
+  - feat: Add low-level `domid` helper function
+
 ## 0.10.138
 
 _2024-10-31_

package/Datepicker.js

@@ -153,7 +153,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 || i18n_1.DEFAULT_LANG, dateFormat: normalizedDateFormats, onChange: (date) => {
+                react_1.default.createElement(ReactDatepicker_js_1.ReactDatePicker, Object.assign({ required: inputProps.required, disabled: inputProps.disabled, readOnly: inputProps.readOnly, selected: value, name: isoMode ? undefined : name, locale: lang || i18n_1.DEFAULT_LANG, dateFormat: normalizedDateFormats, onChange: (date) => {
                         date = date || undefined;
                         setValue(date);
                         onChange && onChange(date);

package/DropdownButton.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { IconName } from '@reykjavik/hanna-css';
+import { ButtonVariantProps } from './_abstract/_Button.js';
+import { MainMenu2Item } from './MainMenu2.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;
+};
+export type DropdownButtonCustomItem = (props: {
+    closeMenu: () => void;
+}) => React.ReactElement;
+export type DropdownButtonProps = Prefix<Omit<ButtonVariantProps, 'small'>, 'button'> & {
+    label: string | NonNullable<React.ReactElement>;
+    labelLong?: string;
+    /** Default: `"seconcary"` */
+    buttonType?: 'primary' | 'secondary';
+    items: Array<DropdownButtonItem | DropdownButtonCustomItem>;
+} & WrapperElmProps<'details', 'open' | 'name'> & SSRSupportProps;
+export declare const DropdownButton: (props: DropdownButtonProps) => JSX.Element;
+export {};

package/DropdownButton.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropdownButton = 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 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 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 { wrapperProps = {} } = props;
+    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) {
+                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('.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),
+        react_1.default.createElement("ul", { className: "DropdownButton__menu", onMouseEnter: () => {
+                setIsHovering(true);
+            }, onMouseLeave: () => {
+                setIsHovering(false);
+            }, onFocus: () => {
+                setIsOpen(true, 0);
+            }, style: x != null
+                ? {
+                    '--DropdownButton-pos-y': `${y}px`,
+                    '--DropdownButton-pos-x': `${x}px`,
+                }
+                : undefined },
+            props.items.map((item, i) => {
+                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 })));
+                }
+                const { label, onClick, href } = item;
+                const commonProps = {
+                    className: 'DropdownButton__itembutton',
+                    lang: item.lang,
+                    'data-icon': item.icon,
+                    'arial-label': item.labelLong,
+                };
+                return (react_1.default.createElement("li", { key: i, className: "DropdownButton__item" }, isBrowser && onClick ? (react_1.default.createElement("button", Object.assign({}, commonProps, { type: "button", "aria-controls": item.controlsId, onClick: (e) => {
+                        onClick(item) !== false && closeMenuStat();
+                    } }), label)) : href != null ? (react_1.default.createElement("a", Object.assign({}, commonProps, { href: href, hrefLang: item.hrefLang, target: item.target }), label)) : null));
+            }),
+            react_1.default.createElement(FocusTrap_js_1.FocusTrap, { Tag: "li", depth: 2 }))));
+};
+exports.DropdownButton = DropdownButton;

package/FocusTrap.d.ts

@@ -6,7 +6,10 @@ export type FocusTrapProps = {
     /**
      * How deep the trap is placed in the DOM tree beneath its container element.
      *
-     * Default: `1`
+     * This is useful when the trap needs to be placed inside an element that's
+     * not a direct child of the desired trapping container.
+     *
+     * Default: `1`  (i.e. use the parent element.)
      */
     depth?: number;
 };

package/FocusTrap.js

@@ -21,7 +21,7 @@ const FocusTrap = (props) => {
             if (!container) {
                 return;
             }
-            const focusables = container.querySelectorAll('a[href], input, select, textarea, button, [tabindex]:not(.FocusTrap):not([tabindex="-1"])');
+            const focusables = container.querySelectorAll('a[href], input, select, textarea, button, summary, iframe, [tabindex]:not(.FocusTrap):not([tabindex="-1"])');
             const delta = props.atTop ? -1 : 1;
             let i = delta < 0 ? focusables.length - 1 : 0;
             let newTarget;

package/FormField.d.ts

@@ -77,7 +77,9 @@ type FormFieldProps = FormFieldGroupWrappingProps & {
     group?: boolean | 'inputlike';
     empty?: boolean;
     filled?: boolean;
-    renderInput(className: InputClassNames, inputProps: FormFieldInputProps, addFocusProps: FocusPropMaker, isBrowser?: boolean): JSX.Element;
+    renderInput(className: InputClassNames, inputProps: FormFieldInputProps & {
+        id: string;
+    }, addFocusProps: FocusPropMaker, isBrowser?: boolean): JSX.Element;
 };
 export declare const FormField: (props: FormFieldProps) => JSX.Element;
 export default FormField;

package/MainMenu2.d.ts

@@ -15,7 +15,7 @@ export type MainMenu2I18n = {
 export declare const defaultMainMenu2Texts: DefaultTexts<MainMenu2I18n>;
 export type MainMenu2Item = {
     /** Visible label text */
-    label: string | NonNullable<ReactElement>;
+    label: string | ReactElement;
     /** Un-abbreviated label set as `title=""` and `aria-label=""` */
     labelLong?: string;
     /** Language of the link label */

package/MainMenu2.js

@@ -89,7 +89,7 @@ const getRenderers = (props) => {
                 size: 'small',
             }
             : undefined;
-        return (react_1.default.createElement(Tag, { key: key, className: (0, hanna_utils_1.modifiedClass)(`${classPrefix}item`, item.modifier), "aria-current": item.current || undefined }, isBrowser && (onClick || href == null) ? (react_1.default.createElement(ButtonTag, Object.assign({}, commonProps, { type: "button", "aria-controls": controlsId, onClick: () => {
+        return (react_1.default.createElement(Tag, { key: key, className: (0, hanna_utils_1.modifiedClass)(`${classPrefix}item`, item.modifier), "aria-current": item.current || undefined }, isBrowser && (onClick || (href == null && onItemClick)) ? (react_1.default.createElement(ButtonTag, Object.assign({}, commonProps, { type: "button", "aria-controls": controlsId, onClick: () => {
                 const keepOpen1 = onClick && onClick(item) === false;
                 const keepOpen2 = onItemClick && onItemClick(item) === false;
                 !(keepOpen1 || keepOpen2) && closeMenu();

package/Multiselect.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Multiselect = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const domid_1 = tslib_1.__importDefault(require("@hugsmidjan/qj/domid"));
 const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
 const _Multiselect_search_js_1 = require("./Multiselect/_Multiselect.search.js");
@@ -202,9 +201,9 @@ const Multiselect = (props) => {
     return (react_1.default.createElement(FormField_js_1.default, Object.assign({ extraClassName: (0, hanna_utils_1.modifiedClass)('Multiselect', props.nowrap && 'nowrap'), group: "inputlike", filled: filled, empty: empty }, (0, FormField_js_1.getFormFieldWrapperProps)(props), { renderInput: (className, inputProps, addFocusProps, isBrowser) => {
             const { id } = inputProps;
             return (react_1.default.createElement("div", Object.assign({ className: (0, hanna_utils_1.modifiedClass)('Multiselect__input', [isOpen && 'open'], className.input) }, addFocusProps(), { "data-sprinkled": isBrowser, ref: inputWrapperRef }),
-                !isBrowser ? null : isSearchable ? (react_1.default.createElement("input", { className: "Multiselect__search", id: `toggler:${id}`, "aria-label": texts.search, "aria-controls": (0, domid_1.default)(), "data-expanded": isOpen || undefined, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onClick: () => toggleOpen(), value: searchQuery, 
+                !isBrowser ? null : isSearchable ? (react_1.default.createElement("input", { className: "Multiselect__search", id: `toggler:${id}`, "aria-label": texts.search, "aria-controls": id, "data-expanded": isOpen || undefined, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onClick: () => toggleOpen(), value: searchQuery, 
                     // onFocus={handleInputFocus}
-                    placeholder: placeholderText, disabled: disabled, ref: inputRef })) : (react_1.default.createElement("button", { className: "Multiselect__toggler", id: `toggler:${id}`, type: "button", "aria-label": texts.buttonShow, "aria-controls": (0, domid_1.default)(), "aria-expanded": isOpen, onClick: () => toggleOpen(), disabled: disabled, 
+                    placeholder: placeholderText, disabled: disabled, ref: inputRef })) : (react_1.default.createElement("button", { className: "Multiselect__toggler", id: `toggler:${id}`, type: "button", "aria-label": texts.buttonShow, "aria-controls": id, "aria-expanded": isOpen, onClick: () => toggleOpen(), disabled: disabled, 
                     // Seems like an innocent hack for visible "placeholder" value.
                     // For scren-readers aria-label should take precedence.
                     ref: inputRef }, placeholderText || ' ')),

package/SearchResults.js

@@ -4,7 +4,6 @@ exports.SearchResults = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const react_intersection_observer_1 = require("react-intersection-observer");
-const prettyNum_1 = require("@hugsmidjan/qj/prettyNum");
 const range_1 = tslib_1.__importDefault(require("@hugsmidjan/qj/range"));
 const hanna_utils_1 = require("@reykjavik/hanna-utils");
 const i18n_1 = require("@reykjavik/hanna-utils/i18n");
@@ -12,6 +11,14 @@ const _SearchResultsItem_js_1 = require("./SearchResults/_SearchResultsItem.js")
 const useDomid_js_1 = require("./utils/useDomid.js");
 const Alert_js_1 = tslib_1.__importDefault(require("./Alert.js"));
 const Tabs_js_1 = tslib_1.__importDefault(require("./Tabs.js"));
+const _fmts = {};
+const formatNumber = (num, lang) => {
+    let fmt = _fmts[lang];
+    if (!fmt) {
+        fmt = _fmts[lang] = new Intl.NumberFormat(lang);
+    }
+    return fmt.format(num);
+};
 const renderDefaultErrorText = () => (react_1.default.createElement(react_1.default.Fragment, null,
     "\u00DAps, \u00FEa\u00F0 hefur komi\u00F0 upp villa. M\u00E1 bj\u00F3\u00F0a \u00FE\u00E9r a\u00F0 pr\u00F3fa aftur a\u00F0 leita?",
     react_1.default.createElement("br", null),
@@ -46,7 +53,7 @@ const SearchResults_Tabs = (props) => {
     const { domid, filters, activeIdx, setFilter, lang } = props;
     const tabs = (0, react_1.useMemo)(() => (filters || []).map(({ label, count }) => ({
         label,
-        badge: (0, prettyNum_1.prettyNum)(count, { lang }),
+        badge: count && formatNumber(count, lang),
     })), [filters, lang]);
     return tabs.length ? (react_1.default.createElement(Tabs_js_1.default, { role: "tablist", "aria-controls": domid, tabs: tabs, activeIdx: activeIdx || 0, onSetActive: (i) => setFilter && setFilter(i) })) : null;
 };
@@ -75,7 +82,7 @@ const SearchResults__loadmore = (props) => {
         ' ',
         react_1.default.createElement("span", { className: "SearchResults__loadmore__count" },
             "(",
-            (0, prettyNum_1.prettyNum)(moreCount, { lang }),
+            formatNumber(moreCount, lang),
             ")"))) : null;
 };
 // ===========================================================================
@@ -85,7 +92,7 @@ const renderTitle = (props, texts) => {
         status === 'loadingquery'
             ? texts.loadQueryTitle
             : totalHits
-                ? `${(0, prettyNum_1.prettyNum)(totalHits, { lang: texts.lang })} ${texts.resultsTitle}`
+                ? `${formatNumber(totalHits, texts.lang)} ${texts.resultsTitle}`
                 : texts.noResultsTitle,
         react_1.default.createElement("span", { className: "SearchResults__query" }, query)));
 };

package/_abstract/_AbstractCarousel.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AbstractCarousel = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
-const A_1 = tslib_1.__importDefault(require("@hugsmidjan/qj/A"));
 const debounce_1 = tslib_1.__importDefault(require("@hugsmidjan/qj/debounce"));
 const focusElm_1 = require("@hugsmidjan/qj/focusElm");
 const throttle_1 = tslib_1.__importDefault(require("@hugsmidjan/qj/throttle"));
@@ -67,7 +66,7 @@ const AbstractCarousel = (props) => {
         const calcActiveItem = (0, throttle_1.default)(() => {
             const { scrollLeft, children } = listElm;
             // using Array#find as forEachUntil
-            (0, A_1.default)(children).find((item, i) => {
+            Array.from(children).find((item, i) => {
                 if (scrollLeft <= item.offsetLeft + item.offsetWidth / 2) {
                     setActiveItem(i);
                     return true;

package/_abstract/_Button.d.ts

@@ -35,6 +35,7 @@ export type ButtonVariantProps = {
 };
 type _ButtonProps = ButtonProps & ButtonVariantProps & BemProps & {
     children?: ReactNode;
+    as?: 'summary';
 };
 export declare const Button: (props: _ButtonProps) => JSX.Element;
 export {};

package/_abstract/_Button.js

@@ -28,11 +28,14 @@ const icons = {
 // NOTE: As this component already accepts all `<button/>` and `<a/>` props
 // directly, it makes little sense to add support for `wrapperProps` on top.
 const Button = (props) => {
-    const { bem, small, // eslint-disable-line deprecation/deprecation
-    size = small ? 'small' : 'normal', modifier, children, variant = 'normal', icon = 'none', label = children } = props, buttonProps = tslib_1.__rest(props, ["bem", "small", "size", "modifier", "children", "variant", "icon", "label"]);
+    const { as: CustomTag, bem, small, // eslint-disable-line deprecation/deprecation
+    size = small ? 'small' : 'normal', modifier, children, variant = 'normal', icon = 'none', label = children } = props, buttonProps = tslib_1.__rest(props, ["as", "bem", "small", "size", "modifier", "children", "variant", "icon", "label"]);
     const className = bem &&
         (0, hanna_utils_1.modifiedClass)(bem, [modifier, variants[variant], sizes[size], navigationFlags[icon]], props.className);
     const iconProp = icons[icon] && { 'data-icon': icons[icon] };
+    if (CustomTag) {
+        return (react_1.default.createElement(CustomTag, Object.assign({}, buttonProps, { className: className }, iconProp), label));
+    }
     if (buttonProps.href != null) {
         return (react_1.default.createElement(_Link_js_1.Link, Object.assign({}, buttonProps, { className: className }, iconProp), label));
     }

package/esm/Datepicker.js

@@ -148,7 +148,7 @@ export const Datepicker = (props) => {
                         return elm;
                     }) }, addFocusProps()),
                 isoMode && (React.createElement("input", { type: "hidden", name: name, value: value === null || value === void 0 ? void 0 : value.toISOString().slice(0, 10) })),
-                React.createElement(ReactDatePicker, Object.assign({ id: domid, required: inputProps.required, disabled: inputProps.disabled, readOnly: inputProps.readOnly, selected: value, name: isoMode ? undefined : name, locale: lang || DEFAULT_LANG, dateFormat: normalizedDateFormats, onChange: (date) => {
+                React.createElement(ReactDatePicker, Object.assign({ required: inputProps.required, disabled: inputProps.disabled, readOnly: inputProps.readOnly, selected: value, name: isoMode ? undefined : name, locale: lang || DEFAULT_LANG, dateFormat: normalizedDateFormats, onChange: (date) => {
                         date = date || undefined;
                         setValue(date);
                         onChange && onChange(date);

package/esm/DropdownButton.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { IconName } from '@reykjavik/hanna-css';
+import { ButtonVariantProps } from './_abstract/_Button.js';
+import { MainMenu2Item } from './MainMenu2.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;
+};
+export type DropdownButtonCustomItem = (props: {
+    closeMenu: () => void;
+}) => React.ReactElement;
+export type DropdownButtonProps = Prefix<Omit<ButtonVariantProps, 'small'>, 'button'> & {
+    label: string | NonNullable<React.ReactElement>;
+    labelLong?: string;
+    /** Default: `"seconcary"` */
+    buttonType?: 'primary' | 'secondary';
+    items: Array<DropdownButtonItem | DropdownButtonCustomItem>;
+} & WrapperElmProps<'details', 'open' | 'name'> & SSRSupportProps;
+export declare const DropdownButton: (props: DropdownButtonProps) => JSX.Element;
+export {};

package/esm/DropdownButton.js

@@ -0,0 +1,72 @@
+import React, { 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 DropdownButton = (props) => {
+    const [isOpen, setIsOpen] = useLaggedState(false, 10);
+    const isBrowser = useIsBrowserSide(props.ssr);
+    const [isHovering, setIsHovering] = useState(false);
+    const wrapperRef = React.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 { wrapperProps = {} } = props;
+    return (React.createElement("details", Object.assign({}, wrapperProps, { className: modifiedClass('DropdownButton', 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('.DropdownButton__toggler'));
+            refs.setFloating(elm.querySelector('.DropdownButton__menu'));
+        } }),
+        React.createElement(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),
+        React.createElement("ul", { className: "DropdownButton__menu", onMouseEnter: () => {
+                setIsHovering(true);
+            }, onMouseLeave: () => {
+                setIsHovering(false);
+            }, onFocus: () => {
+                setIsOpen(true, 0);
+            }, style: x != null
+                ? {
+                    '--DropdownButton-pos-y': `${y}px`,
+                    '--DropdownButton-pos-x': `${x}px`,
+                }
+                : undefined },
+            props.items.map((item, i) => {
+                if (typeof item === 'function') {
+                    const Item = item;
+                    return (React.createElement("li", { key: i, className: "DropdownButton__item" },
+                        React.createElement(Item, { closeMenu: closeMenuStat })));
+                }
+                const { label, onClick, href } = item;
+                const commonProps = {
+                    className: 'DropdownButton__itembutton',
+                    lang: item.lang,
+                    'data-icon': item.icon,
+                    'arial-label': item.labelLong,
+                };
+                return (React.createElement("li", { key: i, className: "DropdownButton__item" }, isBrowser && onClick ? (React.createElement("button", Object.assign({}, commonProps, { type: "button", "aria-controls": item.controlsId, onClick: (e) => {
+                        onClick(item) !== false && closeMenuStat();
+                    } }), label)) : href != null ? (React.createElement("a", Object.assign({}, commonProps, { href: href, hrefLang: item.hrefLang, target: item.target }), label)) : null));
+            }),
+            React.createElement(FocusTrap, { Tag: "li", depth: 2 }))));
+};

package/esm/FocusTrap.d.ts

@@ -6,7 +6,10 @@ export type FocusTrapProps = {
     /**
      * How deep the trap is placed in the DOM tree beneath its container element.
      *
-     * Default: `1`
+     * This is useful when the trap needs to be placed inside an element that's
+     * not a direct child of the desired trapping container.
+     *
+     * Default: `1`  (i.e. use the parent element.)
      */
     depth?: number;
 };

package/esm/FocusTrap.js

@@ -17,7 +17,7 @@ export const FocusTrap = (props) => {
             if (!container) {
                 return;
             }
-            const focusables = container.querySelectorAll('a[href], input, select, textarea, button, [tabindex]:not(.FocusTrap):not([tabindex="-1"])');
+            const focusables = container.querySelectorAll('a[href], input, select, textarea, button, summary, iframe, [tabindex]:not(.FocusTrap):not([tabindex="-1"])');
             const delta = props.atTop ? -1 : 1;
             let i = delta < 0 ? focusables.length - 1 : 0;
             let newTarget;

package/esm/FormField.d.ts

@@ -77,7 +77,9 @@ type FormFieldProps = FormFieldGroupWrappingProps & {
     group?: boolean | 'inputlike';
     empty?: boolean;
     filled?: boolean;
-    renderInput(className: InputClassNames, inputProps: FormFieldInputProps, addFocusProps: FocusPropMaker, isBrowser?: boolean): JSX.Element;
+    renderInput(className: InputClassNames, inputProps: FormFieldInputProps & {
+        id: string;
+    }, addFocusProps: FocusPropMaker, isBrowser?: boolean): JSX.Element;
 };
 export declare const FormField: (props: FormFieldProps) => JSX.Element;
 export default FormField;

package/esm/MainMenu2.d.ts

@@ -15,7 +15,7 @@ export type MainMenu2I18n = {
 export declare const defaultMainMenu2Texts: DefaultTexts<MainMenu2I18n>;
 export type MainMenu2Item = {
     /** Visible label text */
-    label: string | NonNullable<ReactElement>;
+    label: string | ReactElement;
     /** Un-abbreviated label set as `title=""` and `aria-label=""` */
     labelLong?: string;
     /** Language of the link label */

package/esm/MainMenu2.js

@@ -85,7 +85,7 @@ const getRenderers = (props) => {
                 size: 'small',
             }
             : undefined;
-        return (React.createElement(Tag, { key: key, className: modifiedClass(`${classPrefix}item`, item.modifier), "aria-current": item.current || undefined }, isBrowser && (onClick || href == null) ? (React.createElement(ButtonTag, Object.assign({}, commonProps, { type: "button", "aria-controls": controlsId, onClick: () => {
+        return (React.createElement(Tag, { key: key, className: modifiedClass(`${classPrefix}item`, item.modifier), "aria-current": item.current || undefined }, isBrowser && (onClick || (href == null && onItemClick)) ? (React.createElement(ButtonTag, Object.assign({}, commonProps, { type: "button", "aria-controls": controlsId, onClick: () => {
                 const keepOpen1 = onClick && onClick(item) === false;
                 const keepOpen2 = onItemClick && onItemClick(item) === false;
                 !(keepOpen1 || keepOpen2) && closeMenu();

package/esm/Multiselect.js

@@ -1,5 +1,4 @@
 import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
-import domId from '@hugsmidjan/qj/domid';
 import { modifiedClass, notNully } from '@reykjavik/hanna-utils';
 import { getTexts } from '@reykjavik/hanna-utils/i18n';
 import { filterItems } from './Multiselect/_Multiselect.search.js';
@@ -198,9 +197,9 @@ export const Multiselect = (props) => {
     return (React.createElement(FormField, Object.assign({ extraClassName: modifiedClass('Multiselect', props.nowrap && 'nowrap'), group: "inputlike", filled: filled, empty: empty }, getFormFieldWrapperProps(props), { renderInput: (className, inputProps, addFocusProps, isBrowser) => {
             const { id } = inputProps;
             return (React.createElement("div", Object.assign({ className: modifiedClass('Multiselect__input', [isOpen && 'open'], className.input) }, addFocusProps(), { "data-sprinkled": isBrowser, ref: inputWrapperRef }),
-                !isBrowser ? null : isSearchable ? (React.createElement("input", { className: "Multiselect__search", id: `toggler:${id}`, "aria-label": texts.search, "aria-controls": domId(), "data-expanded": isOpen || undefined, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onClick: () => toggleOpen(), value: searchQuery, 
+                !isBrowser ? null : isSearchable ? (React.createElement("input", { className: "Multiselect__search", id: `toggler:${id}`, "aria-label": texts.search, "aria-controls": id, "data-expanded": isOpen || undefined, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onClick: () => toggleOpen(), value: searchQuery, 
                     // onFocus={handleInputFocus}
-                    placeholder: placeholderText, disabled: disabled, ref: inputRef })) : (React.createElement("button", { className: "Multiselect__toggler", id: `toggler:${id}`, type: "button", "aria-label": texts.buttonShow, "aria-controls": domId(), "aria-expanded": isOpen, onClick: () => toggleOpen(), disabled: disabled, 
+                    placeholder: placeholderText, disabled: disabled, ref: inputRef })) : (React.createElement("button", { className: "Multiselect__toggler", id: `toggler:${id}`, type: "button", "aria-label": texts.buttonShow, "aria-controls": id, "aria-expanded": isOpen, onClick: () => toggleOpen(), disabled: disabled, 
                     // Seems like an innocent hack for visible "placeholder" value.
                     // For scren-readers aria-label should take precedence.
                     ref: inputRef }, placeholderText || ' ')),

package/esm/SearchResults.js

@@ -1,6 +1,5 @@
 import React, { useEffect, useMemo, useRef } from 'react';
 import { useInView } from 'react-intersection-observer';
-import { prettyNum } from '@hugsmidjan/qj/prettyNum';
 import range from '@hugsmidjan/qj/range';
 import { modifiedClass } from '@reykjavik/hanna-utils';
 import { getTexts } from '@reykjavik/hanna-utils/i18n';
@@ -8,6 +7,14 @@ import { SearchResultsItem, } from './SearchResults/_SearchResultsItem.js';
 import { useDomid } from './utils/useDomid.js';
 import Alert from './Alert.js';
 import Tabs from './Tabs.js';
+const _fmts = {};
+const formatNumber = (num, lang) => {
+    let fmt = _fmts[lang];
+    if (!fmt) {
+        fmt = _fmts[lang] = new Intl.NumberFormat(lang);
+    }
+    return fmt.format(num);
+};
 const renderDefaultErrorText = () => (React.createElement(React.Fragment, null,
     "\u00DAps, \u00FEa\u00F0 hefur komi\u00F0 upp villa. M\u00E1 bj\u00F3\u00F0a \u00FE\u00E9r a\u00F0 pr\u00F3fa aftur a\u00F0 leita?",
     React.createElement("br", null),
@@ -42,7 +49,7 @@ const SearchResults_Tabs = (props) => {
     const { domid, filters, activeIdx, setFilter, lang } = props;
     const tabs = useMemo(() => (filters || []).map(({ label, count }) => ({
         label,
-        badge: prettyNum(count, { lang }),
+        badge: count && formatNumber(count, lang),
     })), [filters, lang]);
     return tabs.length ? (React.createElement(Tabs, { role: "tablist", "aria-controls": domid, tabs: tabs, activeIdx: activeIdx || 0, onSetActive: (i) => setFilter && setFilter(i) })) : null;
 };
@@ -71,7 +78,7 @@ const SearchResults__loadmore = (props) => {
         ' ',
         React.createElement("span", { className: "SearchResults__loadmore__count" },
             "(",
-            prettyNum(moreCount, { lang }),
+            formatNumber(moreCount, lang),
             ")"))) : null;
 };
 // ===========================================================================
@@ -81,7 +88,7 @@ const renderTitle = (props, texts) => {
         status === 'loadingquery'
             ? texts.loadQueryTitle
             : totalHits
-                ? `${prettyNum(totalHits, { lang: texts.lang })} ${texts.resultsTitle}`
+                ? `${formatNumber(totalHits, texts.lang)} ${texts.resultsTitle}`
                 : texts.noResultsTitle,
         React.createElement("span", { className: "SearchResults__query" }, query)));
 };

package/esm/_abstract/_AbstractCarousel.js

@@ -1,5 +1,4 @@
 import React, { useEffect, useMemo, useRef, useState, } from 'react';
-import A from '@hugsmidjan/qj/A';
 import debounce from '@hugsmidjan/qj/debounce';
 import { focusElm } from '@hugsmidjan/qj/focusElm';
 import throttle from '@hugsmidjan/qj/throttle';
@@ -63,7 +62,7 @@ export const AbstractCarousel = (props) => {
         const calcActiveItem = throttle(() => {
             const { scrollLeft, children } = listElm;
             // using Array#find as forEachUntil
-            A(children).find((item, i) => {
+            Array.from(children).find((item, i) => {
                 if (scrollLeft <= item.offsetLeft + item.offsetWidth / 2) {
                     setActiveItem(i);
                     return true;

package/esm/_abstract/_Button.d.ts

@@ -35,6 +35,7 @@ export type ButtonVariantProps = {
 };
 type _ButtonProps = ButtonProps & ButtonVariantProps & BemProps & {
     children?: ReactNode;
+    as?: 'summary';
 };
 export declare const Button: (props: _ButtonProps) => JSX.Element;
 export {};

package/esm/_abstract/_Button.js

@@ -25,11 +25,14 @@ const icons = {
 // NOTE: As this component already accepts all `<button/>` and `<a/>` props
 // directly, it makes little sense to add support for `wrapperProps` on top.
 export const Button = (props) => {
-    const { bem, small, // eslint-disable-line deprecation/deprecation
-    size = small ? 'small' : 'normal', modifier, children, variant = 'normal', icon = 'none', label = children } = props, buttonProps = __rest(props, ["bem", "small", "size", "modifier", "children", "variant", "icon", "label"]);
+    const { as: CustomTag, bem, small, // eslint-disable-line deprecation/deprecation
+    size = small ? 'small' : 'normal', modifier, children, variant = 'normal', icon = 'none', label = children } = props, buttonProps = __rest(props, ["as", "bem", "small", "size", "modifier", "children", "variant", "icon", "label"]);
     const className = bem &&
         modifiedClass(bem, [modifier, variants[variant], sizes[size], navigationFlags[icon]], props.className);
     const iconProp = icons[icon] && { 'data-icon': icons[icon] };
+    if (CustomTag) {
+        return (React.createElement(CustomTag, Object.assign({}, buttonProps, { className: className }, iconProp), label));
+    }
     if (buttonProps.href != null) {
         return (React.createElement(Link, Object.assign({}, buttonProps, { className: className }, iconProp), label));
     }

package/esm/index.d.ts

@@ -73,6 +73,7 @@
 /// <reference path="./FieldGroup.d.tsx" />
 /// <reference path="./FeatureList.d.tsx" />
 /// <reference path="./ExtraLinks.d.tsx" />
+/// <reference path="./DropdownButton.d.tsx" />
 /// <reference path="./Datepicker.d.tsx" />
 /// <reference path="./ContentImage.d.tsx" />
 /// <reference path="./ContentArticle.d.tsx" />

package/esm/utils/useCallbackOnEsc.d.ts

@@ -1,6 +1,6 @@
 /**
  * Performs a callback whenever the user hits the ESC key.
  *
- * Pass `undefined` to remove the event listener
+ * Pass `undefined` or `false` to remove the event listener.
  */
-export declare const useCallbackOnEsc: (callback: (() => void) | undefined) => void;
+export declare const useCallbackOnEsc: (callback: (() => void) | undefined | false) => void;

package/esm/utils/useCallbackOnEsc.js

@@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react';
 /**
  * Performs a callback whenever the user hits the ESC key.
  *
- * Pass `undefined` to remove the event listener
+ * Pass `undefined` or `false` to remove the event listener.
  */
 export const useCallbackOnEsc = (callback) => {
     const cb = useRef(callback);

package/esm/utils/useDomid.d.ts

@@ -1,3 +1,7 @@
+/**
+ * Returns a short locally-unique ID string.
+ */
+export declare const domid: () => string;
 /**
  * Returns a stable, unique ID string.
  *

package/esm/utils/useDomid.js

@@ -1,7 +1,12 @@
 import React from 'react';
-import domid from '@hugsmidjan/qj/domid';
 // @ts-expect-error  (transparently feature-detect useId hook, which is introduced in React@18)
 const useId = React.useId;
+const domid_prefix = `_${ /*@__PURE__*/`${Date.now()}-`.slice(6)}`;
+let domid_incr = 0;
+/**
+ * Returns a short locally-unique ID string.
+ */
+export const domid = () => domid_prefix + domid_incr++;
 /**
  * Returns a stable, unique ID string.
  *

package/esm/utils/useOnClickOutside.d.ts

@@ -1,9 +1,10 @@
 import { MutableRefObject, RefObject } from 'react';
-type Ref<E extends HTMLElement> = MutableRefObject<E> | RefObject<E>;
+type ClickHandler = (event: globalThis.MouseEvent | globalThis.TouchEvent) => void;
 /**
+ * A hook that calls a `handler` function when a click event occurs outside of
+ * a given `containerRef`.
  *
- * @param ref single or array of refs to check for click outside
- * @param handler callback to run when clicked outside of the ref
+ * Pass `undefined` or `false` to remove the event listener.
  */
-export declare const useOnClickOutside: <E extends HTMLElement>(ref: Ref<E> | Ref<E>[], handler: (event: globalThis.MouseEvent | globalThis.TouchEvent) => void) => void;
+export declare const useOnClickOutside: (containerRef: MutableRefObject<Element> | RefObject<Element>, handler: ClickHandler | undefined | false) => void;
 export {};

package/esm/utils/useOnClickOutside.js

@@ -1,29 +1,29 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useRef } from 'react';
 /**
+ * A hook that calls a `handler` function when a click event occurs outside of
+ * a given `containerRef`.
  *
- * @param ref single or array of refs to check for click outside
- * @param handler callback to run when clicked outside of the ref
+ * Pass `undefined` or `false` to remove the event listener.
  */
-export const useOnClickOutside = (ref, handler) => {
-    const refs = Array.isArray(ref) ? ref : [ref];
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const stableRefs = useMemo(() => refs, refs);
+export const useOnClickOutside = (containerRef, handler) => {
+    const h = useRef(handler);
+    const active = !!handler;
+    h.current = handler;
     useEffect(() => {
+        if (!active || !containerRef.current) {
+            return;
+        }
         const listener = (event) => {
-            const shouldTrigger = !stableRefs.some((r) => {
-                const node = r.current;
-                if (!node) {
-                    return false;
-                }
-                return node.contains(event.target);
-            });
-            if (shouldTrigger) {
-                handler(event);
+            if (!containerRef.current) {
+                return false;
+            }
+            if (!containerRef.current.contains(event.target)) {
+                h.current && h.current(event);
             }
         };
         document.addEventListener('click', listener);
         return () => {
             document.removeEventListener('click', listener);
         };
-    }, [handler, stableRefs]);
+    }, [active, containerRef]);
 };

package/index.d.ts

@@ -73,6 +73,7 @@
 /// <reference path="./FieldGroup.d.tsx" />
 /// <reference path="./FeatureList.d.tsx" />
 /// <reference path="./ExtraLinks.d.tsx" />
+/// <reference path="./DropdownButton.d.tsx" />
 /// <reference path="./Datepicker.d.tsx" />
 /// <reference path="./ContentImage.d.tsx" />
 /// <reference path="./ContentArticle.d.tsx" />

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.138",
+	"version": "0.10.139",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",
@@ -17,8 +17,8 @@
 		"@floating-ui/react": "^0.19.2",
 		"@hugsmidjan/qj": "^4.22.1",
 		"@hugsmidjan/react": "^0.4.32",
-		"@reykjavik/hanna-css": "^0.4.15",
-		"@reykjavik/hanna-utils": "^0.2.17",
+		"@reykjavik/hanna-css": "^0.4.16",
+		"@reykjavik/hanna-utils": "^0.2.18",
 		"@types/react-autosuggest": "^10.1.0",
 		"@types/react-datepicker": "^4.8.0",
 		"@types/react-transition-group": "^4.4.0",
@@ -345,6 +345,10 @@
 			"import": "./esm/ExtraLinks.js",
 			"require": "./ExtraLinks.js"
 		},
+		"./DropdownButton": {
+			"import": "./esm/DropdownButton.js",
+			"require": "./DropdownButton.js"
+		},
 		"./Datepicker": {
 			"import": "./esm/Datepicker.js",
 			"require": "./Datepicker.js"

package/utils/useCallbackOnEsc.d.ts

@@ -1,6 +1,6 @@
 /**
  * Performs a callback whenever the user hits the ESC key.
  *
- * Pass `undefined` to remove the event listener
+ * Pass `undefined` or `false` to remove the event listener.
  */
-export declare const useCallbackOnEsc: (callback: (() => void) | undefined) => void;
+export declare const useCallbackOnEsc: (callback: (() => void) | undefined | false) => void;

package/utils/useCallbackOnEsc.js

@@ -5,7 +5,7 @@ const react_1 = require("react");
 /**
  * Performs a callback whenever the user hits the ESC key.
  *
- * Pass `undefined` to remove the event listener
+ * Pass `undefined` or `false` to remove the event listener.
  */
 const useCallbackOnEsc = (callback) => {
     const cb = (0, react_1.useRef)(callback);

package/utils/useDomid.d.ts

@@ -1,3 +1,7 @@
+/**
+ * Returns a short locally-unique ID string.
+ */
+export declare const domid: () => string;
 /**
  * Returns a stable, unique ID string.
  *

package/utils/useDomid.js

@@ -1,11 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDomid = void 0;
+exports.useDomid = exports.domid = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
-const domid_1 = tslib_1.__importDefault(require("@hugsmidjan/qj/domid"));
 // @ts-expect-error  (transparently feature-detect useId hook, which is introduced in React@18)
 const useId = react_1.default.useId;
+const domid_prefix = `_${ /*@__PURE__*/`${Date.now()}-`.slice(6)}`;
+let domid_incr = 0;
+/**
+ * Returns a short locally-unique ID string.
+ */
+const domid = () => domid_prefix + domid_incr++;
+exports.domid = domid;
 /**
  * Returns a stable, unique ID string.
  *
@@ -25,7 +31,7 @@ exports.useDomid = useId
     : (staticId) => {
         const idRef = react_1.default.useRef();
         if (!idRef.current) {
-            idRef.current = staticId || (0, domid_1.default)();
+            idRef.current = staticId || (0, exports.domid)();
         }
         return idRef.current;
     };

package/utils/useOnClickOutside.d.ts

@@ -1,9 +1,10 @@
 import { MutableRefObject, RefObject } from 'react';
-type Ref<E extends HTMLElement> = MutableRefObject<E> | RefObject<E>;
+type ClickHandler = (event: globalThis.MouseEvent | globalThis.TouchEvent) => void;
 /**
+ * A hook that calls a `handler` function when a click event occurs outside of
+ * a given `containerRef`.
  *
- * @param ref single or array of refs to check for click outside
- * @param handler callback to run when clicked outside of the ref
+ * Pass `undefined` or `false` to remove the event listener.
  */
-export declare const useOnClickOutside: <E extends HTMLElement>(ref: Ref<E> | Ref<E>[], handler: (event: globalThis.MouseEvent | globalThis.TouchEvent) => void) => void;
+export declare const useOnClickOutside: (containerRef: MutableRefObject<Element> | RefObject<Element>, handler: ClickHandler | undefined | false) => void;
 export {};

package/utils/useOnClickOutside.js

@@ -3,31 +3,31 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useOnClickOutside = void 0;
 const react_1 = require("react");
 /**
+ * A hook that calls a `handler` function when a click event occurs outside of
+ * a given `containerRef`.
  *
- * @param ref single or array of refs to check for click outside
- * @param handler callback to run when clicked outside of the ref
+ * Pass `undefined` or `false` to remove the event listener.
  */
-const useOnClickOutside = (ref, handler) => {
-    const refs = Array.isArray(ref) ? ref : [ref];
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const stableRefs = (0, react_1.useMemo)(() => refs, refs);
+const useOnClickOutside = (containerRef, handler) => {
+    const h = (0, react_1.useRef)(handler);
+    const active = !!handler;
+    h.current = handler;
     (0, react_1.useEffect)(() => {
+        if (!active || !containerRef.current) {
+            return;
+        }
         const listener = (event) => {
-            const shouldTrigger = !stableRefs.some((r) => {
-                const node = r.current;
-                if (!node) {
-                    return false;
-                }
-                return node.contains(event.target);
-            });
-            if (shouldTrigger) {
-                handler(event);
+            if (!containerRef.current) {
+                return false;
+            }
+            if (!containerRef.current.contains(event.target)) {
+                h.current && h.current(event);
             }
         };
         document.addEventListener('click', listener);
         return () => {
             document.removeEventListener('click', listener);
         };
-    }, [handler, stableRefs]);
+    }, [active, containerRef]);
 };
 exports.useOnClickOutside = useOnClickOutside;