@reykjavik/hanna-react 0.10.91 → 0.10.93

package/Multiselect.js

@@ -0,0 +1,236 @@
+"use strict";
+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 hooks_1 = require("@hugsmidjan/react/hooks");
+const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
+const i18n_1 = require("@reykjavik/hanna-utils/i18n");
+const _FocusTrap_js_1 = require("./_abstract/_FocusTrap.js");
+const _Multiselect_search_js_1 = require("./Multiselect/_Multiselect.search.js");
+const Checkbox_js_1 = tslib_1.__importDefault(require("./Checkbox.js"));
+const FormField_js_1 = tslib_1.__importDefault(require("./FormField.js"));
+const TagPill_js_1 = tslib_1.__importDefault(require("./TagPill.js"));
+const utils_js_1 = require("./utils.js");
+const metaData = {
+    /**
+     * The item-count where the list becomes searchable.
+     *
+     * (The search UI, including the on-screen keyboard, takes up a lot of space
+     * on mobile devices, so there's a balance that we want to strike.)
+     */
+    searchableLimit: 20,
+    /**
+     * The item-count above which we display a summary of "current" values
+     * at the top of the drop-down list.
+     *
+     * (This summary just gets in the way with ultra short option lists.)
+     */
+    summaryLimit: 10,
+};
+const { searchableLimit, summaryLimit } = metaData;
+const defaultTexts = {
+    pl: {
+        search: 'Wyszukaj opcje',
+        buttonShow: 'Pokaż opcje',
+        // buttonHide: 'Ukryj opcje',
+        currentValues: 'Wybrane wartości',
+        noneFoundMsg: 'Brak dopasowań',
+    },
+    en: {
+        search: 'Search options',
+        buttonShow: 'Show options',
+        // buttonHide: 'Hide options',
+        currentValues: 'Currently selected',
+        noneFoundMsg: 'No matches',
+    },
+    is: {
+        search: 'Leita í valkostum',
+        buttonShow: 'Birta valkosti',
+        // buttonHide: 'Fela valkosti',
+        currentValues: 'Valin gildi',
+        noneFoundMsg: 'Ekkert passar',
+    },
+};
+const Multiselect = (props) => {
+    const { onSelected, options: _options, disabled: _disabled, readOnly } = props;
+    const disabled = _disabled === true;
+    const disableds = !disabled && _disabled;
+    const name = (0, hooks_1.useDomid)(props.name);
+    const [values, setValues] = (0, utils_js_1.useMixedControlState)(props, 'value', []);
+    const filled = values.length > 0;
+    const empty = !filled && !props.placeholder;
+    const placeholderText = !values.length ? props.placeholder : undefined;
+    const texts = (0, i18n_1.getTexts)(props, defaultTexts);
+    const inputRef = (0, react_1.useRef)(null);
+    const wrapperRef = (0, react_1.useRef)(null);
+    const [activeItemIndex, setActiveItemIndex] = (0, react_1.useState)(-1);
+    const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const toggleOpen = (newIsOpen) => {
+        setIsOpen((isOpen) => {
+            newIsOpen = typeof newIsOpen === 'boolean' ? newIsOpen : !isOpen;
+            if (!newIsOpen) {
+                wrapperRef.current.querySelector('.Multiselect__choices').scrollTo(0, 0);
+                setSearchQuery('');
+                setActiveItemIndex(-1);
+            }
+            return newIsOpen;
+        });
+    };
+    (0, hooks_1.useOnClickOutside)(wrapperRef, () => toggleOpen(false));
+    const options = (0, react_1.useMemo)(() => _options.map((item) => (typeof item === 'string' ? { value: item } : item)), [_options]);
+    const isSearchable = props.forceSearchable || options.length >= searchableLimit;
+    /*
+      NOTE: he `.MultiSelect__currentvalues` should only be visible when
+      there are some items selected, and multiselect is either collapsed,
+      or the dropdown has reached `summaryLimit` number of items.
+      (For fewer items, the "summary" is just in the way.)
+      The `forceSummary` prop overrides this default.
+    */
+    const showCurrentValues = values.length > 0 &&
+        (props.forceSummary || !isOpen || options.length >= summaryLimit);
+    const filteredOptions = (0, react_1.useMemo)(() => (0, _Multiselect_search_js_1.filterItems)(options, searchQuery, props.searchScoring), [searchQuery, options, props.searchScoring]);
+    const handleCheckboxSelection = (0, react_1.useCallback)((selectedItem) => {
+        const selValue = selectedItem.value;
+        const isAdding = values.indexOf(selValue) === -1;
+        const _newValues = isAdding
+            ? [...values, selValue]
+            : values.filter((value) => value !== selValue);
+        const selectedValues = options
+            .filter((item) => _newValues.includes(item.value))
+            .map((item) => item.value);
+        setValues(selectedValues);
+        if (onSelected) {
+            onSelected({
+                value: selectedItem.value,
+                checked: isAdding,
+                option: selectedItem,
+                selectedValues,
+            });
+        }
+    }, [values, options, onSelected, setValues]);
+    const handleInputChange = (event) => {
+        const val = event.target.value;
+        const fixVal = val === ' ' ? '' : val;
+        setSearchQuery(fixVal);
+        toggleOpen(true);
+    };
+    const handleInputKeyDown = (event) => {
+        if (searchQuery.length === 0 && [' ', 'Delete', 'Backspace'].includes(event.key)) {
+            // setSearchQuery('');
+            toggleOpen(activeItemIndex > -1 ? true : !isOpen);
+        }
+    };
+    // When the dropdown is open, add keydown handlers
+    (0, react_1.useEffect)(() => {
+        if (!isOpen) {
+            return;
+        }
+        const handleKeyDown = (e) => {
+            const inputElm = inputRef.current;
+            if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                inputElm.focus();
+                setActiveItemIndex((prevIndex) => prevIndex === 0 ? filteredOptions.length - 1 : prevIndex - 1);
+            }
+            else if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                inputElm.focus();
+                setActiveItemIndex((prevIndex) => prevIndex === filteredOptions.length - 1 ? 0 : prevIndex + 1);
+            }
+            else if (e.key === 'Escape') {
+                e.preventDefault();
+                inputElm.blur();
+                inputElm.focus();
+                toggleOpen(false);
+            }
+            else if (e.key === 'Enter' || e.key === ' ') {
+                if (e.target.closest('.MultiSelect__currentvalues')) {
+                    return;
+                }
+                const focusInRange = activeItemIndex >= 0 && activeItemIndex < filteredOptions.length;
+                if (focusInRange) {
+                    e.preventDefault();
+                    const selItem = filteredOptions[activeItemIndex];
+                    if (selItem) {
+                        handleCheckboxSelection(selItem);
+                    }
+                }
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [activeItemIndex, filteredOptions, isOpen, handleCheckboxSelection, inputRef]);
+    // Auto-close the dropdown when focus has left the building
+    (0, react_1.useEffect)(() => {
+        const wrapperDiv = wrapperRef.current;
+        if (!wrapperDiv) {
+            return;
+        }
+        let closing;
+        const cancelClose = () => clearTimeout(closing);
+        const closeDropdown = () => {
+            closing = setTimeout(() => toggleOpen(false), 200);
+        };
+        wrapperDiv.addEventListener('focusin', cancelClose);
+        wrapperDiv.addEventListener('focusout', closeDropdown);
+        return () => {
+            wrapperDiv.removeEventListener('focusin', cancelClose);
+            wrapperDiv.removeEventListener('focusout', closeDropdown);
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        (_b = (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.Multiselect__option')[activeItemIndex]) === null || _b === void 0 ? void 0 : _b.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest',
+        });
+    }, [activeItemIndex]);
+    return (react_1.default.createElement(FormField_js_1.default, { className: (0, getBemClass_1.default)('Multiselect', props.nowrap && 'nowrap', props.className), ssr: props.ssr, group: "inputlike", label: props.label, LabelTag: props.LabelTag, hideLabel: props.hideLabel, small: props.small, filled: filled, empty: empty, disabled: disabled, invalid: props.invalid, errorMessage: props.errorMessage, assistText: props.assistText, readOnly: readOnly, required: props.required, reqText: props.reqText, id: props.id, renderInput: (className, inputProps, addFocusProps, isBrowser) => {
+            const { id } = inputProps;
+            return (react_1.default.createElement("div", Object.assign({ className: (0, getBemClass_1.default)('Multiselect__input', [isOpen && 'open'], className.input) }, addFocusProps(), { "data-sprinkled": isBrowser, ref: wrapperRef }),
+                !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, 
+                    // 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, 
+                    // Seems like an innocent hack for visible "placeholder" value.
+                    // For scren-readers aria-label should take precedence.
+                    ref: inputRef }, placeholderText || ' ')),
+                react_1.default.createElement("div", { className: "Multiselect__choices", tabIndex: -1 },
+                    isBrowser && showCurrentValues && (react_1.default.createElement("div", { className: "Multiselect__currentvalues", onClick: isOpen || disabled
+                            ? undefined
+                            : () => {
+                                var _a;
+                                toggleOpen();
+                                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                            }, "aria-label": `${texts.currentValues}:` }, values
+                        .map((value) => options.find((opt) => opt.value === value))
+                        .filter(hanna_utils_1.notNully)
+                        .map((item, idx) => (react_1.default.createElement(TagPill_js_1.default, Object.assign({ key: idx, large: true, label: item.label || item.value }, (isOpen && !readOnly
+                        ? {
+                            removable: true,
+                            onRemove: () => {
+                                handleCheckboxSelection(item);
+                            },
+                        }
+                        : { removable: false }))))))),
+                    react_1.default.createElement("ul", { id: id, className: "Multiselect__options", "aria-expanded": isBrowser ? isOpen : undefined, hidden: isBrowser && !isOpen, role: "group", "aria-labelledby": inputProps['aria-labelledby'], "aria-describedby": inputProps['aria-describedby'], "aria-required": props.required },
+                        filteredOptions.length ? (filteredOptions.map((item, idx) => {
+                            const isDisabled = item.disabled != null
+                                ? item.disabled
+                                : disableds && disableds.includes(idx);
+                            const isChecked = values.includes(item.value);
+                            return (react_1.default.createElement(Checkbox_js_1.default, Object.assign({ key: idx, className: (0, getBemClass_1.default)('Multiselect__option', activeItemIndex === idx && 'focused'), disabled: isDisabled, readOnly: readOnly, required: props.required, Wrapper: "li", name: name }, item, { checked: isChecked, "aria-invalid": props.invalid, label: item.label || item.value, onChange: () => handleCheckboxSelection(item), onFocus: () => setActiveItemIndex(idx), wrapperProps: {
+                                    onMouseEnter: () => setActiveItemIndex(idx),
+                                } })));
+                        })) : searchQuery ? (react_1.default.createElement("li", { className: "Multiselect__noresults" }, texts.noneFoundMsg)) : undefined,
+                        react_1.default.createElement(_FocusTrap_js_1.FocusTrap, { Tag: "li" })))));
+        } }));
+};
+exports.Multiselect = Multiselect;
+/** Configuration constants for the Multiselect components */
+exports.Multiselect.meta = metaData;

