@reykjavik/hanna-react 0.10.92 → 0.10.93

package/esm/Datepicker.js

@@ -6,11 +6,16 @@ import is from 'date-fns/locale/is/index.js';
 import pl from 'date-fns/locale/pl/index.js';
 import { ReactDatePicker, registerLocale, } from './_mixed_export_resolution_/ReactDatepicker.js'; // Docs: https://reactdatepicker.com/
 import { FormField } from './FormField.js';
+import { useMixedControlState } from './utils.js';
 registerLocale('is', is);
 registerLocale('pl', pl);
-export const getDateDiff = (date, diff) => {
-    const newDate = new Date(date);
-    newDate.setDate(newDate.getDate() + diff);
+/**
+ * Dumb utility function that returns a new Date that's `dayOffset` days away
+ * from the input `date`.
+ */
+export const getDateDiff = (refDate, dayOffset) => {
+    const newDate = new Date(refDate);
+    newDate.setDate(newDate.getDate() + dayOffset);
     return newDate;
 };
 const i18n = {
@@ -47,8 +52,19 @@ const i18n = {
         disabledDayAriaLabelPrefix: 'Data niedostępna',
     },
 };
+/**
+ * A compo
+ *
+ * Internally, this component uses the [`react-datepicker`](https://reactdatepicker.com/) component.
+ */
 export const Datepicker = (props) => {
-    const { className, id, label, hideLabel, assistText, disabled, readOnly, invalid, errorMessage, required, reqText, placeholder, small, localeCode = 'is', dateFormat = 'd.M.yyyy', initialDate, value = initialDate, name, startDate, endDate, minDate, maxDate, isStartDate = false, isEndDate = false, onChange, datepickerExtraProps, ssr, inputRef, } = props;
+    const { className, id, label, hideLabel, assistText, disabled, readOnly, invalid, errorMessage, required, reqText, placeholder, small, localeCode = 'is', dateFormat = 'd.M.yyyy', name, startDate, endDate, minDate, maxDate, isStartDate = false, isEndDate = false, onChange, datepickerExtraProps, ssr, inputRef, isoMode, } = props;
+    const [value, setValue] = useMixedControlState.raw(props.value || props.initialDate, props.defaultValue, 'value');
+    /*
+      TODO: Revert to this simpler pattern once we hit v0.11
+      and `props.initialDate` is removed:
+    */
+    // const [value, setValue] = useMixedControlState(props, 'value');
     const domid = useDomid(id);
     const txts = i18n[localeCode] || {};
     const filled = !!value;
@@ -60,7 +76,8 @@ export const Datepicker = (props) => {
                             (elm === null || elm === void 0 ? void 0 : elm.querySelector('input')) || undefined;
                         return elm;
                     }) }, addFocusProps()),
