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

package/index.mjs

@@ -9,7 +9,7 @@ var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
 var _PublicFormController_instances, updateObjectListState_fn, dispatchError_fn;
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useRef, useEffect, useLayoutEffect, useState, useCallback } from "react";
+import { useRef, useEffect, useLayoutEffect, useState, useCallback, createContext, useContext } from "react";
 const lowercase = (input) => input.toLowerCase();
 const kebab = (input) => input.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 function transformProps(props, transform = lowercase) {
@@ -28,6 +28,8 @@ function GoabAccordion({
   open,
   onChange,
   headingContent,
+  headingType,
+  actions,
   children,
   ...rest
 }) {
@@ -46,10 +48,20 @@ function GoabAccordion({
       };
     }
   }, [onChange]);
-  return /* @__PURE__ */ jsxs("goa-accordion", { ref, open: open ? "true" : void 0, ..._props, children: [
-    headingContent && /* @__PURE__ */ jsx("div", { slot: "headingcontent", children: headingContent }),
-    children
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "goa-accordion",
+    {
+      ref,
+      open: open ? "true" : void 0,
+      "heading-type": headingType,
+      ..._props,
+      children: [
+        headingContent && /* @__PURE__ */ jsx("div", { slot: "headingcontent", children: headingContent }),
+        actions && /* @__PURE__ */ jsx("div", { slot: "actions", children: actions }),
+        children
+      ]
+    }
+  );
 }
 function GoabAppHeader({
   onMenuClick,
@@ -2676,14 +2688,19 @@ function GoabDrawer({
 }) {
   const el = useRef(null);
   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__ */ jsxs(
@@ -3121,9 +3138,10 @@ function GoabHeroBanner({
   backgroundColor,
   textColor,
   children,
+  actions,
   testId
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "goa-hero-banner",
     {
       heading,
@@ -3133,7 +3151,10 @@ function GoabHeroBanner({
       backgroundcolor: backgroundColor,
       textcolor: textColor,
       testid: testId,
-      children
+      children: [
+        children,
+        actions && /* @__PURE__ */ jsx("div", { slot: "actions", children: actions })
+      ]
     }
   );
 }
@@ -3574,7 +3595,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);
@@ -3725,14 +3749,19 @@ function GoabPushDrawer({
 }) {
   const el = useRef(null);
   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__ */ jsxs(
@@ -3984,6 +4013,7 @@ function GoabTableSortHeader({
       name,
       direction,
       "sort-order": sortOrder,
+      version: "2",
       ...rest,
       children
     }
@@ -4284,30 +4314,28 @@ function GoabWorkSideMenu({
 }) {
   const el = useRef(null);
   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]);
   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__ */ jsxs(
     "goa-work-side-menu",
     {
@@ -4352,6 +4380,7 @@ function GoabWorkSideMenuItem(props) {
       type: props.type,
       children: [
         props.popoverContent && /* @__PURE__ */ jsx("div", { slot: "popoverContent", children: props.popoverContent }),
+        props.trailingContent && /* @__PURE__ */ jsx("div", { slot: "trailingContent", children: props.trailingContent }),
         props.children
       ]
     }
@@ -4429,6 +4458,51 @@ function GoabWorkSideNotificationPanel({
     }
   );
 }
+const STORAGE_KEY = "goab-theme";
+const ATTRIBUTE = "data-theme";
+const GoabThemeContext = 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] = useState(
+    () => readInitialMode(defaultMode)
+  );
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    document.documentElement.setAttribute(ATTRIBUTE, mode);
+    try {
+      window.localStorage.setItem(STORAGE_KEY, mode);
+    } catch {
+    }
+  }, [mode]);
+  const setMode = useCallback((next) => {
+    setModeState(next);
+  }, []);
+  const toggle = useCallback(() => {
+    setModeState((prev) => prev === "light" ? "dark" : "light");
+  }, []);
+  return /* @__PURE__ */ jsx(GoabThemeContext.Provider, { value: { mode, setMode, toggle }, children });
+}
+function useTheme() {
+  const ctx = useContext(GoabThemeContext);
+  if (!ctx) {
+    throw new Error("useTheme must be used within a GoabThemeProvider");
+  }
+  return ctx;
+}
 export {
   GoALinkButton,
   GoabAccordion,
@@ -4518,6 +4592,7 @@ export {
   GoabText,
   GoabTextArea,
   GoabTextArea as GoabTextarea,
+  GoabThemeProvider,
   GoabThreeColumnLayout,
   GoabTooltip,
   GoabTwoColumnLayout,
@@ -4526,6 +4601,7 @@ export {
   GoabWorkSideMenuItem,
   GoabWorkSideNotificationItem,
   GoabWorkSideNotificationPanel,
-  usePublicFormController
+  usePublicFormController,
+  useTheme
 };
 //# sourceMappingURL=index.mjs.map