package/ReadSpeakerPlayer.d.ts

@@ -0,0 +1,64 @@
+import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
+import { HTMLProps } from './utils.js';
+export type ReadSpeakerPlayerI18n = {
+    linkText: string;
+    linkLabel?: string;
+};
+export declare const defaultReadSpeakerPlayerTexts: DefaultTexts<ReadSpeakerPlayerI18n>;
+export type ReadSpeakerPlayerProps = {
+    /**
+     * Your ReadSpeaker account/customer ID
+     *
+     * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html#customer-id
+     */
+    customerId?: string;
+    /**
+     * Reading language/locale for the ReadSpeaker player.
+     *
+     * If you don't specify a `lang`, the player will try to auto-detect
+     * the language of the page, and pick a default `voice` for that language.
+     *
+     * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html#reading-language
+     */
+    lang?: Lowercase<string>;
+    /**
+     * Reading voice for the ReadSpeaker player.
+     *
+     * This prop only makes sense if you specfy a reading `lang`, as
+     * the voices are language-specific.
+     *
+     * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html#voice
+     */
+    voice?: string;
+    /**
+     * The DOM `id=""` of the element to read.
+     *
+     * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html#reading-area-id
+     */
+    readId?: string;
+    /**
+     * The DOM class-name of the element(s) to read
+     *
+     * Comma-separated list of class-names may also work...
+     *
+     * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html#reading-area-class
+     */
+    readClass?: string;
+    texts?: ReadSpeakerPlayerI18n;
+    align?: 'left' | 'right';
+    /** Tooggles CSS float layout */
+    float?: boolean;
+    /** Custom HTML attributes for the wrapper element. */
+    wrapperProps?: HTMLProps<'div'>;
+};
+/**
+ * Embeds a ReadSpeaker player in the page
+ *
+ * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html
+ */
+export declare const ReadSpeakerPlayer: (props: ReadSpeakerPlayerProps) => JSX.Element;
+/**
+ * Run this function if you find that the player keeps reading when a user
+ * swaps pages.
+ */
+export declare const stopReading: () => void | undefined;

