@reykjavik/hanna-react 0.10.156 → 0.10.158

package/CHANGELOG.md

@@ -4,18 +4,30 @@
 
 - ... <!-- Add new lines here. -->
 
-## 0.10.156
+## 0.10.158
 
-_2025-06-23_
+_2025-09-16_
+
+- `Multiselect`
+  - feat: Add prop `onDropdown` prop
+  - fix: Scope "global" keyboard event listener to the component's element
+
+## 0.10.157
+
+_2025-09-16_
 
-- feat: Allow `MainMenu2` items to be `null` or `false` also
+- `Multiselect`
+  - fix: Sync `.checked` prop of keyboard-toggled `input`s with visual state
+- `Selectbox`:
+  - fix: Remove stray `modifier` prop from `SelectboxProps`
+- docs: Add JSDoc comments for `FormfieldProps.renderInput` parameters
 
-## 0.10.155
+## 0.10.155 – 0.10.156
 
 _2025-06-23_
 
-- feat: Allow `MainMenu2` items to be `undefined` for easier conditional item
-  array population
+- feat: Allow `MainMenu2` items to be `undefined`, `null` or `false` for
+  easier conditional item array population
 
 ## 0.10.154
 

package/FormField.d.ts

@@ -5,7 +5,7 @@ import { SSRSupportProps, WrapperElmProps } from './utils.js';
 type InputClassNames = {
     /** Basic/raw FormField BEM name */
     bem: string;
-    /** Standard name for "<input/>"-styled controls */
+    /** Standard name for "<input/>"-styled controls or container elements */
     input: string;
     /** Standard name for radio/checkbox group conotrols */
     options: string;
@@ -77,9 +77,30 @@ type FormFieldProps = FormFieldGroupWrappingProps & {
     group?: boolean | 'inputlike';
     empty?: boolean;
     filled?: boolean;
-    renderInput(className: InputClassNames, inputProps: FormFieldInputProps & {
+    renderInput(
+    /**
+     * Object with standard classNames for various input-related elements
+     */
+    className: InputClassNames, 
+    /**
+     * The input's managed props, including `id`, a bunch of `aria-*` attributes,
+     * `disabled`, `readOnly`, and `required`.
+     */
+    inputProps: FormFieldInputProps & {
         id: string;
-    }, addFocusProps: FocusPropMaker, isBrowser?: boolean): JSX.Element;
+    }, 
+    /**
+     * Function that generates `onFocus` and `onBlur` event handlers for the
+     * `___input` element, capturing bubbled `FocusEvent`s and emulating
+     * `onFocusOut` and `onFocusIn` behavior. This is useful for multi-input
+     * controls.
+     */
+    addFocusProps: FocusPropMaker, 
+    /**
+     * Sugar flag indicating whether the component is being rendered in a browser
+     * environment or not.
+     */
+    isBrowser?: boolean): JSX.Element;
 };
 export declare const FormField: (props: FormFieldProps) => JSX.Element;
 export default FormField;

package/Multiselect.d.ts

@@ -55,6 +55,8 @@ export type MultiselectProps = TogglerGroupFieldProps<string, {
     forceSearchable?: boolean;
     texts?: MultiselectI18n;
     lang?: HannaLang;
+    /** Fires whenever the dropdown menu is opened or closed */
+    onDropdown?: (isOpen: boolean) => void;
 };
 export declare const Multiselect: {
     (props: MultiselectProps): JSX.Element;

package/Multiselect.js

@@ -58,7 +58,7 @@ const defaultTexts = {
     },
 };
 const Multiselect = (props) => {
-    const { onSelected, options: _options, disabled: _disabled, readOnly } = props;
+    const { onSelected, onDropdown, options: _options, disabled: _disabled, readOnly, } = props;
     const disabled = _disabled === true;
     const disableds = !disabled && _disabled;
     const name = (0, useDomid_js_1.useDomid)(props.name);
@@ -80,6 +80,9 @@ const Multiselect = (props) => {
                 setSearchQuery('');
                 setActiveItemIndex(-1);
             }
+            if (onDropdown && newIsOpen !== isOpen) {
+                onDropdown(newIsOpen);
+            }
             return newIsOpen;
         });
     };
@@ -131,48 +134,53 @@ const Multiselect = (props) => {
             toggleOpen(activeItemIndex > -1 ? true : !isOpen);
         }
     };
