@abgov/react-components 7.1.0 → 7.2.0-dev.10

package/index.d.ts

@@ -79,3 +79,4 @@ export * from './lib/work-side-menu-group/work-side-menu-group';
 export * from './lib/work-side-menu-item/work-side-menu-item';
 export * from './lib/work-side-notification-item/work-side-notification-item';
 export * from './lib/work-side-notification-panel/work-side-notification-panel';
+export * from './lib/theme/theme-context';

package/index.js

@@ -30,6 +30,8 @@ function GoabAccordion({
   open,
   onChange,
   headingContent,
+  headingType,
+  actions,
   children,
   ...rest
 }) {
@@ -48,10 +50,20 @@ function GoabAccordion({
       };
     }
   }, [onChange]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("goa-accordion", { ref, open: open ? "true" : void 0, ..._props, children: [
-    headingContent && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "headingcontent", children: headingContent }),
-    children
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "goa-accordion",
+    {
+      ref,
+      open: open ? "true" : void 0,
+      "heading-type": headingType,
+      ..._props,
+      children: [
+        headingContent && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "headingcontent", children: headingContent }),
+        actions && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "actions", children: actions }),
+        children
+      ]
+    }
+  );
 }
 function GoabAppHeader({
   onMenuClick,
@@ -2678,14 +2690,19 @@ function GoabDrawer({
 }) {
   const el = react.useRef(null);
   react.useEffect(() => {
-    var _a;
     if (!(el == null ? void 0 : el.current) || !onClose) {
       return;
     }
-    (_a = el.current) == null ? void 0 : _a.addEventListener("_close", onClose);
+    const current = el.current;
+    const listener = (e) => {
+      if (e.target !== current) {
+        return;
+      }
+      onClose();
+    };
+    current.addEventListener("_close", listener);
     return () => {
-      var _a2;
-      (_a2 = el.current) == null ? void 0 : _a2.removeEventListener("_close", onClose);
+      current.removeEventListener("_close", listener);
     };
   }, [el, onClose]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3123,9 +3140,10 @@ function GoabHeroBanner({
   backgroundColor,
   textColor,
   children,
+  actions,
   testId
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "goa-hero-banner",
     {
       heading,
@@ -3135,7 +3153,10 @@ function GoabHeroBanner({
       backgroundcolor: backgroundColor,
       textcolor: textColor,
       testid: testId,
-      children
+      children: [
+        children,
+        actions && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "actions", children: actions })
+      ]
     }
   );
 }
@@ -3576,7 +3597,10 @@ function GoabModal({
       return;
     }
     const current = el.current;
-    const listener = () => {
+    const listener = (e) => {
+      if (e.target !== current) {
+        return;
+      }
       onClose == null ? void 0 : onClose();
     };
     current.addEventListener("_close", listener);
@@ -3727,14 +3751,19 @@ function GoabPushDrawer({
 }) {
   const el = react.useRef(null);
   react.useEffect(() => {
-    var _a;
     if (!(el == null ? void 0 : el.current) || !onClose) {
       return;
     }
-    (_a = el.current) == null ? void 0 : _a.addEventListener("_close", onClose);
+    const current = el.current;
+    const listener = (e) => {
+      if (e.target !== current) {
+        return;
+      }
+      onClose();
+    };
+    current.addEventListener("_close", listener);
     return () => {
-      var _a2;
-      (_a2 = el.current) == null ? void 0 : _a2.removeEventListener("_close", onClose);
+      current.removeEventListener("_close", listener);
     };
   }, [el, onClose]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3986,6 +4015,7 @@ function GoabTableSortHeader({
       name,
       direction,
       "sort-order": sortOrder,
+      version: "2",
       ...rest,
       children
     }
@@ -4286,30 +4316,28 @@ function GoabWorkSideMenu({
 }) {
   const el = react.useRef(null);
   react.useEffect(() => {
-    var _a;
-    if (!(el == null ? void 0 : el.current) || !onToggle) {
+    const node = el.current;
+    if (!node || !onToggle) {
       return;
     }
-    (_a = el.current) == null ? void 0 : _a.addEventListener("_toggle", onToggle);
+    node.addEventListener("_toggle", onToggle);
     return () => {
-      var _a2;
-      (_a2 = el.current) == null ? void 0 : _a2.removeEventListener("_toggle", onToggle);
+      node.removeEventListener("_toggle", onToggle);
     };
-  }, [el, onToggle]);
+  }, [onToggle]);
   react.useEffect(() => {
-    var _a;
-    if (!(el == null ? void 0 : el.current) || !onNavigate) {
+    const node = el.current;
+    if (!node || !onNavigate) {
       return;
     }
     const handler = (e) => {
       onNavigate(e.detail.url);
     };
-    (_a = el.current) == null ? void 0 : _a.addEventListener("_navigate", handler);
+    node.addEventListener("_navigate", handler);
     return () => {
-      var _a2;
-      (_a2 = el.current) == null ? void 0 : _a2.removeEventListener("_navigate", handler);
+      node.removeEventListener("_navigate", handler);
     };
-  }, [el, onNavigate]);
+  }, [onNavigate]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "goa-work-side-menu",
     {
@@ -4354,6 +4382,7 @@ function GoabWorkSideMenuItem(props) {
       type: props.type,
       children: [
         props.popoverContent && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "popoverContent", children: props.popoverContent }),
+        props.trailingContent && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "trailingContent", children: props.trailingContent }),
         props.children
       ]
     }
@@ -4431,6 +4460,51 @@ function GoabWorkSideNotificationPanel({
     }
   );
 }
+const STORAGE_KEY = "goab-theme";
+const ATTRIBUTE = "data-theme";
+const GoabThemeContext = react.createContext(null);
+function readInitialMode(defaultMode) {
+  if (typeof window === "undefined") return defaultMode;
+  try {
+    const stored = window.localStorage.getItem(STORAGE_KEY);
+    if (stored === "light" || stored === "dark") return stored;
+  } catch {
+  }
+  const fromAttribute = document.documentElement.getAttribute(ATTRIBUTE);
+  if (fromAttribute === "light" || fromAttribute === "dark") return fromAttribute;
+  if (window.matchMedia("(prefers-color-scheme: dark)").matches) return "dark";
+  return defaultMode;
+}
+function GoabThemeProvider({
+  children,
+  defaultMode = "light"
+}) {
+  const [mode, setModeState] = react.useState(
+    () => readInitialMode(defaultMode)
+  );
+  react.useEffect(() => {
+    if (typeof document === "undefined") return;
+    document.documentElement.setAttribute(ATTRIBUTE, mode);
+    try {
+      window.localStorage.setItem(STORAGE_KEY, mode);
+    } catch {
+    }
+  }, [mode]);
+  const setMode = react.useCallback((next) => {
+    setModeState(next);
+  }, []);
+  const toggle = react.useCallback(() => {
+    setModeState((prev) => prev === "light" ? "dark" : "light");
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(GoabThemeContext.Provider, { value: { mode, setMode, toggle }, children });
+}
+function useTheme() {
+  const ctx = react.useContext(GoabThemeContext);
+  if (!ctx) {
+    throw new Error("useTheme must be used within a GoabThemeProvider");
+  }
+  return ctx;
+}
 exports.GoALinkButton = GoALinkButton;
 exports.GoabAccordion = GoabAccordion;
 exports.GoabAppFooter = GoabAppFooter;
@@ -4519,6 +4593,7 @@ exports.GoabTemporaryNotificationCtrl = GoabTemporaryNotificationCtrl;
 exports.GoabText = GoabText;
 exports.GoabTextArea = GoabTextArea;
 exports.GoabTextarea = GoabTextArea;
+exports.GoabThemeProvider = GoabThemeProvider;
 exports.GoabThreeColumnLayout = GoabThreeColumnLayout;
 exports.GoabTooltip = GoabTooltip;
 exports.GoabTwoColumnLayout = GoabTwoColumnLayout;
@@ -4528,4 +4603,5 @@ exports.GoabWorkSideMenuItem = GoabWorkSideMenuItem;
 exports.GoabWorkSideNotificationItem = GoabWorkSideNotificationItem;
 exports.GoabWorkSideNotificationPanel = GoabWorkSideNotificationPanel;
 exports.usePublicFormController = usePublicFormController;
+exports.useTheme = useTheme;
 //# sourceMappingURL=index.js.map