@reykjavik/hanna-react 0.10.139 → 0.10.141

package/CHANGELOG.md

@@ -4,6 +4,21 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.141
+
+_2024-11-25_
+
+- `DropdownButton`:
+  - feat: Support rendering `current` status of menu items
+  - feat: Add prop `onItemClick`
+
+## 0.10.140
+
+_2024-11-21_
+
+- `Layout`:
+  - fix: Clicking "Skip to navigation" focuses the first focusable element
+
 ## 0.10.139
 
 _2024-11-20_

package/DropdownButton.d.ts

@@ -12,12 +12,18 @@ export type DropdownButtonItem = MainMenu2Item & {
 export type DropdownButtonCustomItem = (props: {
     closeMenu: () => void;
 }) => React.ReactElement;
-export type DropdownButtonProps = Prefix<Omit<ButtonVariantProps, 'small'>, 'button'> & {
+export type DropdownButtonProps = {
     label: string | NonNullable<React.ReactElement>;
     labelLong?: string;
+    items: Array<DropdownButtonItem | DropdownButtonCustomItem>;
+    /**
+     * NOTE: Clicking a MainMenu2 item will automatically close HannaUIState's
+     * "Hamburger menu" (a.k.a. "Mobile menu")
+     * … unless the `onItemClick` function explicitly returns `false`.
+     */
+    onItemClick?: (item: MainMenu2Item) => void | boolean;
     /** Default: `"seconcary"` */
     buttonType?: 'primary' | 'secondary';
-    items: Array<DropdownButtonItem | DropdownButtonCustomItem>;
-} & WrapperElmProps<'details', 'open' | 'name'> & SSRSupportProps;
+} & Prefix<Omit<ButtonVariantProps, 'small'>, 'button'> & WrapperElmProps<'details', 'open' | 'name'> & SSRSupportProps;
 export declare const DropdownButton: (props: DropdownButtonProps) => JSX.Element;
 export {};

package/DropdownButton.js

@@ -24,7 +24,7 @@ const DropdownButton = (props) => {
         middleware: [(0, react_2.flip)(), (0, react_2.shift)()],
         whileElementsMounted: react_2.autoUpdate,
     });
-    const { wrapperProps = {} } = props;
+    const { onItemClick, wrapperProps = {} } = props;
     return (react_1.default.createElement("details", Object.assign({}, wrapperProps, { className: (0, hanna_utils_1.modifiedClass)('DropdownButton', isOpen && 'open', wrapperProps.className), open: isOpen, onBlur: (e) => {
             var _a;
             if (!isHovering) {
@@ -68,9 +68,15 @@ const DropdownButton = (props) => {
                     'data-icon': item.icon,
                     'arial-label': item.labelLong,
                 };
-                return (react_1.default.createElement("li", { key: i, className: "DropdownButton__item" }, isBrowser && onClick ? (react_1.default.createElement("button", Object.assign({}, commonProps, { type: "button", "aria-controls": item.controlsId, onClick: (e) => {
-                        onClick(item) !== false && closeMenuStat();
-                    } }), label)) : href != null ? (react_1.default.createElement("a", Object.assign({}, commonProps, { href: href, hrefLang: item.hrefLang, target: item.target }), label)) : null));
+                const doRenderButton = isBrowser && (onClick || (onItemClick && href == null));
+                return (react_1.default.createElement("li", { key: i, className: (0, hanna_utils_1.modifiedClass)('DropdownButton__item', item.modifier), "aria-current": item.current || undefined }, doRenderButton ? (react_1.default.createElement("button", Object.assign({}, commonProps, { type: "button", "aria-controls": item.controlsId, onClick: () => {
+                        const keepOpen1 = onClick && onClick(item) === false;
+                        const keepOpen2 = onItemClick && onItemClick(item) === false;
+                        !(keepOpen1 || keepOpen2) && closeMenuStat();
+                    } }), label)) : href != null ? (react_1.default.createElement("a", Object.assign({}, commonProps, { href: href, hrefLang: item.hrefLang, target: item.target, onClick: () => {
+                        const keepOpen = onItemClick && onItemClick(item) === false;
+                        !keepOpen && closeMenuStat();
+                    } }), label)) : null));
             }),
             react_1.default.createElement(FocusTrap_js_1.FocusTrap, { Tag: "li", depth: 2 }))));
 };

