@reykjavik/hanna-react 0.10.157 → 0.10.159

package/CHANGELOG.md

@@ -4,12 +4,21 @@
 
 - ... <!-- Add new lines here. -->
 
-## 0.10.157
+## 0.10.159
+
+_2025-10-09_
+
+- `FileUpload`:
+  - feat: Add prop `unstable_confirmReplace` for multi-upload name-conflicts
+
+## 0.10.157 – 0.10.158
 
 _2025-09-16_
 
 - `Multiselect`
+  - feat: Add prop `onDropdown` prop
   - fix: Sync `.checked` prop of keyboard-toggled `input`s with visual state
+  - fix: Scope "global" keyboard event listener to the component's element
 - `Selectbox`:
   - fix: Remove stray `modifier` prop from `SelectboxProps`
 - docs: Add JSDoc comments for `FormfieldProps.renderInput` parameters

package/FileInput/_FileInput.utils.d.ts

@@ -21,8 +21,6 @@ export declare const formatBytes: (bytes: number, lang?: string, decimals?: numb
  * Figures out how to handle adding files to a FileInput
  * Which files to retaine, which too delete, and
  * what the updated fileList should look like.
- *
- *
  */
 export declare const getFileListUpdate: (oldFileList: Array<File>, added: Array<File>, replaceMode: boolean) => {
     fileList: File[];

package/FileInput/_FileInput.utils.js

@@ -46,8 +46,6 @@ exports.formatBytes = formatBytes;
  * Figures out how to handle adding files to a FileInput
  * Which files to retaine, which too delete, and
  * what the updated fileList should look like.
- *
- *
  */
 const getFileListUpdate = (oldFileList, added, 
 /**

package/FileInput.d.ts

@@ -23,7 +23,8 @@ export type FileInputProps = FormFieldWrappingProps & {
     onFilesUpdated?: (
     /** Updated, full list of Files. */
     files: Array<File>, 
-    /** Information about which Files were added or removed during with this update.
+    /**
+     * Information about which Files were added or removed during this update.
      *
      * NOTE: When a diff contains both added and deleted files, this indicates a
      * name-conflict occurred — i.e. one of the added files has a name that
@@ -36,6 +37,12 @@ export type FileInputProps = FormFieldWrappingProps & {
         deleted?: Array<File>;
         added?: Array<File>;
     }) => void;
+    /**
+     * Confirm replacing existing (name-conflicting) files in multi-upload mode
+     *
+     * This feature is "unstable" because its behavior might change in the future.
+     */
+    unstable_confirmReplace?: boolean;
     onFilesRejected?: (rejectedFiles: Array<File>) => void;
     name?: string;
     value?: ReadonlyArray<File>;

package/FileInput.js

@@ -29,6 +29,11 @@ const defaultDropzoneText = {
         react_1.default.createElement("strong", null, "kliknij"),
         " by wybra\u0107.")),
 };
+const replaceFileTest = {
+    is: 'Yfirskrifa núverandi skrá',
+    en: 'Replace existing file',
+    pl: 'Zastąp istniejący plik',
+};
 const defaultOnFilesRejected = (rejectedFiles) => {
     window.alert(`Error:\n${rejectedFiles
         .map((elm) => {
@@ -49,7 +54,7 @@ const FileInput = (props) => {
     const _d = (0, FormField_js_1.groupFormFieldWrapperProps)(props), { dropzoneProps, // eslint-disable-line deprecation/deprecation
     multiple = (_b = (_a = props.dropzoneProps) === null || _a === void 0 ? void 0 : _a.multiple) !== null && _b !== void 0 ? _b : true, // eslint-disable-line deprecation/deprecation
     accept = (_c = props.dropzoneProps) === null || _c === void 0 ? void 0 : _c.accept, // eslint-disable-line deprecation/deprecation
-    dropzoneText = defaultDropzoneText[lang](), removeFileText = defaultRemoveFileText[lang], FileList = _FileInputFileList_js_1.DefaultFileList, onFilesUpdated = () => undefined, onFilesRejected, showFileSize, showImagePreviews, value = [], fieldWrapperProps } = _d, inputElementProps = tslib_1.__rest(_d, ["dropzoneProps", "multiple", "accept", "dropzoneText", "removeFileText", "FileList", "onFilesUpdated", "onFilesRejected", "showFileSize", "showImagePreviews", "value", "fieldWrapperProps"]);
+    dropzoneText = defaultDropzoneText[lang](), unstable_confirmReplace, removeFileText = defaultRemoveFileText[lang], FileList = _FileInputFileList_js_1.DefaultFileList, onFilesUpdated = () => undefined, onFilesRejected, showFileSize, showImagePreviews, value = [], fieldWrapperProps } = _d, inputElementProps = tslib_1.__rest(_d, ["dropzoneProps", "multiple", "accept", "dropzoneText", "unstable_confirmReplace", "removeFileText", "FileList", "onFilesUpdated", "onFilesRejected", "showFileSize", "showImagePreviews", "value", "fieldWrapperProps"]);
     const domid = (0, useDomid_js_1.useDomid)(props.id);
     const fileInputWrapper = (0, react_1.useRef)(null);
     const fileInput = (0, react_1.useRef)(null);
@@ -113,14 +118,24 @@ const FileInput = (props) => {
     };
     const addFiles = (added) => {
         const { fileList, diff } = (0, _FileInput_utils_js_1.getFileListUpdate)(files, added, !multiple);
+        let updatedFileList = fileList;
+        if (diff.deleted && multiple && props.unstable_confirmReplace) {
+            diff.deleted = diff.deleted.filter((file) => window.confirm(`${replaceFileTest} "${file.name}"?`));
+            // When unstable_confirmReplace becomes stable, we should stop returning
+            // `fileList` from getFileListUpdate and just always do this thing.
+            // That change will require changing the tests too, so let's wait.
+            updatedFileList = files
+                .filter((file) => !diff.deleted.includes(file))
+                .concat(added);
+        }
         if (fileInput.current) {
-            fileInput.current.files = arrayToFileList(fileList);
+            fileInput.current.files = arrayToFileList(updatedFileList);
         }
         if (inputRef.current) {
             // Empty on every add
             inputRef.current.files = arrayToFileList([]);
         }
-        onFilesUpdated(fileList, diff);
+        onFilesUpdated(updatedFileList, diff);
     };
     return (react_1.default.createElement(FormField_js_1.default, Object.assign({ extraClassName: (0, hanna_utils_1.modifiedClass)('FileInput', [multiple && 'multi']) }, fieldWrapperProps, { id: `${domid}-fake`, LabelTag: "h4", renderInput: (className, inputProps /* , addFocusProps */) => {
             return (react_1.default.createElement("div", { className: className.control, ref: fileInputWrapper },

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/FileInput/_FileInput.utils.d.ts

@@ -21,8 +21,6 @@ export declare const formatBytes: (bytes: number, lang?: string, decimals?: numb
  * Figures out how to handle adding files to a FileInput
  * Which files to retaine, which too delete, and
  * what the updated fileList should look like.
- *
- *
  */
 export declare const getFileListUpdate: (oldFileList: Array<File>, added: Array<File>, replaceMode: boolean) => {
     fileList: File[];

package/esm/FileInput/_FileInput.utils.js

@@ -40,8 +40,6 @@ export const formatBytes = (bytes, lang = 'is', decimals = 2) => {
  * Figures out how to handle adding files to a FileInput
  * Which files to retaine, which too delete, and
  * what the updated fileList should look like.
- *
- *
  */
 export const getFileListUpdate = (oldFileList, added, 
 /**

package/esm/FileInput.d.ts

@@ -23,7 +23,8 @@ export type FileInputProps = FormFieldWrappingProps & {
     onFilesUpdated?: (
     /** Updated, full list of Files. */
     files: Array<File>, 
-    /** Information about which Files were added or removed during with this update.
+    /**
+     * Information about which Files were added or removed during this update.
      *
      * NOTE: When a diff contains both added and deleted files, this indicates a
      * name-conflict occurred — i.e. one of the added files has a name that
@@ -36,6 +37,12 @@ export type FileInputProps = FormFieldWrappingProps & {
         deleted?: Array<File>;
         added?: Array<File>;
     }) => void;
+    /**
+     * Confirm replacing existing (name-conflicting) files in multi-upload mode
+     *
+     * This feature is "unstable" because its behavior might change in the future.
+     */
+    unstable_confirmReplace?: boolean;
     onFilesRejected?: (rejectedFiles: Array<File>) => void;
     name?: string;
     value?: ReadonlyArray<File>;

package/esm/FileInput.js

@@ -26,6 +26,11 @@ const defaultDropzoneText = {
         React.createElement("strong", null, "kliknij"),
         " by wybra\u0107.")),
 };
+const replaceFileTest = {
+    is: 'Yfirskrifa núverandi skrá',
+    en: 'Replace existing file',
+    pl: 'Zastąp istniejący plik',
+};
 const defaultOnFilesRejected = (rejectedFiles) => {
     window.alert(`Error:\n${rejectedFiles
         .map((elm) => {
@@ -46,7 +51,7 @@ export const FileInput = (props) => {
     const _d = groupFormFieldWrapperProps(props), { dropzoneProps, // eslint-disable-line deprecation/deprecation
     multiple = (_b = (_a = props.dropzoneProps) === null || _a === void 0 ? void 0 : _a.multiple) !== null && _b !== void 0 ? _b : true, // eslint-disable-line deprecation/deprecation
     accept = (_c = props.dropzoneProps) === null || _c === void 0 ? void 0 : _c.accept, // eslint-disable-line deprecation/deprecation
-    dropzoneText = defaultDropzoneText[lang](), removeFileText = defaultRemoveFileText[lang], FileList = DefaultFileList, onFilesUpdated = () => undefined, onFilesRejected, showFileSize, showImagePreviews, value = [], fieldWrapperProps } = _d, inputElementProps = __rest(_d, ["dropzoneProps", "multiple", "accept", "dropzoneText", "removeFileText", "FileList", "onFilesUpdated", "onFilesRejected", "showFileSize", "showImagePreviews", "value", "fieldWrapperProps"]);
+    dropzoneText = defaultDropzoneText[lang](), unstable_confirmReplace, removeFileText = defaultRemoveFileText[lang], FileList = DefaultFileList, onFilesUpdated = () => undefined, onFilesRejected, showFileSize, showImagePreviews, value = [], fieldWrapperProps } = _d, inputElementProps = __rest(_d, ["dropzoneProps", "multiple", "accept", "dropzoneText", "unstable_confirmReplace", "removeFileText", "FileList", "onFilesUpdated", "onFilesRejected", "showFileSize", "showImagePreviews", "value", "fieldWrapperProps"]);
     const domid = useDomid(props.id);
     const fileInputWrapper = useRef(null);
     const fileInput = useRef(null);
@@ -110,14 +115,24 @@ export const FileInput = (props) => {
     };
     const addFiles = (added) => {
         const { fileList, diff } = getFileListUpdate(files, added, !multiple);
+        let updatedFileList = fileList;
+        if (diff.deleted && multiple && props.unstable_confirmReplace) {
+            diff.deleted = diff.deleted.filter((file) => window.confirm(`${replaceFileTest} "${file.name}"?`));
+            // When unstable_confirmReplace becomes stable, we should stop returning
+            // `fileList` from getFileListUpdate and just always do this thing.
+            // That change will require changing the tests too, so let's wait.
+            updatedFileList = files
+                .filter((file) => !diff.deleted.includes(file))
+                .concat(added);
+        }
         if (fileInput.current) {
-            fileInput.current.files = arrayToFileList(fileList);
+            fileInput.current.files = arrayToFileList(updatedFileList);
         }
         if (inputRef.current) {
             // Empty on every add
             inputRef.current.files = arrayToFileList([]);
         }
-        onFilesUpdated(fileList, diff);
+        onFilesUpdated(updatedFileList, diff);
     };
     return (React.createElement(FormField, Object.assign({ extraClassName: modifiedClass('FileInput', [multiple && 'multi']) }, fieldWrapperProps, { id: `${domid}-fake`, LabelTag: "h4", renderInput: (className, inputProps /* , addFocusProps */) => {
             return (React.createElement("div", { className: className.control, ref: fileInputWrapper },

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.159",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",