-    // When the dropdown is open, add keydown handlers
-    (0, react_1.useEffect)(() => {
-        if (!isOpen) {
+    const handleWrapperKeyDown = (e) => {
+        var _a;
+        if (!isOpen || !((_a = inputWrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
             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);
+        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;
             }
-            else if (e.key === 'Escape') {
+            const focusInRange = activeItemIndex >= 0 && activeItemIndex < filteredOptions.length;
+            if (focusInRange) {
                 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);
-                    }
+                const selItem = filteredOptions[activeItemIndex];
+                if (selItem) {
+                    // Manually toggle the checkbox, to ensure that uncontrolled
+                    // components (e.g. screen readers) are in sync with the visual state.
+                    let input;
+                    e.currentTarget
+                        .querySelectorAll(`input[type="checkbox"]`)
+                        .forEach((elm) => {
+                        if (elm.value === selItem.value) {
+                            input = elm;
+                        }
+                    });
+                    input.checked = !input.checked;
+                    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 = inputWrapperRef.current;
@@ -200,7 +208,7 @@ const Multiselect = (props) => {
     }, [activeItemIndex]);
     return (react_1.default.createElement(FormField_js_1.default, Object.assign({ extraClassName: (0, hanna_utils_1.modifiedClass)('Multiselect', props.nowrap && 'nowrap'), group: "inputlike", filled: filled, empty: empty }, (0, FormField_js_1.getFormFieldWrapperProps)(props), { renderInput: (className, inputProps, addFocusProps, isBrowser) => {
             const { id } = inputProps;
-            return (react_1.default.createElement("div", Object.assign({ className: (0, hanna_utils_1.modifiedClass)('Multiselect__input', [isOpen && 'open'], className.input) }, addFocusProps(), { "data-sprinkled": isBrowser, ref: inputWrapperRef }),
+            return (react_1.default.createElement("div", Object.assign({ className: (0, hanna_utils_1.modifiedClass)('Multiselect__input', [isOpen && 'open'], className.input) }, addFocusProps(), { "data-sprinkled": isBrowser, ref: inputWrapperRef, onKeyDown: handleWrapperKeyDown }),
                 !isBrowser ? null : isSearchable ? (react_1.default.createElement("input", { className: "Multiselect__search", id: `toggler:${id}`, "aria-label": texts.search, "aria-controls": id, "data-expanded": isOpen || undefined, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onClick: () => toggleOpen(), value: searchQuery, 
                     // onFocus={handleInputFocus}
                     placeholder: placeholderText, disabled: disabled, ref: inputRef })) : (react_1.default.createElement("button", { className: "Multiselect__toggler", id: `toggler:${id}`, type: "button", "aria-label": texts.buttonShow, "aria-controls": id, "aria-expanded": isOpen, onClick: () => toggleOpen(), disabled: disabled, 

package/Selectbox.d.ts

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

package/esm/FormField.d.ts

@@ -5,7 +5,7 @@ import { SSRSupportProps, WrapperElmProps } from './utils.js';
 type InputClassNames = {
     /** Basic/raw FormField BEM name */
     bem: string;
-    /** Standard name for "<input/>"-styled controls */
+    /** Standard name for "<input/>"-styled controls or container elements */
     input: string;
     /** Standard name for radio/checkbox group conotrols */
     options: string;
@@ -77,9 +77,30 @@ type FormFieldProps = FormFieldGroupWrappingProps & {
     group?: boolean | 'inputlike';
     empty?: boolean;
     filled?: boolean;
-    renderInput(className: InputClassNames, inputProps: FormFieldInputProps & {
+    renderInput(
+    /**
+     * Object with standard classNames for various input-related elements
+     */
+    className: InputClassNames, 
+    /**
+     * The input's managed props, including `id`, a bunch of `aria-*` attributes,
+     * `disabled`, `readOnly`, and `required`.
+     */
+    inputProps: FormFieldInputProps & {
         id: string;
-    }, addFocusProps: FocusPropMaker, isBrowser?: boolean): JSX.Element;
+    }, 
+    /**
+     * Function that generates `onFocus` and `onBlur` event handlers for the
+     * `___input` element, capturing bubbled `FocusEvent`s and emulating
+     * `onFocusOut` and `onFocusIn` behavior. This is useful for multi-input
+     * controls.
+     */
+    addFocusProps: FocusPropMaker, 
+    /**
+     * Sugar flag indicating whether the component is being rendered in a browser
+     * environment or not.
+     */
+    isBrowser?: boolean): JSX.Element;
 };
 export declare const FormField: (props: FormFieldProps) => JSX.Element;
 export default FormField;

package/esm/Multiselect.d.ts

@@ -55,6 +55,8 @@ export type MultiselectProps = TogglerGroupFieldProps<string, {
     forceSearchable?: boolean;
     texts?: MultiselectI18n;
     lang?: HannaLang;
+    /** Fires whenever the dropdown menu is opened or closed */
+    onDropdown?: (isOpen: boolean) => void;
 };
 export declare const Multiselect: {
     (props: MultiselectProps): JSX.Element;

package/esm/Multiselect.js

@@ -54,7 +54,7 @@ const defaultTexts = {
     },
 };
 export const Multiselect = (props) => {
-    const { onSelected, options: _options, disabled: _disabled, readOnly } = props;
+    const { onSelected, onDropdown, options: _options, disabled: _disabled, readOnly, } = props;
     const disabled = _disabled === true;
     const disableds = !disabled && _disabled;
     const name = useDomid(props.name);
@@ -76,6 +76,9 @@ export const Multiselect = (props) => {
                 setSearchQuery('');
                 setActiveItemIndex(-1);
             }
+            if (onDropdown && newIsOpen !== isOpen) {
+                onDropdown(newIsOpen);
+            }
             return newIsOpen;
         });
     };
@@ -127,48 +130,53 @@ export const Multiselect = (props) => {
             toggleOpen(activeItemIndex > -1 ? true : !isOpen);
         }
     };
-    // When the dropdown is open, add keydown handlers
-    useEffect(() => {
-        if (!isOpen) {
+    const handleWrapperKeyDown = (e) => {
+        var _a;
+        if (!isOpen || !((_a = inputWrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
             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);
+        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;
             }
-            else if (e.key === 'Escape') {
+            const focusInRange = activeItemIndex >= 0 && activeItemIndex < filteredOptions.length;
+            if (focusInRange) {
                 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);
-                    }
+                const selItem = filteredOptions[activeItemIndex];
+                if (selItem) {
+                    // Manually toggle the checkbox, to ensure that uncontrolled
+                    // components (e.g. screen readers) are in sync with the visual state.
+                    let input;
+                    e.currentTarget
+                        .querySelectorAll(`input[type="checkbox"]`)
+                        .forEach((elm) => {
+                        if (elm.value === selItem.value) {
+                            input = elm;
+                        }
+                    });
+                    input.checked = !input.checked;
+                    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 = inputWrapperRef.current;
@@ -196,7 +204,7 @@ export const Multiselect = (props) => {
     }, [activeItemIndex]);
     return (React.createElement(FormField, Object.assign({ extraClassName: modifiedClass('Multiselect', props.nowrap && 'nowrap'), group: "inputlike", filled: filled, empty: empty }, getFormFieldWrapperProps(props), { renderInput: (className, inputProps, addFocusProps, isBrowser) => {
             const { id } = inputProps;
-            return (React.createElement("div", Object.assign({ className: modifiedClass('Multiselect__input', [isOpen && 'open'], className.input) }, addFocusProps(), { "data-sprinkled": isBrowser, ref: inputWrapperRef }),
+            return (React.createElement("div", Object.assign({ className: modifiedClass('Multiselect__input', [isOpen && 'open'], className.input) }, addFocusProps(), { "data-sprinkled": isBrowser, ref: inputWrapperRef, onKeyDown: handleWrapperKeyDown }),
                 !isBrowser ? null : isSearchable ? (React.createElement("input", { className: "Multiselect__search", id: `toggler:${id}`, "aria-label": texts.search, "aria-controls": id, "data-expanded": isOpen || undefined, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onClick: () => toggleOpen(), value: searchQuery, 
                     // onFocus={handleInputFocus}
                     placeholder: placeholderText, disabled: disabled, ref: inputRef })) : (React.createElement("button", { className: "Multiselect__toggler", id: `toggler:${id}`, type: "button", "aria-label": texts.buttonShow, "aria-controls": id, "aria-expanded": isOpen, onClick: () => toggleOpen(), disabled: disabled, 

package/esm/Selectbox.d.ts

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

package/package.json

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