package/FocusTrap.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FocusTrap = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const hanna_utils_1 = require("@reykjavik/hanna-utils");
 /**
  * A focus trap element that can be used to keep keyboard focus within a
  * container block.
@@ -21,7 +22,7 @@ const FocusTrap = (props) => {
             if (!container) {
                 return;
             }
-            const focusables = container.querySelectorAll('a[href], input, select, textarea, button, summary, iframe, [tabindex]:not(.FocusTrap):not([tabindex="-1"])');
+            const focusables = container.querySelectorAll(hanna_utils_1.focusElement.keyboardFocusableSelector);
             const delta = props.atTop ? -1 : 1;
             let i = delta < 0 ? focusables.length - 1 : 0;
             let newTarget;

package/Layout.js

@@ -24,7 +24,7 @@ const Layout = (props) => {
             react_1.default.createElement("div", { className: "Layout__header", role: "banner" },
                 (0, _Layouts_js_1.renderLayoutHomeLink)('Layout', logoLink, siteName),
                 ' ',
-                navChildren && (react_1.default.createElement("a", { className: "Layout__header__navlink", href: "#pagenav", onClick: a11yHelpers_js_1.handleAnchorLinkClick, "aria-label": txt.skipLinkLabel }, txt.skipLinkLabel))),
+                navChildren && (react_1.default.createElement("a", { className: "Layout__header__navlink", href: "#pagenav", onClick: (e) => (0, a11yHelpers_js_1.handleAnchorLinkClick)(e, true), "aria-label": txt.skipLinkLabel }, txt.skipLinkLabel))),
             react_1.default.createElement("div", { className: "Layout__main", role: "main" }, mainChildren || children),
             navChildren && (react_1.default.createElement("div", { className: "Layout__nav", id: "pagenav", tabIndex: -1, role: "navigation" }, navChildren)),
             react_1.default.createElement("div", { className: "Layout__footer", role: "complementary" }, footerChildren))));

package/MainMenu2.js

@@ -89,7 +89,8 @@ const getRenderers = (props) => {
                 size: 'small',
             }
             : undefined;
-        return (react_1.default.createElement(Tag, { key: key, className: (0, hanna_utils_1.modifiedClass)(`${classPrefix}item`, item.modifier), "aria-current": item.current || undefined }, isBrowser && (onClick || (href == null && onItemClick)) ? (react_1.default.createElement(ButtonTag, Object.assign({}, commonProps, { type: "button", "aria-controls": controlsId, onClick: () => {
+        const doRenderButton = isBrowser && (onClick || (onItemClick && href == null));
+        return (react_1.default.createElement(Tag, { key: key, className: (0, hanna_utils_1.modifiedClass)(`${classPrefix}item`, item.modifier), "aria-current": item.current || undefined }, doRenderButton ? (react_1.default.createElement(ButtonTag, Object.assign({}, commonProps, { type: "button", "aria-controls": controlsId, onClick: () => {
                 const keepOpen1 = onClick && onClick(item) === false;
                 const keepOpen2 = onItemClick && onItemClick(item) === false;
                 !(keepOpen1 || keepOpen2) && closeMenu();

package/esm/DropdownButton.d.ts

@@ -12,12 +12,18 @@ export type DropdownButtonItem = MainMenu2Item & {
 export type DropdownButtonCustomItem = (props: {
     closeMenu: () => void;
 }) => React.ReactElement;
-export type DropdownButtonProps = Prefix<Omit<ButtonVariantProps, 'small'>, 'button'> & {
+export type DropdownButtonProps = {
     label: string | NonNullable<React.ReactElement>;
     labelLong?: string;
+    items: Array<DropdownButtonItem | DropdownButtonCustomItem>;
+    /**
+     * NOTE: Clicking a MainMenu2 item will automatically close HannaUIState's
+     * "Hamburger menu" (a.k.a. "Mobile menu")
+     * … unless the `onItemClick` function explicitly returns `false`.
+     */
+    onItemClick?: (item: MainMenu2Item) => void | boolean;
     /** Default: `"seconcary"` */
     buttonType?: 'primary' | 'secondary';
