@reykjavik/hanna-react 0.10.92 → 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/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;

package/esm/ArticleCarousel/_ArticleCarouselCard.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { HannaColorTheme } from '@reykjavik/hanna-css';
 import { Illustration } from '@reykjavik/hanna-utils/assets';
 import { ImageProps } from '../_abstract/_Image.js';
@@ -10,7 +11,7 @@ export type ArticleCarouselCardProps = {
     title: string;
     summary: string;
     href: string;
-    target?: string;
+    target?: React.HTMLAttributeAnchorTarget;
     color?: ColorFamily;
     /** NOTE: if both `color` and `theme` are specified
      * then `color` takes precedence.

package/esm/ContactBubble.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
 import { SSRSupport } from './utils.js';
 export type ContactBubbleI18n = {
@@ -25,7 +26,7 @@ export type ContactBubbleItem = {
     href: string;
     /** Prevents default link behavior unless the handler function returns `true` */
     onClick?: () => void | boolean;
-    target?: string;
+    target?: React.HTMLAttributeAnchorTarget;
 } | {
     onClick: () => void | boolean;
     href?: undefined;

package/esm/ContactBubble.js

@@ -2,7 +2,6 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { focusElm } from '@hugsmidjan/qj/focusElm';
 import { useDomid } from '@hugsmidjan/react/hooks';
 import getBemClass from '@hugsmidjan/react/utils/getBemClass';
-import { getPageScrollElm } from '@reykjavik/hanna-utils';
 import { getTexts } from '@reykjavik/hanna-utils/i18n';
 import { Link } from './_abstract/_Link.js';
 import { breakOnNL } from './_abstract/breakOnNL.js';
@@ -61,12 +60,11 @@ export const ContactBubble = (props) => {
             wrapperElm.dataset.show = 'true';
             return;
         }
-        const scrollElm = getPageScrollElm();
         let pending = 0;
         const checkScroll = () => {
             if (!pending) {
                 pending = requestAnimationFrame(() => {
-                    const { scrollTop, scrollHeight, clientHeight } = scrollElm;
+                    const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
                     const scrollLength = scrollHeight - clientHeight;
                     // const f = scrollLength > 600 ? 1 : (scrollLength - 200) / 600;
                     const f = 1;
@@ -78,7 +76,7 @@ export const ContactBubble = (props) => {
             }
         };
         checkScroll();
-        // Set scroll-listeners on both the ´document` and the `scrollElm`
+        // Set scroll-listeners on both the ´document` and the `document.documentElement`
         // because mobile browsers seem to handle CSS height and overflow
         // rules on <html> and <body> differently from desktop browsers.
         // Only one of these two handlers seems to trigger though,
@@ -86,10 +84,10 @@ export const ContactBubble = (props) => {
         // and even if they did, the rAF throttling prevents that from
         // becoming a problem.
         document.addEventListener('scroll', checkScroll);
-        scrollElm.addEventListener('scroll', checkScroll);
+        document.documentElement.addEventListener('scroll', checkScroll);
         return () => {
             document.removeEventListener('scroll', checkScroll);
-            scrollElm.removeEventListener('scroll', checkScroll);
+            document.documentElement.removeEventListener('scroll', checkScroll);
         };
     }, [isBrowser, alwaysShow, closeBubble]);
     useEffect(() => {

package/esm/Datepicker.d.ts

@@ -4,22 +4,45 @@ export type DatepickerProps = {
     small?: boolean;
     placeholder?: string;
     value?: Date;
+    /**
+     * Default value for "uncontrolled" mode.
+     *
+     * NOTE: Even though defaultValue and the `onChange` value are both `Date`
+     * the `<input/>` element is still `type="text"` and it's `.value` is
+     * the human-readable (parsed) date `string`.
+     *
+     * Use this incombination with the `isoMode` prop to submit ISO-8601
+     * formatted input values
+     */
+    defaultValue?: Date;
     name?: string;
     startDate?: Date;
     endDate?: Date;
     minDate?: Date;
     maxDate?: Date;
+    /**
+     * Turn this on to generate a form <input/> that contains (and submits)
+     * an ISO-date formatted string value, instead of the default "human
+     * readable" format.
+     *
+     * NOTE: This will be the default mode in v0.11.
+     */
+    isoMode?: boolean;
     localeCode?: 'is' | 'en' | 'pl';
     dateFormat?: string | Array<string>;
     isStartDate?: boolean;
     isEndDate?: boolean;
     inputRef?: RefObject<HTMLInputElement>;
-    onChange: (date?: Date) => void;
+    onChange?: (date?: Date) => void;
     datepickerExtraProps?: Record<string, unknown>;
-    /** @deprecated  use value instead.  (Will be removed in v0.11) */
+    /** @deprecated  Use `value` or `defaultValue` instead.  (Will be removed in v0.11) */
     initialDate?: Date;
 } & FormFieldWrappingProps;
-export declare const getDateDiff: (date: Date, diff: number) => Date;
+/**
+ * Dumb utility function that returns a new Date that's `dayOffset` days away
+ * from the input `date`.
+ */
+export declare const getDateDiff: (refDate: Date, dayOffset: number) => Date;
 export type DatepickerLocaleProps = {
     nextMonthAriaLabel: string;
     nextMonthButtonLabel: string;
@@ -36,5 +59,10 @@ export type DatepickerLocaleProps = {
     chooseDayAriaLabelPrefix: string;
     disabledDayAriaLabelPrefix: string;
 };
+/**
+ * A compo
+ *
+ * Internally, this component uses the [`react-datepicker`](https://reactdatepicker.com/) component.
+ */
 export declare const Datepicker: (props: DatepickerProps) => JSX.Element;
 export default Datepicker;