package/ReadSpeakerPlayer.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stopReading = exports.ReadSpeakerPlayer = exports.defaultReadSpeakerPlayerTexts = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
+const i18n_1 = require("@reykjavik/hanna-utils/i18n");
+const scriptTagId = 'rs_req_Init';
+const scriptTagSelector = `script#${scriptTagId}`;
+let buttons = 0;
+exports.defaultReadSpeakerPlayerTexts = {
+    en: { linkText: 'Listen', linkLabel: 'Listen to this page read outloud' },
+    is: { linkText: 'Hlusta', linkLabel: 'Hlusta á þessa síðu lesna upphátt' },
+    pl: { linkText: 'Posłuchaj', linkLabel: 'Posłuchaj tej strony odczytanej na głos' },
+};
+/**
+ * Embeds a ReadSpeaker player in the page
+ *
+ * @see https://docs.typo3.org/p/readspeaker/readspeaker-services/main/en-us/Configuration/Index.html
+ */
+const ReadSpeakerPlayer = (props) => {
+    const { align, float, customerId = '11315', lang = '', voice = /^is(?:_is)?$/i.test(lang) ? 'is_dora' : '', readId = '', readClass = readId ? '' : 'Layout__main', wrapperProps = {}, texts, } = props;
+    const { linkText, linkLabel } = (0, i18n_1.getTexts)({ lang: lang.slice(0, 2), texts }, exports.defaultReadSpeakerPlayerTexts);
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        if (buttons < 0) {
+            return;
+        }
+        if (buttons === 0) {
+            if (document.querySelector(scriptTagSelector)) {
+                buttons = -1;
+                return;
+            }
+            const script = document.createElement('script');
+            script.id = scriptTagId;
+            script.src = `https://cdn-eu.readspeaker.com/script/${customerId}/webReader/webReader.js?pids=wr`;
+            script.onload = () => { var _a, _b; return (_b = (_a = window.rspkr) === null || _a === void 0 ? void 0 : _a.ui) === null || _b === void 0 ? void 0 : _b.addClickEvents(); };
+            script.async = true;
+            document.head.appendChild(script);
+        }
+        buttons++;
+        (_b = (_a = window.rspkr) === null || _a === void 0 ? void 0 : _a.ui) === null || _b === void 0 ? void 0 : _b.addClickEvents();
+        return () => {
+            var _a;
+            buttons--;
+            if (buttons === 0) {
+                (_a = document.querySelector(scriptTagSelector)) === null || _a === void 0 ? void 0 : _a.remove();
+            }
+        };
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+    // We're not trying to support dynamic changes to `customerId`
+    // or multiple different `customerId`s on the same page.
+    // If you try that, things will be weird and wonky.
+    ]);
+    return (react_1.default.createElement("div", Object.assign({}, wrapperProps, { className: (0, getBemClass_1.default)('ReadSpeakerPlayer', [align === 'right' && `align-${align}`, float && 'float'], wrapperProps.className) }),
+        react_1.default.createElement("div", { id: "readspeaker_button1", className: "rs_skip rsbtn rs_preserve" },
+            react_1.default.createElement("a", { rel: "nofollow", className: "rsbtn_play", accessKey: "L", title: linkLabel || linkText, href: `https://app-eu.readspeaker.com/cgi-bin/rsent?${new URLSearchParams({
+                    customerid: customerId,
+                    lang,
+                    voice: lang && voice,
+                    autoLang: !lang ? 'true' : 'false',
+                    readclass: readClass,
+                    readid: readId,
+                })}` },
+                react_1.default.createElement("span", { className: "rsbtn_left rsimg rspart" },
+                    react_1.default.createElement("span", { className: "rsbtn_text" },
+                        react_1.default.createElement("span", null, linkText))),
+                react_1.default.createElement("span", { className: "rsbtn_right rsimg rsplay rspart" })))));
+};
+exports.ReadSpeakerPlayer = ReadSpeakerPlayer;
+/**
+ * Run this function if you find that the player keeps reading when a user
+ * swaps pages.
+ */
+const stopReading = () => { var _a, _b; return (_b = (_a = window.rspkr) === null || _a === void 0 ? void 0 : _a.ui) === null || _b === void 0 ? void 0 : _b.destroyActivePlayer(); };
+exports.stopReading = stopReading;

