@reykjavik/hanna-react 0.10.155 → 0.10.157

package/CHANGELOG.md

@@ -4,12 +4,22 @@
 
 - ... <!-- Add new lines here. -->
 
-## 0.10.155
+## 0.10.157
+
+_2025-09-16_
+
+- `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.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/MainMenu2.d.ts

@@ -4,6 +4,7 @@ import { Illustration } from '@reykjavik/hanna-utils/assets';
 import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
 import { I18NProps } from './utils/types.js';
 import { SSRSupportProps, WrapperElmProps } from './utils.js';
+type Falseish = undefined | null | false;
 export type MainMenu2I18n = {
     title: string;
     homeLink: string;
@@ -64,11 +65,11 @@ export type MainMenu2SubMenuItem = MainMenu2Item & {
 export type MainMenu2SubMenu = {
     title: string;
     current?: boolean;
-    subItems: Array<MainMenu2SubMenuItem | MainMenu2CustomItem | undefined>;
+    subItems: Array<MainMenu2SubMenuItem | MainMenu2CustomItem | Falseish>;
 };
-export type MainMenu2ItemList = Array<MainMenu2Item | MainMenu2CustomItem | undefined>;
-export type MainMenu2ButtonItemList = Array<MainMenu2ButtonItem | MainMenu2CustomItem | undefined>;
-export type MainMenu2SubMenuItemList = Array<MainMenu2SubMenuItem | MainMenu2CustomItem | undefined>;
+export type MainMenu2ItemList = Array<MainMenu2Item | MainMenu2CustomItem | Falseish>;
+export type MainMenu2ButtonItemList = Array<MainMenu2ButtonItem | MainMenu2CustomItem | Falseish>;
+export type MainMenu2SubMenuItemList = Array<MainMenu2SubMenuItem | MainMenu2CustomItem | Falseish>;
 export type MainMenu2Props = {
     /**
      * URL for the mandatory (usually screen-reader-only) homepage Link.
@@ -114,3 +115,4 @@ export type MainMenu2Props = {
     imageUrl?: string;
 }> & WrapperElmProps & I18NProps<MainMenu2I18n> & SSRSupportProps;
 export declare const MainMenu2: (props: MainMenu2Props) => JSX.Element;
+export {};

package/Multiselect.js

@@ -163,6 +163,17 @@ const Multiselect = (props) => {
                     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);
                     }
                 }

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/MainMenu2.d.ts

@@ -4,6 +4,7 @@ import { Illustration } from '@reykjavik/hanna-utils/assets';
 import { DefaultTexts } from '@reykjavik/hanna-utils/i18n';
 import { I18NProps } from './utils/types.js';
 import { SSRSupportProps, WrapperElmProps } from './utils.js';
+type Falseish = undefined | null | false;
 export type MainMenu2I18n = {
     title: string;
     homeLink: string;
@@ -64,11 +65,11 @@ export type MainMenu2SubMenuItem = MainMenu2Item & {
 export type MainMenu2SubMenu = {
     title: string;
     current?: boolean;
-    subItems: Array<MainMenu2SubMenuItem | MainMenu2CustomItem | undefined>;
+    subItems: Array<MainMenu2SubMenuItem | MainMenu2CustomItem | Falseish>;
 };
-export type MainMenu2ItemList = Array<MainMenu2Item | MainMenu2CustomItem | undefined>;
-export type MainMenu2ButtonItemList = Array<MainMenu2ButtonItem | MainMenu2CustomItem | undefined>;
-export type MainMenu2SubMenuItemList = Array<MainMenu2SubMenuItem | MainMenu2CustomItem | undefined>;
+export type MainMenu2ItemList = Array<MainMenu2Item | MainMenu2CustomItem | Falseish>;
+export type MainMenu2ButtonItemList = Array<MainMenu2ButtonItem | MainMenu2CustomItem | Falseish>;
+export type MainMenu2SubMenuItemList = Array<MainMenu2SubMenuItem | MainMenu2CustomItem | Falseish>;
 export type MainMenu2Props = {
     /**
      * URL for the mandatory (usually screen-reader-only) homepage Link.
@@ -114,3 +115,4 @@ export type MainMenu2Props = {
     imageUrl?: string;
 }> & WrapperElmProps & I18NProps<MainMenu2I18n> & SSRSupportProps;
 export declare const MainMenu2: (props: MainMenu2Props) => JSX.Element;
+export {};

package/esm/Multiselect.js

@@ -159,6 +159,17 @@ export const Multiselect = (props) => {
                     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);
                     }
                 }

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