-    items: Array<DropdownButtonItem | DropdownButtonCustomItem>;
-} & WrapperElmProps<'details', 'open' | 'name'> & SSRSupportProps;
+} & Prefix<Omit<ButtonVariantProps, 'small'>, 'button'> & WrapperElmProps<'details', 'open' | 'name'> & SSRSupportProps;
 export declare const DropdownButton: (props: DropdownButtonProps) => JSX.Element;
 export {};

package/esm/DropdownButton.js

@@ -20,7 +20,7 @@ export const DropdownButton = (props) => {
         middleware: [flip(), shift()],
         whileElementsMounted: autoUpdate,
     });
-    const { wrapperProps = {} } = props;
+    const { onItemClick, wrapperProps = {} } = props;
     return (React.createElement("details", Object.assign({}, wrapperProps, { className: modifiedClass('DropdownButton', isOpen && 'open', wrapperProps.className), open: isOpen, onBlur: (e) => {
             var _a;
             if (!isHovering) {
@@ -64,9 +64,15 @@ export const DropdownButton = (props) => {
                     'data-icon': item.icon,
                     'arial-label': item.labelLong,
                 };
-                return (React.createElement("li", { key: i, className: "DropdownButton__item" }, isBrowser && onClick ? (React.createElement("button", Object.assign({}, commonProps, { type: "button", "aria-controls": item.controlsId, onClick: (e) => {
-                        onClick(item) !== false && closeMenuStat();
-                    } }), label)) : href != null ? (React.createElement("a", Object.assign({}, commonProps, { href: href, hrefLang: item.hrefLang, target: item.target }), label)) : null));
+                const doRenderButton = isBrowser && (onClick || (onItemClick && href == null));
+                return (React.createElement("li", { key: i, className: modifiedClass('DropdownButton__item', item.modifier), "aria-current": item.current || undefined }, doRenderButton ? (React.createElement("button", Object.assign({}, commonProps, { type: "button", "aria-controls": item.controlsId, onClick: () => {
+                        const keepOpen1 = onClick && onClick(item) === false;
+                        const keepOpen2 = onItemClick && onItemClick(item) === false;
+                        !(keepOpen1 || keepOpen2) && closeMenuStat();
+                    } }), label)) : href != null ? (React.createElement("a", Object.assign({}, commonProps, { href: href, hrefLang: item.hrefLang, target: item.target, onClick: () => {
+                        const keepOpen = onItemClick && onItemClick(item) === false;
+                        !keepOpen && closeMenuStat();
+                    } }), label)) : null));
             }),
             React.createElement(FocusTrap, { Tag: "li", depth: 2 }))));
 };