package/RelatedLinks.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 declare const types: {
     readonly external: 1;
     readonly document: 1;
@@ -8,7 +9,7 @@ export type RelatedLinkType = keyof typeof types;
 export type RelatedLinkItem = {
     href: string;
     label: string;
-    target?: string;
+    target?: React.HTMLAttributeAnchorTarget;
     type?: RelatedLinkType;
 };
 export type RelatedLinksProps = {

package/Selectbox.d.ts

@@ -1,8 +1,8 @@
-import type { OptionOrValue, SelectboxProps as _SelectboxProps } from '@hugsmidjan/react/Selectbox';
+import type { OptionOrValue, SelectboxOptions as _SelectboxOptions, SelectboxProps as _SelectboxProps } from '@hugsmidjan/react/Selectbox';
 import { FormFieldWrappingProps } from './FormField.js';
-export { type SelectboxOption, type SelectboxOptions as SelectboxOptionList, 
+export { type SelectboxOption, type SelectboxOptions as SelectboxOptionList, } from '@hugsmidjan/react/Selectbox';
 /** @deprecated Use `SelectboxOptionList` instead  (Will be removed in v0.11) */
-type SelectboxOptions, } from '@hugsmidjan/react/Selectbox';
+export type SelectboxOptions = _SelectboxOptions;
 export type SelectboxProps<O extends OptionOrValue = OptionOrValue> = FormFieldWrappingProps & Omit<_SelectboxProps<O>, 'bem'> & {
     small?: boolean;
 };

package/TextInput.d.ts

@@ -4,7 +4,6 @@ type InputElmProps = JSX.IntrinsicElements['input'];
 type TextareaElmProps = JSX.IntrinsicElements['textarea'];
 export type TextInputProps = {
     small?: boolean;
-    children?: never;
 } & FormFieldWrappingProps & (({
     type?: 'text' | 'email' | 'tel' | 'number' | 'date' | 'url' | 'password' | 'search';
     inputRef?: RefObject<HTMLInputElement>;

package/_abstract/_CardList.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import { EitherObj } from '@reykjavik/hanna-utils';
 import { ImageProps } from './_Image.js';
 type BaseCardProps = {
@@ -12,6 +12,7 @@ export type ImageCardProps = BaseCardProps & {
 };
 export type TextCardProps = BaseCardProps & {
     summary?: string;
+    target?: React.HTMLAttributeAnchorTarget;
 };
 export type CardListProps<T> = {
     cards: Array<T>;

package/_abstract/_CardList.js

@@ -6,10 +6,10 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const _Button_js_1 = require("./_Button.js");
 const _Image_js_1 = require("./_Image.js");
 const Card = (props) => {
-    const { bem, href, title, imgPlaceholder, image, meta, summary } = props;
+    const { bem, href, title, imgPlaceholder, image, meta, summary, target } = props;
     const cardClass = `${bem}__card`;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(_Button_js_1.Button, { bem: cardClass, href: href },
+        react_1.default.createElement(_Button_js_1.Button, { bem: cardClass, href: href, target: target },
             ' ',
             react_1.default.createElement(_Image_js_1.Image, Object.assign({ className: `${bem}__image` }, image, { placeholder: imgPlaceholder })),
             react_1.default.createElement("span", { className: `${cardClass}__title` }, title),

package/_abstract/_FocusTrap.d.ts

@@ -0,0 +1,14 @@
+export type FocusTrapProps = {
+    /** The HTML tag to use for the trap element. (Default `<span />`) */
+    Tag?: `span` | `li`;
+    /** Set to `true` for focus traps positioned at the top of a container. */
+    atTop?: boolean;
+    /**
+     * How deep the trap is placed in the DOM tree beneath its container element.
+     *
+     * Default: `1`
+     */
+    depth?: number;
+};
+/** A focus trap element that can be used to keep keyboard focus within a container block. */
+export declare const FocusTrap: (props: FocusTrapProps) => JSX.Element;

package/_abstract/_FocusTrap.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FocusTrap = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+/** A focus trap element that can be used to keep keyboard focus within a container block. */
+const FocusTrap = (props) => {
+    const Tag = props.Tag || 'span';
+    return (react_1.default.createElement(Tag, { tabIndex: 0, onFocus: (e) => {
+            var _a;
+            let container = e.currentTarget;
+            let depth = Math.max(props.depth || 0, 1);
+            while (depth-- && container) {
+                container = container.parentElement;
+            }
+            if (!container) {
+                return;
+            }
+            const focusables = container.querySelectorAll('a,input, select, textarea,button, [tabindex]');
+            const targetIdx = props.atTop ? focusables.length - 1 : 0;
+            (_a = focusables[targetIdx]) === null || _a === void 0 ? void 0 : _a.focus();
+        } }));
+};
+exports.FocusTrap = FocusTrap;

package/_abstract/_TogglerGroup.d.ts

@@ -1,24 +1,28 @@
 import { FormFieldInputProps } from '../FormField.js';
 import { HTMLProps } from '../utils.js';
 import { TogglerInputProps } from './_TogglerInput.js';
-export type TogglerGroupOption = {
+export type TogglerGroupOption<T = 'default'> = {
     value: string;
-    label?: string | JSX.Element;
+    label?: T extends 'default' ? string | JSX.Element : T;
     disabled?: boolean;
     id?: string;
 };
-export type TogglerGroupOptions = Array<TogglerGroupOption>;
+export type TogglerGroupOptions<T = 'default'> = Array<TogglerGroupOption<T>>;
 type RestrictedInputProps = Omit<HTMLProps<'input'>, 'type' | 'value' | 'defaultValue' | 'checked' | 'defaultChecked' | 'className' | 'id' | 'name' | 'children'>;
-export type TogglerGroupProps = {
-    options: TogglerGroupOptions;
+export type TogglerGroupProps<T = 'default'> = {
+    options: Array<string> | TogglerGroupOptions<T>;
     className?: string;
-    name: string;
+    name?: string;
     disabled?: boolean | ReadonlyArray<number>;
     inputProps?: RestrictedInputProps;
     onSelected?: (payload: {
+        /** The value of being selected/updated */
         value: string;
+        /** The new checked state of the selected value */
         checked: boolean;
-        option: TogglerGroupOption;
+        /** The option object being selected */
+        option: TogglerGroupOption<T>;
+        /** The updated value array */
         selectedValues: Array<string>;
     }) => void;
 } & Omit<FormFieldInputProps, 'disabled'>;

package/_abstract/_TogglerGroup.js

@@ -2,14 +2,22 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TogglerGroup = void 0;
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
+const hooks_1 = require("@hugsmidjan/react/hooks");
 const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
 const utils_js_1 = require("../utils.js");
 const TogglerGroup = (props) => {
     const { 
     // id,
-    className, bem, name, disabled, Toggler, onSelected, options, isRadio, inputProps = {}, } = props;
+    className, bem, disabled, readOnly, Toggler, onSelected, isRadio, inputProps = {}, } = props;
     const [values, setValues] = (0, utils_js_1.useMixedControlState)(props, 'value', []);
+    const name = (0, hooks_1.useDomid)(props.name);
+    const options = (0, react_1.useMemo)(() => {
+        const _options = props.options;
+        return typeof _options[0] === 'string'
+            ? _options.map((option) => ({ value: option }))
+            : _options;
+    }, [props.options]);
     return (react_1.default.createElement("ul", { className: (0, getBemClass_1.default)(bem, null, className), role: "group", "aria-labelledby": props['aria-labelledby'], "aria-describedby": props['aria-describedby'], "aria-required": props.required }, options.map((option, i) => {
         const isDisabled = option.disabled != null
             ? option.disabled
@@ -27,7 +35,7 @@ const TogglerGroup = (props) => {
                 }
                 setValues(selectedValues);
                 onSelected && onSelected({ value, checked, option, selectedValues });
-            }, disabled: isDisabled, "aria-invalid": props['aria-invalid'], checked: isChecked })));
+            }, disabled: isDisabled, readOnly: readOnly, "aria-invalid": props['aria-invalid'], checked: isChecked })));
     })));
 };
 exports.TogglerGroup = TogglerGroup;

package/_abstract/_TogglerGroupField.d.ts

@@ -3,9 +3,9 @@ import { BemPropsModifier } from '@hugsmidjan/react/types';
 import { FormFieldGroupWrappingProps } from '../FormField.js';
 import { TogglerGroupOption, TogglerGroupOptions, TogglerGroupProps } from './_TogglerGroup.js';
 import { TogglerInputProps } from './_TogglerInput.js';
-export type TogglerGroupFieldProps = {
+export type TogglerGroupFieldProps<T = 'default'> = {
     className?: string;
-} & FormFieldGroupWrappingProps & TogglerGroupProps;
+} & Omit<FormFieldGroupWrappingProps, 'disabled'> & TogglerGroupProps<T>;
 type _TogglerGroupFieldProps = {
     Toggler: (props: TogglerInputProps) => ReactElement;
     isRadio?: true;
@@ -13,7 +13,7 @@ type _TogglerGroupFieldProps = {
     defaultValue?: string | ReadonlyArray<string>;
     bem: string;
 } & BemPropsModifier;
-export type TogglerGroupFieldOption = TogglerGroupOption;
-export type TogglerGroupFieldOptions = TogglerGroupOptions;
+export type TogglerGroupFieldOption<T = 'default'> = TogglerGroupOption<T>;
+export type TogglerGroupFieldOptions<T = 'default'> = TogglerGroupOptions<T>;
 export declare const TogglerGroupField: (props: TogglerGroupFieldProps & _TogglerGroupFieldProps) => JSX.Element;
 export {};

package/_abstract/_TogglerGroupField.js

@@ -14,8 +14,8 @@ const TogglerGroupField = (props) => {
         : typeof defaultValue === 'string'
             ? [defaultValue]
             : defaultValue, [defaultValue]);
-    return (react_1.default.createElement(FormField_js_1.default, { className: (0, getBemClass_1.default)(bem, modifier, className), group: true, label: label, LabelTag: LabelTag, assistText: assistText, hideLabel: hideLabel, disabled: disabled, readOnly: readOnly, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, id: id, renderInput: (className, inputProps) => {
-            return (react_1.default.createElement(_TogglerGroup_js_1.TogglerGroup, Object.assign({ bem: className.options }, inputProps, togglerGroupProps, { value: _value, defaultValue: _defaultValue, Toggler: Toggler })));
+    return (react_1.default.createElement(FormField_js_1.default, { className: (0, getBemClass_1.default)(bem, modifier, className), group: true, label: label, LabelTag: LabelTag, assistText: assistText, hideLabel: hideLabel, disabled: !!disabled, readOnly: readOnly, invalid: invalid, errorMessage: errorMessage, required: required, reqText: reqText, id: id, renderInput: (className, inputProps) => {
+            return (react_1.default.createElement(_TogglerGroup_js_1.TogglerGroup, Object.assign({ bem: className.options }, inputProps, togglerGroupProps, { disabled: disabled, value: _value, defaultValue: _defaultValue, Toggler: Toggler })));
         } }));
 };
 exports.TogglerGroupField = TogglerGroupField;

package/_abstract/_TogglerInput.d.ts

@@ -2,7 +2,6 @@ import { BemPropsModifier } from '@hugsmidjan/react/types';
 export type TogglerInputProps = {
     label: string | JSX.Element;
     children?: never;
-    Wrapper?: 'div' | 'li';
     invalid?: boolean;
     /** Hidden label prefix text to indicate that the field is required.
      *
@@ -13,6 +12,9 @@ export type TogglerInputProps = {
      * */
     reqText?: string | false;
     errorMessage?: string | JSX.Element;
+    Wrapper?: 'div' | 'li';
+    wrapperProps?: JSX.IntrinsicElements['div'];
+    inputProps?: JSX.IntrinsicElements['input'];
 } & BemPropsModifier & Omit<JSX.IntrinsicElements['input'], 'type'>;
 type _TogglerInputProps = {
     bem: string;

package/_abstract/_TogglerInput.js

@@ -6,22 +6,25 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const hooks_1 = require("@hugsmidjan/react/hooks");
 const getBemClass_1 = tslib_1.__importDefault(require("@hugsmidjan/react/utils/getBemClass"));
 const TogglerInput = (props) => {
-    const { bem, modifier, className, label, invalid, errorMessage, Wrapper = 'div', required, reqText, type, id, innerWrap } = props, inputProps = tslib_1.__rest(props, ["bem", "modifier", "className", "label", "invalid", "errorMessage", "Wrapper", "required", "reqText", "type", "id", "innerWrap"]);
+    const { bem, modifier, className, label, invalid, errorMessage, Wrapper = 'div', required, reqText, type, id, innerWrap, wrapperProps, inputProps } = props, restInputProps = tslib_1.__rest(props, ["bem", "modifier", "className", "label", "invalid", "errorMessage", "Wrapper", "required", "reqText", "type", "id", "innerWrap", "wrapperProps", "inputProps"]);
     const domid = (0, hooks_1.useDomid)(id);
     const errorId = errorMessage && 'error' + domid;
     const reqStar = required && reqText !== false && (react_1.default.createElement("abbr", { className: bem + '__label__reqstar', 
         // TODO: add mo-better i18n thinking
         title: (reqText || 'Þarf að haka í') + ': ' }, "*"));
+    const readOnly = restInputProps.readOnly || (inputProps || {}).readOnly;
     const labelContent = (react_1.default.createElement(react_1.default.Fragment, null,
         ' ',
         reqStar,
         " ",
         label,
         ' '));
-    return (react_1.default.createElement(Wrapper, { className: (0, getBemClass_1.default)(bem, modifier, className) },
-        react_1.default.createElement("input", Object.assign({ className: bem + '__input', type: type, id: domid, "aria-invalid": invalid || !!errorMessage || undefined, "aria-describedby": errorId }, inputProps)),
+    return (react_1.default.createElement(Wrapper, Object.assign({}, wrapperProps, { className: (0, getBemClass_1.default)(bem, modifier, className) }),
+        react_1.default.createElement("input", Object.assign({ className: bem + '__input', type: type, id: domid, "aria-invalid": invalid || !!errorMessage || undefined, "aria-describedby": errorId }, restInputProps, inputProps, (readOnly && { disabled: true }))),
         ' ',
-        react_1.default.createElement("label", { className: bem + '__label', htmlFor: domid }, innerWrap ? (react_1.default.createElement("span", { className: bem + '__label__wrap' }, labelContent)) : (labelContent)),
+        react_1.default.createElement("label", { className: bem + '__label', htmlFor: domid },
+            innerWrap ? (react_1.default.createElement("span", { className: bem + '__label__wrap' }, labelContent)) : (labelContent),
+            readOnly && (react_1.default.createElement("input", { type: "hidden", name: restInputProps.name, value: restInputProps.value }))),
         errorMessage && (react_1.default.createElement("div", { className: bem + '__error', id: errorId }, errorMessage))));
 };
 exports.TogglerInput = TogglerInput;