@reykjavik/hanna-react 0.10.157 → 0.10.158

package/CHANGELOG.md

@@ -4,6 +4,14 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.158
+
+_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_

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,59 +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) {
-                        // Manually toggle the checkbox, to ensure that uncontrolled
-                        // components (e.g. screen readers) are in sync with the visual state.
-                        let input;
-                        inputWrapperRef
-                            .current.querySelectorAll(`input[type="checkbox"]`)
-                            .forEach((elm) => {
-                            if (elm.value === selItem.value) {
-                                input = elm;
-                            }
-                        });
-                        input.checked = !input.checked;
-                        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;
@@ -211,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/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,59 +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) {
-                        // Manually toggle the checkbox, to ensure that uncontrolled
-                        // components (e.g. screen readers) are in sync with the visual state.
-                        let input;
-                        inputWrapperRef
-                            .current.querySelectorAll(`input[type="checkbox"]`)
-                            .forEach((elm) => {
-                            if (elm.value === selItem.value) {
-                                input = elm;
-                            }
-                        });
-                        input.checked = !input.checked;
-                        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;
@@ -207,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/package.json

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