-                React.createElement(ReactDatePicker, Object.assign({ id: domid, required: inputProps.required, disabled: inputProps.disabled, readOnly: inputProps.readOnly, selected: value, name: name, locale: localeCode, dateFormat: 
+                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: localeCode, dateFormat: 
                     // NOTE: Force all dateFormat values into Array<string> to temporarily work around
                     // a bug in the current version of react-datepicker where invalid **string** values
                     // are re-parsed with `new Date()`, causing surprising (weird) false positives
@@ -71,7 +88,9 @@ export const Datepicker = (props) => {
                     typeof dateFormat === 'string'
                         ? [dateFormat]
                         : dateFormat.slice(0).reverse(), onChange: (date) => {
-                        onChange(date || undefined);
+                        date = date || undefined;
+                        setValue(date);
+                        onChange && onChange(date);
                         const inputElm = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
                         if (inputElm) {
                             inputElm.dispatchEvent(new Event('change', { bubbles: true }));

package/esm/FormField.d.ts

@@ -24,6 +24,10 @@ type FocusEvents = {
     onBlur?: (e: any) => void;
 };
 type FocusPropMaker = <P extends FocusEvents>(ownProps?: P) => P & Required<FocusEvents>;
+/**
+ * Mixin base props type for components using the `FormField` to contain
+ * simple, singular input widgets. E.g. `TextInput`, `Seleccbox`, etc.
+ */
 export type FormFieldWrappingProps = {
     /** Container className - alongside "FormField" */
     className?: string;
@@ -49,14 +53,19 @@ export type FormFieldWrappingProps = {
     wrapperRef?: RefObject<HTMLElement>;
     ssr?: SSRSupport;
 };
+/**
+ * Mixin base props type for components using `FormField` to contain
+ * more complex multi-element, grouped choices, that require a Heading
+ * E.g. `RadioGroup`, `CheckboxGroup`, etc.
+ */
 export type FormFieldGroupWrappingProps = FormFieldWrappingProps & {
     LabelTag?: 'h3' | 'h4' | 'h5';
 };
-export type FormFieldProps = FormFieldGroupWrappingProps & {
+type FormFieldProps = FormFieldGroupWrappingProps & {
     /** Container className - alongside "FormField" */
     className: string;
     small?: boolean;
-    group?: boolean;
+    group?: boolean | 'inputlike';
     empty?: boolean;
     filled?: boolean;
     renderInput(className: InputClassNames, inputProps: FormFieldInputProps, addFocusProps: FocusPropMaker, isBrowser?: boolean): JSX.Element;

package/esm/FormField.js

@@ -48,12 +48,12 @@ export const FormField = (props) => {
         }
         return focusProps;
     }, []);
-    const errorId = errorMessage ? 'error:' + domid : undefined;
-    const assistTextId = assistText ? 'assist:' + domid : undefined;
-    const labelId = LabelTag ? 'label:' + domid : undefined;
+    const errorId = errorMessage ? `error:${domid}` : undefined;
+    const assistTextId = assistText ? `assist:${domid}` : undefined;
+    const labelId = LabelTag ? `label:${domid}` : undefined;
     const reqStar = required && reqText !== false && (React.createElement("abbr", { className: "FormField__label__reqstar", 
         // TODO: add mo-better i18n thinking
-        title: (reqText || 'Þarf að fylla út') + ': ' }, "*"));
+        title: `${reqText || 'Þarf að fylla út'}: ` }, "*"));
     const inputProps = {
         id: domid,
         disabled: disabled,
@@ -73,7 +73,7 @@ export const FormField = (props) => {
             isBrowser && filled && 'filled',
             isBrowser && focused && 'focused',
         ], className), ref: props.wrapperRef },
-        LabelTag ? (React.createElement(LabelTag, { className: "FormField__label", id: labelId },
+        LabelTag ? (React.createElement(LabelTag, { className: "FormField__label", "data-inputlabel": group === 'inputlike' || undefined, id: labelId },
             ' ',
             reqStar,
             " ",

package/esm/MainMenu/_PrimaryPanel.d.ts

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+import React, { RefObject } from 'react';
 export type PrimaryPanelI18n = {
     backToMenu: string;
     backToMenuLong?: string;
@@ -9,7 +9,7 @@ export type MegaMenuItem = {
     href: string;
     lang?: string;
     current?: boolean;
-    target?: string;
+    target?: React.HTMLAttributeAnchorTarget;
 };
 export type MegaMenuPanel = {
     title: string;

package/esm/MainMenu.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Cleanup } from '@reykjavik/hanna-utils';
 import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
 import { AuxilaryPanelIllustration, AuxiliaryPanelProps } from './MainMenu/_Auxiliary.js';
@@ -34,7 +35,7 @@ export type MainMenuItem = {
      */
     onClick?: (index: number, item: MainMenuItem) => void | boolean;
     controlsId?: string;
-    target?: JSX.IntrinsicElements['a']['target'];
+    target?: React.HTMLAttributeAnchorTarget;
 };
 export type MainMenuSeparator = '---';
 export type MainMenuItemList = Array<MainMenuItem | MainMenuSeparator>;

package/esm/MainMenu.js

@@ -2,7 +2,6 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { focusElm } from '@hugsmidjan/qj/focusElm';
 import useShortState from '@hugsmidjan/react/hooks/useShortState';
 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 { AuxiliaryPanel, } from './MainMenu/_Auxiliary.js';
@@ -94,20 +93,20 @@ export const MainMenu = (props) => {
     const [laggyActivePanel, setLaggyActivePanel] = useShortState();
     const setActivePanel = useMemo(() => isBrowser
         ? (newActive, setFocus = true) => {
-            const htmlElmDataset = document.documentElement.dataset;
+            const htmlElm = document.documentElement;
+            const htmlElmDataset = htmlElm.dataset;
             // const menuElm = menuElmRef.current as HTMLElement;
             _setActivePanel((activePanel) => {
-                const scrollElm = getPageScrollElm();
                 if (!newActive) {
                     activePanel && setLaggyActivePanel(activePanel, 1000);
-                    scrollElm.scrollTop = parseInt(htmlElmDataset.scrollTop || '') || 0;
+                    htmlElm.scrollTop = parseInt(htmlElmDataset.scrollTop || '') || 0;
                     delete htmlElmDataset.scrollTop;
                     delete htmlElmDataset.megaPanelActive;
                 }
                 else {
                     setLaggyActivePanel(undefined, 0);
-                    htmlElmDataset.scrollTop = String(scrollElm.scrollTop);
-                    scrollElm.scrollTop = 0;
+                    htmlElmDataset.scrollTop = String(htmlElm.scrollTop);
+                    htmlElm.scrollTop = 0;
                     htmlElmDataset.megaPanelActive = '';
                 }
                 if (setFocus) {

package/esm/Multiselect/_Multiselect.search.d.ts

@@ -0,0 +1,19 @@
+import { TogglerGroupOptions } from '../_abstract/_TogglerGroup.js';
+import { TogglerGroupFieldOption } from '../_abstract/_TogglerGroupField.js';
+export declare const _weights: {
+    WHOLE_WORD: number;
+    STARTS_WITH: number;
+    CONTAINS: number;
+    VALUE_WEIGHT: number;
+    wordWeight: (wordIndex: number) => number;
+};
+export type SearchScoringfn = (
+/** The Multiselect item object to calculate search score for */
+item: TogglerGroupFieldOption<string>, 
+/** Trimmed list of `toLowerCase`d query words */
+queryWords: Array<string>, 
+/** The raw, untouched search query as typed by the user */
+rawQuery: string) => number;
+export declare const defaultSearchScoring: SearchScoringfn;
+/** Returns a normalized, filtered list of options */
+export declare const filterItems: (options: TogglerGroupOptions<string>, searchQuery: string, searchScoringFn?: SearchScoringfn) => TogglerGroupOptions<string>;

package/esm/Multiselect/_Multiselect.search.js

@@ -0,0 +1,75 @@
+const WHOLE_WORD = 10000;
+const STARTS_WITH = 100;
+const CONTAINS = 1;
+const VALUE_WEIGHT = 1 / 10;
+/** Scoring weight modifier based on a word's positional index within the value */
+const wordWeight = (wordIndex) => 10 / (10 + wordIndex);
+// Exported for testing purposes
+export const _weights = {
+    WHOLE_WORD,
+    STARTS_WITH,
+    CONTAINS,
+    VALUE_WEIGHT,
+    wordWeight,
+};
+/**
+ * Calculates a score based on how well an item string (either label or value)
+ * matches a given list of query words.
+ * Splits the item string into words and scores each word.
+ * Favors full matches and matches at the start of the word.
+ * Weighs earlier words higher than words near the end.
+ *
+ * Limitation: Does currently not give extra points when query words
+ * appear in the correct order in the item string.
+ */
+const calcScore = (itemString, queryWords) => {
+    let score = 0;
+    queryWords.forEach((queryWord) => {
+        itemString.split(/\s+/).forEach((word, wi) => {
+            let wordScore = 0;
+            if (word === queryWord) {
+                wordScore += WHOLE_WORD;
+            }
+            else {
+                const pos = word.indexOf(queryWord);
+                if (pos === 0) {
+                    wordScore += STARTS_WITH;
+                }
+                else if (pos > 0) {
+                    wordScore += CONTAINS;
+                }
+            }
+            score += wordScore * wordWeight(wi);
+        });
+    });
+    return score;
+};
+export const defaultSearchScoring = (item, queryWords) => {
+    var _a;
+    if (!item.value) {
+        return 0;
+    }
+    const value = item.value.toLowerCase().trim();
+    const label = ((_a = item.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().trim()) || value;
+    let score = calcScore(label, queryWords);
+    if (!score) {
+        score = VALUE_WEIGHT * calcScore(value, queryWords);
+    }
+    return score;
+};
+// ---------------------------------------------------------------------------
+/** Returns a normalized, filtered list of options */
+export const filterItems = (options, searchQuery, searchScoringFn = defaultSearchScoring) => {
+    if (!searchQuery.trim()) {
+        return [...options];
+    }
+    const queryWords = searchQuery.toLowerCase().trim().split(/\s+/);
+    return options
+        .map((item) => ({
+        item,
+        score: searchScoringFn(item, queryWords, searchQuery),
+    }))
+        .filter(({ score }) => score > 0)
+        .sort((a, b) => (a.score === b.score ? 0 : a.score < b.score ? 1 : -1))
+        .map(({ item }) => item);
+};

package/esm/Multiselect.d.ts

@@ -0,0 +1,64 @@
+import { TogglerGroupFieldProps } from './_abstract/_TogglerGroupField.js';
+import { SearchScoringfn } from './Multiselect/_Multiselect.search.js';
+export type MultiselectI18n = {
+    search: string;
+    buttonShow: string;
+    currentValues: string;
+    noneFoundMsg: string;
+};
+export type MultiselectProps = TogglerGroupFieldProps<string> & {
+    value?: Array<string>;
+    defaultValue?: Array<string>;
+    placeholder?: string;
+    small?: boolean;
+    /**
+     * Prevent the selected items from wrapping into multiple lines.
+     * Use this option when vertical space is limited.
+     */
+    nowrap?: boolean;
+    /**
+     * Custom function to calculate a search score for a given option item.
+     * Higher scores mean better matches.
+     *
+     * A score of zero (or less) means the item is not a valid match.
+     */
+    searchScoring?: SearchScoringfn;
+    /**
+     * Force display the current values at the top of the dropdown,
+     * even when the total options are fewer than
+     * `Multiselect.meta.summaryLimit`.
+     *
+     * NOTE: Using this option is generally not recommended.
+     */
+    forceSummary?: boolean;
+    /**
+     * Force the options to be searchable, even when they're
+     * fewer than `Multiselect.meta.searchableLimit`.
+     *
+     * NOTE: Using this option is generally not recommended.
+     */
+    forceSearchable?: boolean;
+    texts?: MultiselectI18n;
+    lang?: string;
+};
+export type MultiSelectOption = Exclude<MultiselectProps['options'][number], string>;
+export declare const Multiselect: {
+    (props: MultiselectProps): JSX.Element;
+    /** Configuration constants for the Multiselect components */
+    meta: {
+        /**
+         * 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: number;
+        /**
+         * 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: number;
+    };
+};

package/esm/Multiselect.js

@@ -0,0 +1,231 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import domId from '@hugsmidjan/qj/domid';
+import { useDomid, useOnClickOutside } from '@hugsmidjan/react/hooks';
+import getBemClass from '@hugsmidjan/react/utils/getBemClass';
+import { notNully } from '@reykjavik/hanna-utils';
+import { getTexts } from '@reykjavik/hanna-utils/i18n';
+import { FocusTrap } from './_abstract/_FocusTrap.js';
+import { filterItems } from './Multiselect/_Multiselect.search.js';
+import Checkbox from './Checkbox.js';
+import FormField from './FormField.js';
+import TagPill from './TagPill.js';
+import { useMixedControlState } from './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',
+    },
+};
+export const Multiselect = (props) => {
+    const { onSelected, options: _options, disabled: _disabled, readOnly } = props;
+    const disabled = _disabled === true;
+    const disableds = !disabled && _disabled;
+    const name = useDomid(props.name);
+    const [values, setValues] = useMixedControlState(props, 'value', []);
+    const filled = values.length > 0;
+    const empty = !filled && !props.placeholder;
+    const placeholderText = !values.length ? props.placeholder : undefined;
+    const texts = getTexts(props, defaultTexts);
+    const inputRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const [activeItemIndex, setActiveItemIndex] = useState(-1);
+    const [searchQuery, setSearchQuery] = useState('');
+    const [isOpen, setIsOpen] = 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;
+        });
+    };
+    useOnClickOutside(wrapperRef, () => toggleOpen(false));
+    const options = 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 = useMemo(() => filterItems(options, searchQuery, props.searchScoring), [searchQuery, options, props.searchScoring]);
+    const handleCheckboxSelection = 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
+    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
+    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);
+        };
+    }, []);
+    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.createElement(FormField, { className: getBemClass('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.createElement("div", Object.assign({ className: getBemClass('Multiselect__input', [isOpen && 'open'], className.input) }, addFocusProps(), { "data-sprinkled": isBrowser, ref: wrapperRef }),
+                !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, 
+                    // 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, 
+                    // Seems like an innocent hack for visible "placeholder" value.
+                    // For scren-readers aria-label should take precedence.
+                    ref: inputRef }, placeholderText || ' ')),
+                React.createElement("div", { className: "Multiselect__choices", tabIndex: -1 },
+                    isBrowser && showCurrentValues && (React.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(notNully)
+                        .map((item, idx) => (React.createElement(TagPill, Object.assign({ key: idx, large: true, label: item.label || item.value }, (isOpen && !readOnly
+                        ? {
+                            removable: true,
+                            onRemove: () => {
+                                handleCheckboxSelection(item);
+                            },
+                        }
+                        : { removable: false }))))))),
+                    React.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.createElement(Checkbox, Object.assign({ key: idx, className: getBemClass('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.createElement("li", { className: "Multiselect__noresults" }, texts.noneFoundMsg)) : undefined,
+                        React.createElement(FocusTrap, { Tag: "li" })))));
+        } }));
+};
+/** Configuration constants for the Multiselect components */
+Multiselect.meta = metaData;

package/esm/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/esm/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/esm/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/esm/_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/esm/_abstract/_CardList.js

@@ -2,10 +2,10 @@ import React from 'react';
 import { Button } from './_Button.js';
 import { Image } from './_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.createElement(React.Fragment, null,
-        React.createElement(Button, { bem: cardClass, href: href },
+        React.createElement(Button, { bem: cardClass, href: href, target: target },
             ' ',
             React.createElement(Image, Object.assign({ className: `${bem}__image` }, image, { placeholder: imgPlaceholder })),
             React.createElement("span", { className: `${cardClass}__title` }, title),