package/esm/FocusTrap.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { focusElement } from '@reykjavik/hanna-utils';
 /**
  * A focus trap element that can be used to keep keyboard focus within a
  * container block.
@@ -17,7 +18,7 @@ export const FocusTrap = (props) => {
             if (!container) {
                 return;
             }
-            const focusables = container.querySelectorAll('a[href], input, select, textarea, button, summary, iframe, [tabindex]:not(.FocusTrap):not([tabindex="-1"])');
+            const focusables = container.querySelectorAll(focusElement.keyboardFocusableSelector);
             const delta = props.atTop ? -1 : 1;
             let i = delta < 0 ? focusables.length - 1 : 0;
             let newTarget;

package/esm/Layout.js

@@ -20,7 +20,7 @@ export const Layout = (props) => {
             React.createElement("div", { className: "Layout__header", role: "banner" },
                 renderLayoutHomeLink('Layout', logoLink, siteName),
                 ' ',
-                navChildren && (React.createElement("a", { className: "Layout__header__navlink", href: "#pagenav", onClick: handleAnchorLinkClick, "aria-label": txt.skipLinkLabel }, txt.skipLinkLabel))),
+                navChildren && (React.createElement("a", { className: "Layout__header__navlink", href: "#pagenav", onClick: (e) => handleAnchorLinkClick(e, true), "aria-label": txt.skipLinkLabel }, txt.skipLinkLabel))),
             React.createElement("div", { className: "Layout__main", role: "main" }, mainChildren || children),
             navChildren && (React.createElement("div", { className: "Layout__nav", id: "pagenav", tabIndex: -1, role: "navigation" }, navChildren)),
             React.createElement("div", { className: "Layout__footer", role: "complementary" }, footerChildren))));

package/esm/MainMenu2.js

@@ -85,7 +85,8 @@ const getRenderers = (props) => {
                 size: 'small',
             }
             : undefined;
-        return (React.createElement(Tag, { key: key, className: modifiedClass(`${classPrefix}item`, item.modifier), "aria-current": item.current || undefined }, isBrowser && (onClick || (href == null && onItemClick)) ? (React.createElement(ButtonTag, Object.assign({}, commonProps, { type: "button", "aria-controls": controlsId, onClick: () => {
+        const doRenderButton = isBrowser && (onClick || (onItemClick && href == null));
+        return (React.createElement(Tag, { key: key, className: modifiedClass(`${classPrefix}item`, item.modifier), "aria-current": item.current || undefined }, doRenderButton ? (React.createElement(ButtonTag, Object.assign({}, commonProps, { type: "button", "aria-controls": controlsId, onClick: () => {
                 const keepOpen1 = onClick && onClick(item) === false;
                 const keepOpen2 = onItemClick && onItemClick(item) === false;
                 !(keepOpen1 || keepOpen2) && closeMenu();

package/esm/utils/a11yHelpers.d.ts

@@ -1,2 +1,2 @@
-import { MouseEventHandler } from 'react';
-export declare const handleAnchorLinkClick: MouseEventHandler<HTMLAnchorElement>;
+import { MouseEvent as ReactMouseEvent } from 'react';
+export declare const handleAnchorLinkClick: (e: ReactMouseEvent<HTMLAnchorElement>, forwardToFirstFocusable?: boolean) => void;

package/esm/utils/a11yHelpers.js

@@ -1,11 +1,10 @@
 import { focusElement } from '@reykjavik/hanna-utils';
-export const handleAnchorLinkClick = (e) => {
+export const handleAnchorLinkClick = (e, forwardToFirstFocusable) => {
     e.preventDefault();
     const targetId = e.currentTarget.hash.slice(1);
     const targetElm = targetId && document.getElementById(targetId);
     if (!targetElm) {
         return;
     }
-    targetElm.tabIndex = -1;
-    focusElement(targetElm);
+    focusElement(targetElm, forwardToFirstFocusable);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.139",
+	"version": "0.10.141",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",
@@ -18,7 +18,7 @@
 		"@hugsmidjan/qj": "^4.22.1",
 		"@hugsmidjan/react": "^0.4.32",
 		"@reykjavik/hanna-css": "^0.4.16",
-		"@reykjavik/hanna-utils": "^0.2.18",
+		"@reykjavik/hanna-utils": "^0.2.19",
 		"@types/react-autosuggest": "^10.1.0",
 		"@types/react-datepicker": "^4.8.0",
 		"@types/react-transition-group": "^4.4.0",

package/utils/a11yHelpers.d.ts

@@ -1,2 +1,2 @@
-import { MouseEventHandler } from 'react';
-export declare const handleAnchorLinkClick: MouseEventHandler<HTMLAnchorElement>;
+import { MouseEvent as ReactMouseEvent } from 'react';
+export declare const handleAnchorLinkClick: (e: ReactMouseEvent<HTMLAnchorElement>, forwardToFirstFocusable?: boolean) => void;

package/utils/a11yHelpers.js

@@ -2,14 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.handleAnchorLinkClick = void 0;
 const hanna_utils_1 = require("@reykjavik/hanna-utils");
-const handleAnchorLinkClick = (e) => {
+const handleAnchorLinkClick = (e, forwardToFirstFocusable) => {
     e.preventDefault();
     const targetId = e.currentTarget.hash.slice(1);
     const targetElm = targetId && document.getElementById(targetId);
     if (!targetElm) {
         return;
     }
-    targetElm.tabIndex = -1;
-    (0, hanna_utils_1.focusElement)(targetElm);
+    (0, hanna_utils_1.focusElement)(targetElm, forwardToFirstFocusable);
 };
 exports.handleAnchorLinkClick = handleAnchorLinkClick;