@linzjs/lui 28.0.0 → 28.1.0

package/CHANGELOG.md

@@ -5,6 +5,13 @@
 
 * **LuiComboSelect:** restore interface to support styling of the input element. ([#1270](https://github.com/linz/lui/issues/1270)) ([7ce6a13](https://github.com/linz/lui/commit/7ce6a137c7f16ffa3acbe4357569a6eb59ef47db))
 
+## [28.1.0](https://github.com/linz/Lui/compare/lui-v28.0.0...lui-v28.1.0) (2026-10-01)
+
+
+### Features
+
+* **LuiAccordicardStatic:** support clickable headers ([#1420](https://github.com/linz/Lui/issues/1420)) ([692274b](https://github.com/linz/Lui/commit/692274bc3875f3fd488e3d014982284d5a0ef960))
+
 ## [28.0.0](https://github.com/linz/Lui/compare/lui-v27.0.1...lui-v28.0.0) (2026-09-24)
 
 

package/dist/components/LuiAccordicardStatic/LuiAccordicardStatic.d.ts

@@ -5,5 +5,6 @@ export interface IAccordicardStatic {
     headerContent: React.ReactNode;
     className?: string;
     warning?: boolean;
+    expandOnHeaderClick?: boolean;
 }
 export declare const LuiAccordicardStatic: (props: IAccordicardStatic) => React.JSX.Element;

package/dist/index.js

@@ -33999,16 +33999,32 @@ const LuiAccordicard = (props) => {
 };
 
 const LuiAccordicardStatic = (props) => {
-    const { defaultToOpen = false, children, headerContent } = props;
+    const { defaultToOpen = false, children, headerContent, expandOnHeaderClick = false, } = props;
     const [isOpen, setIsOpen] = React.useState(defaultToOpen);
-    return (React__default["default"].createElement("div", { className: clsx('LuiAccordicardStatic', isOpen ? 'LuiAccordicardStatic--isOpen' : null, props.warning ? 'LuiAccordicardStatic--warning' : null, props.className) },
+    const contentId = React.useId();
+    const toggle = () => setIsOpen((currentIsOpen) => !currentIsOpen);
+    const isInteractiveTarget = (target, currentTarget) => {
+        if (!(target instanceof Element))
+            return false;
+        const interactiveTarget = target.closest('a, button, input, label, select, textarea, summary, [contenteditable="true"], [tabindex]:not([tabindex="-1"]), [role="button"], [role="checkbox"], [role="combobox"], [role="link"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"], [role="radio"], [role="switch"], [role="tab"], [role="textbox"], [role="spinbutton"]');
+        return interactiveTarget !== null && interactiveTarget !== currentTarget;
+    };
+    const handleHeaderClick = (event) => {
+        if (!expandOnHeaderClick)
+            return;
+        if (isInteractiveTarget(event.target, event.currentTarget))
+            return;
+        toggle();
+    };
+    return (React__default["default"].createElement("div", { className: clsx('LuiAccordicardStatic', isOpen ? 'LuiAccordicardStatic--isOpen' : null, props.warning ? 'LuiAccordicardStatic--warning' : null, expandOnHeaderClick ? 'LuiAccordicardStatic--clickableHeader' : null, props.className) },
         props.warning && (React__default["default"].createElement("div", { className: "LuiAccordicardStatic-sideBar" },
             React__default["default"].createElement(LuiIcon, { className: "LuiAccordicardStatic-warningIcon", alt: "Accordicard warning", name: 'ic_warning', size: 'md' }))),
-        React__default["default"].createElement("div", { className: "LuiAccordicardStatic-header" },
+        React__default["default"].createElement("div", { className: "LuiAccordicardStatic-header", onClick: handleHeaderClick },
+            expandOnHeaderClick && (React__default["default"].createElement("button", { "aria-controls": contentId, "aria-expanded": isOpen, "aria-label": "Expand and collapse panel", className: "LuiAccordicardStatic-headerToggle", onClick: toggle, type: "button" })),
             React__default["default"].createElement("div", { className: "LuiAccordicardStatic-headerContent" }, headerContent)),
-        React__default["default"].createElement("div", { className: clsx('LuiAccordicardStatic-contentWrapper', isOpen ? 'LuiAccordicardStatic-contentWrapper--isOpen' : null) },
+        React__default["default"].createElement("div", { id: contentId, className: clsx('LuiAccordicardStatic-contentWrapper', isOpen ? 'LuiAccordicardStatic-contentWrapper--isOpen' : null) },
             React__default["default"].createElement("div", { className: clsx('LuiAccordicardStatic-content', isOpen ? 'LuiAccordicardStatic-content--isOpen' : null) }, isOpen ? children : React__default["default"].createElement(React__default["default"].Fragment, null))),
-        React__default["default"].createElement("button", { "aria-label": isOpen ? 'Expanded' : 'Closed', className: "LuiAccordicardStatic-trigger", onClick: () => setIsOpen(!isOpen), type: "button" },
+        React__default["default"].createElement("button", { "aria-label": isOpen ? 'Expanded' : 'Closed', className: "LuiAccordicardStatic-trigger", onClick: toggle, type: "button" },
             React__default["default"].createElement(LuiIcon, { className: clsx('LuiAccordicardStatic-chevron', isOpen ? 'LuiAccordicardStatic-chevron--isOpen' : null), name: 'ic_expand_more', alt: "expand", title: "Expand and collapse panel", size: "md" }))));
 };