@abgov/react-components 6.11.0-dev.12 → 6.11.0-dev.15

package/experimental.mjs

@@ -1,6 +1,50 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { t as transformProps, l as lowercase, f as format, p as parseISO, i as isValid, k as kebab } from "./parseISO-BHUUf1QW.mjs";
 import { useRef, useEffect } from "react";
+import { t as transformProps, l as lowercase, C as CalendarDate, f as format, p as parseISO, i as isValid, k as kebab } from "./calendar-date-Chmr7h4a.mjs";
+function GoabxAppHeader({
+  onMenuClick,
+  children,
+  secondaryText,
+  ...rest
+}) {
+  const el = useRef(null);
+  const _props = transformProps(rest, lowercase);
+  useEffect(() => {
+    if (!el.current) {
+      return;
+    }
+    if (!onMenuClick) {
+      return;
+    }
+    const current = el.current;
+    const listener = () => {
+      onMenuClick == null ? void 0 : onMenuClick();
+    };
+    current.addEventListener("_menuClick", listener);
+    return () => {
+      current.removeEventListener("_menuClick", listener);
+    };
+  }, [el, onMenuClick]);
+  return /* @__PURE__ */ jsx(
+    "goa-app-header",
+    {
+      ref: el,
+      hasmenuclickhandler: onMenuClick ? "true" : "false",
+      secondarytext: secondaryText,
+      ..._props,
+      version: "2",
+      children
+    }
+  );
+}
+function GoabxAppHeaderMenu({
+  children,
+  slotName,
+  ...rest
+}) {
+  const _props = transformProps(rest, lowercase);
+  return /* @__PURE__ */ jsx("goa-app-header-menu", { slot: slotName, ..._props, children });
+}
 function getIconValue(icon, iconType) {
   if (icon !== void 0) {
     return icon ? "true" : "false";
@@ -263,7 +307,7 @@ function GoabxDatePicker({
   const formatValue = (val) => {
     if (!val) return "";
     if (val instanceof Date) {
-      return val.toISOString();
+      return new CalendarDate(val).toString();
     }
     return val;
   };
@@ -323,6 +367,45 @@ function GoabxDrawer({
     }
   );
 }
+function GoabxPushDrawer({
+  open,
+  heading,
+  width,
+  testId,
+  actions,
+  children,
+  onClose,
+  version = "2"
+}) {
+  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);
+    return () => {
+      var _a2;
+      (_a2 = el.current) == null ? void 0 : _a2.removeEventListener("_close", onClose);
+    };
+  }, [el, onClose]);
+  return /* @__PURE__ */ jsxs(
+    "goa-push-drawer",
+    {
+      ref: el,
+      open: open ? true : void 0,
+      heading: typeof heading === "string" ? heading : void 0,
+      width,
+      testid: testId,
+      version,
+      children: [
+        heading && typeof heading !== "string" && /* @__PURE__ */ jsx("div", { slot: "heading", children: heading }),
+        actions && /* @__PURE__ */ jsx("div", { slot: "actions", children: actions }),
+        children
+      ]
+    }
+  );
+}
 function stringify(value) {
   if (typeof value === "undefined") {
     return "";
@@ -1155,7 +1238,8 @@ function GoabxTabs({
   testId,
   onChange,
   variant,
-  orientation
+  orientation,
+  navigation
 }) {
   const ref = useRef(null);
   useEffect(() => {
@@ -1180,6 +1264,7 @@ function GoabxTabs({
       variant,
       version: "2",
       orientation,
+      navigation,
       children
     }
   );
@@ -1244,7 +1329,8 @@ function GoabxWorkSideMenu({
   secondaryContent,
   accountContent,
   open,
-  onToggle
+  onToggle,
+  onNavigate
 }) {
   const el = useRef(null);
   useEffect(() => {
@@ -1258,6 +1344,20 @@ function GoabxWorkSideMenu({
       (_a2 = el.current) == null ? void 0 : _a2.removeEventListener("_toggle", onToggle);
     };
   }, [el, onToggle]);
+  useEffect(() => {
+    var _a;
+    if (!(el == null ? void 0 : el.current) || !onNavigate) {
+      return;
+    }
+    const handler = (e) => {
+      onNavigate(e.detail.url);
+    };
+    (_a = el.current) == null ? void 0 : _a.addEventListener("_navigate", handler);
+    return () => {
+      var _a2;
+      (_a2 = el.current) == null ? void 0 : _a2.removeEventListener("_navigate", handler);
+    };
+  }, [el, onNavigate]);
   return /* @__PURE__ */ jsxs(
     "goa-work-side-menu",
     {
@@ -1277,7 +1377,7 @@ function GoabxWorkSideMenu({
   );
 }
 function GoabxWorkSideMenuItem(props) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "goa-work-side-menu-item",
     {
       label: props.label,
@@ -1288,7 +1388,10 @@ function GoabxWorkSideMenuItem(props) {
       icon: props.icon,
       testid: props.testId,
       type: props.type,
-      children: props.children
+      children: [
+        props.popoverContent && /* @__PURE__ */ jsx("div", { slot: "popoverContent", children: props.popoverContent }),
+        props.children
+      ]
     }
   );
 }
@@ -1304,10 +1407,84 @@ function GoabxWorkSideMenuGroup(props) {
     }
   );
 }
+function GoabxWorkSideNotificationPanel({
+  heading,
+  activeTab,
+  testId,
+  children,
+  onMarkAllRead,
+  onViewAll
+}) {
+  const el = useRef(null);
+  useEffect(() => {
+    if (!el.current) return;
+    const handleMarkAllRead = () => {
+      onMarkAllRead == null ? void 0 : onMarkAllRead();
+    };
+    const handleViewAll = () => {
+      onViewAll == null ? void 0 : onViewAll();
+    };
+    el.current.addEventListener("_markAllRead", handleMarkAllRead);
+    el.current.addEventListener("_viewAll", handleViewAll);
+    return () => {
+      var _a, _b;
+      (_a = el.current) == null ? void 0 : _a.removeEventListener("_markAllRead", handleMarkAllRead);
+      (_b = el.current) == null ? void 0 : _b.removeEventListener("_viewAll", handleViewAll);
+    };
+  }, [el, onMarkAllRead, onViewAll]);
+  return /* @__PURE__ */ jsx(
+    "goa-work-side-notification-panel",
+    {
+      ref: el,
+      heading,
+      "active-tab": activeTab,
+      testid: testId,
+      children
+    }
+  );
+}
+function GoabxWorkSideNotificationItem({
+  type,
+  timestamp,
+  title,
+  description,
+  readStatus,
+  priority,
+  testId,
+  onClick
+}) {
+  const el = useRef(null);
+  useEffect(() => {
+    if (!el.current) return;
+    const handleClick = () => {
+      onClick == null ? void 0 : onClick();
+    };
+    el.current.addEventListener("_click", handleClick);
+    return () => {
+      var _a;
+      (_a = el.current) == null ? void 0 : _a.removeEventListener("_click", handleClick);
+    };
+  }, [el, onClick]);
+  return /* @__PURE__ */ jsx(
+    "goa-work-side-notification-item",
+    {
+      ref: el,
+      type,
+      timestamp,
+      title,
+      description,
+      "read-status": readStatus,
+      priority,
+      testid: testId
+    }
+  );
+}
 export {
   GoabxAppFooter,
   GoabxAppFooterMetaSection,
   GoabxAppFooterNavSection,
+  GoabxAppHeader,
+  GoabxAppHeaderMenu,
   GoabxBadge,
   GoabxButton,
   GoabxCalendar,
@@ -1343,6 +1520,7 @@ export {
   GoabxModal,
   GoabxNotification,
   GoabxPagination,
+  GoabxPushDrawer,
   GoabxRadioGroup,
   GoabxRadioItem,
   GoabxSideMenu,
@@ -1355,6 +1533,8 @@ export {
   GoabxTextArea,
   GoabxWorkSideMenu,
   GoabxWorkSideMenuGroup,
-  GoabxWorkSideMenuItem
+  GoabxWorkSideMenuItem,
+  GoabxWorkSideNotificationItem,
+  GoabxWorkSideNotificationPanel
 };
 //# sourceMappingURL=experimental.mjs.map