@reykjavik/hanna-react 0.10.171 → 0.10.173

package/AutosuggestSearch.js

@@ -94,7 +94,7 @@ const AutosuggestSearch = (props) => {
                     : emptyMessage;
                 contents = (react_1.default.createElement("div", { className: (0, hanna_utils_1.modifiedClass)('AutosuggestSearch__emptyMessage', type !== 'empty' && type) }, message));
             }
-            return (react_1.default.createElement("div", Object.assign({}, containerProps, { "aria-label": options.length ? txt.suggestionsLabel : undefined }), contents));
+            return (react_1.default.createElement("div", Object.assign({}, containerProps, { "aria-label": options.length ? txt.suggestionsLabel : undefined }, (!options.length && { role: undefined })), contents));
         }, inputProps: Object.assign({ ref: inputRef, value: inputValue, onChange: (_, { newValue, method }) => {
                 if (!inputChangeMethods.has(method)) {
                     return;

package/CHANGELOG.md

@@ -4,6 +4,21 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.173
+
+_2026-05-19_
+
+- fix: Add `role="generic"` to checkbox- and radio-group `<li/>` elments
+- `AutosuggestSearch`:
+  - fix: Suppress `role="listbox"` when there are no suggestions
+
+## 0.10.172
+
+_2026-04-30_
+
+- `Datepicker`:
+  - feat: Scroll calendar into view when opened, and back to input when closed
+
 ## 0.10.171
 
 _2026-04-02_

package/Datepicker.js

@@ -154,13 +154,16 @@ const Datepicker = (props) => {
             .concat(txts.dateFormats)
             .concat(['P', 'PP', 'PPP']);
     }, [dateFormat, txts]);
+    const wrapperRef = (0, react_1.useRef)();
     return (react_1.default.createElement(FormField_js_1.FormField, Object.assign({ extraClassName: "Datepicker", filled: filled, empty: empty }, fieldWrapperProps, { renderInput: (className, inputProps, addFocusProps) => {
-            return (react_1.default.createElement("div", Object.assign({ className: className.input, onClick: ({ target, currentTarget }) => { var _a; return target === currentTarget && ((_a = currentTarget.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus()); }, ref: inputRef &&
-                    ((elm) => {
+            return (react_1.default.createElement("div", Object.assign({ className: className.input, onClick: ({ target, currentTarget }) => { var _a; return target === currentTarget && ((_a = currentTarget.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus()); }, ref: (elm) => {
+                    wrapperRef.current = elm;
+                    if (inputRef) {
                         inputRef.current =
                             (elm === null || elm === void 0 ? void 0 : elm.querySelector('input')) || undefined;
-                        return elm;
-                    }) }, addFocusProps()),
+                    }
+                    return elm;
+                } }, addFocusProps()),
                 isoMode && react_1.default.createElement("input", { type: "hidden", name: name, value: toLocalIsoDate(value) }),
                 react_1.default.createElement(ReactDatepicker_js_1.ReactDatePicker, Object.assign({ required: inputProps.required, disabled: inputProps.disabled, readOnly: inputProps.readOnly, selected: value, name: isoMode ? undefined : name, locale: lang || i18n_1.DEFAULT_LANG, dateFormat: normalizedDateFormats, onChange: (date) => {
                         date = date || undefined;
@@ -173,7 +176,17 @@ const Datepicker = (props) => {
                     }, placeholderText: placeholder, 
                     // TODO: Implement this
                     // selectsRange
-                    minDate: minDateNormalized, maxDate: maxDate, startDate: startDate, endDate: endDate, selectsStart: isStartDate, selectsEnd: isEndDate, formatWeekDay: (weekday) => weekday.charAt(0).toUpperCase(), showYearDropdown: true, scrollableYearDropdown: true, yearDropdownItemNumber: 15, showMonthDropdown: true }, inputProps, txts, datepickerExtraProps, { autoComplete: "off" }))));
+                    minDate: minDateNormalized, maxDate: maxDate, startDate: startDate, endDate: endDate, selectsStart: isStartDate, selectsEnd: isEndDate, formatWeekDay: (weekday) => weekday.charAt(0).toUpperCase(), showYearDropdown: true, scrollableYearDropdown: true, yearDropdownItemNumber: 15, onCalendarOpen: () => {
+                        setTimeout(() => {
+                            var _a;
+                            const calElm = (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.react-datepicker');
+                            calElm === null || calElm === void 0 ? void 0 : calElm.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                        }, 100);
+                    }, onCalendarClose: () => {
+                        var _a;
+                        const inputElm = (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) || ((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input'));
+                        inputElm === null || inputElm === void 0 ? void 0 : inputElm.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                    }, showMonthDropdown: true }, inputProps, txts, datepickerExtraProps, { autoComplete: "off" }))));
         } })));
 };
 exports.Datepicker = Datepicker;

package/Multiselect.js

@@ -246,7 +246,7 @@ const Multiselect = (props) => {
                             const insertGroupSeparator = !isFiltered &&
                                 item.group !== (filteredOptions[idx - 1] || {}).group &&
                                 (idx > 0 || !!item.group);
-                            const checkbox = (react_1.default.createElement(Checkbox_js_1.default, Object.assign({ key: idx, className: (0, hanna_utils_1.modifiedClass)('Multiselect__option', activeItemIndex === idx && 'focused'), reqText: false, 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: {
+                            const checkbox = (react_1.default.createElement(Checkbox_js_1.default, Object.assign({ key: idx, className: (0, hanna_utils_1.modifiedClass)('Multiselect__option', activeItemIndex === idx && 'focused'), reqText: false, disabled: isDisabled, readOnly: readOnly, required: props.required, Wrapper: "li", role: "generic", name: name }, item, { checked: isChecked, "aria-invalid": props.invalid, label: item.label || item.value, onChange: () => handleCheckboxSelection(item), onFocus: () => setActiveItemIndex(idx), wrapperProps: {
                                     onMouseEnter: () => setActiveItemIndex(idx),
                                 } })));
                             return insertGroupSeparator ? (react_1.default.createElement(react_1.Fragment, { key: idx },

package/_abstract/_TogglerGroup.js

@@ -37,11 +37,11 @@ const TogglerGroup = (props) => {
                 onSelected && onSelected({ value, checked, option, selectedValues });
             }, disabled: isDisabled, readOnly: readOnly, 'aria-invalid': props['aria-invalid'], checked: isChecked });
         if (renderItemSubContent) {
-            return (react_1.default.createElement("li", { key: i, className: `${bem}__item` },
+            return (react_1.default.createElement("li", { key: i, className: `${bem}__item`, role: "generic" },
                 react_1.default.createElement(Toggler, Object.assign({}, togglerProps)),
                 renderItemSubContent(option, isChecked)));
         }
-        return (react_1.default.createElement(Toggler, Object.assign({ key: i, className: `${bem}__item`, Wrapper: "li" }, togglerProps)));
+        return (react_1.default.createElement(Toggler, Object.assign({ key: i, className: `${bem}__item`, Wrapper: "li", role: "generic" }, togglerProps)));
     })));
 };
 exports.TogglerGroup = TogglerGroup;

package/_abstract/_TogglerInput.js

@@ -13,7 +13,7 @@ const defaultReqText = {
 };
 // eslint-disable-next-line complexity
 const TogglerInput = (props) => {
-    const { bem, modifier, className, label, hideLabel, invalid, errorMessage, Wrapper = 'div', required, reqText, type, id, innerWrap, wrapperProps, inputProps } = props, restInputProps = tslib_1.__rest(props, ["bem", "modifier", "className", "label", "hideLabel", "invalid", "errorMessage", "Wrapper", "required", "reqText", "type", "id", "innerWrap", "wrapperProps", "inputProps"]);
+    const { bem, modifier, className, label, hideLabel, invalid, errorMessage, Wrapper = 'div', required, reqText, type, id, innerWrap, wrapperProps, inputProps, role } = props, restInputProps = tslib_1.__rest(props, ["bem", "modifier", "className", "label", "hideLabel", "invalid", "errorMessage", "Wrapper", "required", "reqText", "type", "id", "innerWrap", "wrapperProps", "inputProps", "role"]);
     const domid = (0, useDomid_js_1.useDomid)(id);
     const errorId = errorMessage && `error${domid}`;
     const reqStar = required && reqText !== false && (react_1.default.createElement("abbr", { className: `${bem}__label__reqstar`, 
@@ -28,7 +28,7 @@ const TogglerInput = (props) => {
         ' '));
     return (react_1.default.createElement(Wrapper, Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)(bem, [modifier, hideLabel && 'nolabel'], 
         // Prefer `className` over `wrapperProps.className`
-        className || (wrapperProps || {}).className) }),
+        className || (wrapperProps || {}).className), role: role }),
         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 },

package/esm/AutosuggestSearch.js

@@ -91,7 +91,7 @@ export const AutosuggestSearch = (props) => {
                     : emptyMessage;
                 contents = (React.createElement("div", { className: modifiedClass('AutosuggestSearch__emptyMessage', type !== 'empty' && type) }, message));
             }
-            return (React.createElement("div", Object.assign({}, containerProps, { "aria-label": options.length ? txt.suggestionsLabel : undefined }), contents));
+            return (React.createElement("div", Object.assign({}, containerProps, { "aria-label": options.length ? txt.suggestionsLabel : undefined }, (!options.length && { role: undefined })), contents));
         }, inputProps: Object.assign({ ref: inputRef, value: inputValue, onChange: (_, { newValue, method }) => {
                 if (!inputChangeMethods.has(method)) {
                     return;

package/esm/Datepicker.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useRef } from 'react';
 import { DEFAULT_LANG, getTexts, } from '@reykjavik/hanna-utils/i18n';
 // For more info on localization see: https://stackoverflow.com/questions/54399084/change-locale-in-react-datepicker/58306958#58306958
 import is from 'date-fns/locale/is/index.js';
@@ -149,13 +149,16 @@ export const Datepicker = (props) => {
             .concat(txts.dateFormats)
             .concat(['P', 'PP', 'PPP']);
     }, [dateFormat, txts]);
+    const wrapperRef = useRef();
     return (React.createElement(FormField, Object.assign({ extraClassName: "Datepicker", filled: filled, empty: empty }, fieldWrapperProps, { renderInput: (className, inputProps, addFocusProps) => {
-            return (React.createElement("div", Object.assign({ className: className.input, onClick: ({ target, currentTarget }) => { var _a; return target === currentTarget && ((_a = currentTarget.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus()); }, ref: inputRef &&
-                    ((elm) => {
+            return (React.createElement("div", Object.assign({ className: className.input, onClick: ({ target, currentTarget }) => { var _a; return target === currentTarget && ((_a = currentTarget.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus()); }, ref: (elm) => {
+                    wrapperRef.current = elm;
+                    if (inputRef) {
                         inputRef.current =
                             (elm === null || elm === void 0 ? void 0 : elm.querySelector('input')) || undefined;
-                        return elm;
-                    }) }, addFocusProps()),
+                    }
+                    return elm;
+                } }, addFocusProps()),
                 isoMode && React.createElement("input", { type: "hidden", name: name, value: toLocalIsoDate(value) }),
                 React.createElement(ReactDatePicker, Object.assign({ required: inputProps.required, disabled: inputProps.disabled, readOnly: inputProps.readOnly, selected: value, name: isoMode ? undefined : name, locale: lang || DEFAULT_LANG, dateFormat: normalizedDateFormats, onChange: (date) => {
                         date = date || undefined;
@@ -168,7 +171,17 @@ export const Datepicker = (props) => {
                     }, placeholderText: placeholder, 
                     // TODO: Implement this
                     // selectsRange
-                    minDate: minDateNormalized, maxDate: maxDate, startDate: startDate, endDate: endDate, selectsStart: isStartDate, selectsEnd: isEndDate, formatWeekDay: (weekday) => weekday.charAt(0).toUpperCase(), showYearDropdown: true, scrollableYearDropdown: true, yearDropdownItemNumber: 15, showMonthDropdown: true }, inputProps, txts, datepickerExtraProps, { autoComplete: "off" }))));
+                    minDate: minDateNormalized, maxDate: maxDate, startDate: startDate, endDate: endDate, selectsStart: isStartDate, selectsEnd: isEndDate, formatWeekDay: (weekday) => weekday.charAt(0).toUpperCase(), showYearDropdown: true, scrollableYearDropdown: true, yearDropdownItemNumber: 15, onCalendarOpen: () => {
+                        setTimeout(() => {
+                            var _a;
+                            const calElm = (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.react-datepicker');
+                            calElm === null || calElm === void 0 ? void 0 : calElm.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                        }, 100);
+                    }, onCalendarClose: () => {
+                        var _a;
+                        const inputElm = (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) || ((_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input'));
+                        inputElm === null || inputElm === void 0 ? void 0 : inputElm.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                    }, showMonthDropdown: true }, inputProps, txts, datepickerExtraProps, { autoComplete: "off" }))));
         } })));
 };
 export default Datepicker;

package/esm/Multiselect.js

@@ -242,7 +242,7 @@ export const Multiselect = (props) => {
                             const insertGroupSeparator = !isFiltered &&
                                 item.group !== (filteredOptions[idx - 1] || {}).group &&
                                 (idx > 0 || !!item.group);
-                            const checkbox = (React.createElement(Checkbox, Object.assign({ key: idx, className: modifiedClass('Multiselect__option', activeItemIndex === idx && 'focused'), reqText: false, 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: {
+                            const checkbox = (React.createElement(Checkbox, Object.assign({ key: idx, className: modifiedClass('Multiselect__option', activeItemIndex === idx && 'focused'), reqText: false, disabled: isDisabled, readOnly: readOnly, required: props.required, Wrapper: "li", role: "generic", name: name }, item, { checked: isChecked, "aria-invalid": props.invalid, label: item.label || item.value, onChange: () => handleCheckboxSelection(item), onFocus: () => setActiveItemIndex(idx), wrapperProps: {
                                     onMouseEnter: () => setActiveItemIndex(idx),
                                 } })));
                             return insertGroupSeparator ? (React.createElement(Fragment, { key: idx },

package/esm/_abstract/_TogglerGroup.js

@@ -33,10 +33,10 @@ export const TogglerGroup = (props) => {
                 onSelected && onSelected({ value, checked, option, selectedValues });
             }, disabled: isDisabled, readOnly: readOnly, 'aria-invalid': props['aria-invalid'], checked: isChecked });
         if (renderItemSubContent) {
-            return (React.createElement("li", { key: i, className: `${bem}__item` },
+            return (React.createElement("li", { key: i, className: `${bem}__item`, role: "generic" },
                 React.createElement(Toggler, Object.assign({}, togglerProps)),
                 renderItemSubContent(option, isChecked)));
         }
-        return (React.createElement(Toggler, Object.assign({ key: i, className: `${bem}__item`, Wrapper: "li" }, togglerProps)));
+        return (React.createElement(Toggler, Object.assign({ key: i, className: `${bem}__item`, Wrapper: "li", role: "generic" }, togglerProps)));
     })));
 };

package/esm/_abstract/_TogglerInput.js

@@ -10,7 +10,7 @@ const defaultReqText = {
 };
 // eslint-disable-next-line complexity
 export const TogglerInput = (props) => {
-    const { bem, modifier, className, label, hideLabel, invalid, errorMessage, Wrapper = 'div', required, reqText, type, id, innerWrap, wrapperProps, inputProps } = props, restInputProps = __rest(props, ["bem", "modifier", "className", "label", "hideLabel", "invalid", "errorMessage", "Wrapper", "required", "reqText", "type", "id", "innerWrap", "wrapperProps", "inputProps"]);
+    const { bem, modifier, className, label, hideLabel, invalid, errorMessage, Wrapper = 'div', required, reqText, type, id, innerWrap, wrapperProps, inputProps, role } = props, restInputProps = __rest(props, ["bem", "modifier", "className", "label", "hideLabel", "invalid", "errorMessage", "Wrapper", "required", "reqText", "type", "id", "innerWrap", "wrapperProps", "inputProps", "role"]);
     const domid = useDomid(id);
     const errorId = errorMessage && `error${domid}`;
     const reqStar = required && reqText !== false && (React.createElement("abbr", { className: `${bem}__label__reqstar`, 
@@ -25,7 +25,7 @@ export const TogglerInput = (props) => {
         ' '));
     return (React.createElement(Wrapper, Object.assign({}, wrapperProps, { className: modifiedClass(bem, [modifier, hideLabel && 'nolabel'], 
         // Prefer `className` over `wrapperProps.className`
-        className || (wrapperProps || {}).className) }),
+        className || (wrapperProps || {}).className), role: role }),
         React.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.createElement("label", { className: `${bem}__label`, htmlFor: domid },

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.171",
+	"version": "0.10.173",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",