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

package/experimental/work-side-notification-item/work-side-notification-item.d.ts

@@ -0,0 +1,31 @@
+import { JSX } from 'react';
+import { GoabWorkSideNotificationItemType, GoabWorkSideNotificationReadStatus, GoabWorkSideNotificationPriority } from '@abgov/ui-components-common';
+interface WCProps {
+    type?: GoabWorkSideNotificationItemType;
+    timestamp?: string;
+    title?: string;
+    description: string;
+    "read-status"?: GoabWorkSideNotificationReadStatus;
+    priority?: GoabWorkSideNotificationPriority;
+    testid?: string;
+    ref: React.RefObject<HTMLElement | null>;
+}
+declare module "react" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-work-side-notification-item": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface GoabWorkSideNotificationItemProps {
+    type?: GoabWorkSideNotificationItemType;
+    timestamp?: string;
+    title?: string;
+    description: string;
+    readStatus?: GoabWorkSideNotificationReadStatus;
+    priority?: GoabWorkSideNotificationPriority;
+    testId?: string;
+    onClick?: () => void;
+}
+export declare function GoabxWorkSideNotificationItem({ type, timestamp, title, description, readStatus, priority, testId, onClick, }: GoabWorkSideNotificationItemProps): JSX.Element;
+export default GoabxWorkSideNotificationItem;

package/experimental/work-side-notification-panel/work-side-notification-panel.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode, JSX } from 'react';
+import { GoabWorkSideNotificationActiveTabType } from '@abgov/ui-components-common';
+interface WCProps {
+    heading?: string;
+    "active-tab"?: GoabWorkSideNotificationActiveTabType;
+    testid?: string;
+    ref: React.RefObject<HTMLElement | null>;
+}
+declare module "react" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-work-side-notification-panel": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface GoabWorkSideNotificationPanelProps {
+    heading?: string;
+    activeTab?: GoabWorkSideNotificationActiveTabType;
+    testId?: string;
+    children?: ReactNode;
+    onMarkAllRead?: () => void;
+    onViewAll?: () => void;
+}
+export declare function GoabxWorkSideNotificationPanel({ heading, activeTab, testId, children, onMarkAllRead, onViewAll, }: GoabWorkSideNotificationPanelProps): JSX.Element;
+export default GoabxWorkSideNotificationPanel;

package/experimental.js

@@ -1,8 +1,52 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const parseISO = require("./parseISO-Dj57mwuH.js");
 const react = require("react");
+const calendarDate = require("./calendar-date-IMhR_PA6.js");
+function GoabxAppHeader({
+  onMenuClick,
+  children,
+  secondaryText,
+  ...rest
+}) {
+  const el = react.useRef(null);
+  const _props = calendarDate.transformProps(rest, calendarDate.lowercase);
+  react.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__ */ jsxRuntime.jsx(
+    "goa-app-header",
+    {
+      ref: el,
+      hasmenuclickhandler: onMenuClick ? "true" : "false",
+      secondarytext: secondaryText,
+      ..._props,
+      version: "2",
+      children
+    }
+  );
+}
+function GoabxAppHeaderMenu({
+  children,
+  slotName,
+  ...rest
+}) {
+  const _props = calendarDate.transformProps(rest, calendarDate.lowercase);
+  return /* @__PURE__ */ jsxRuntime.jsx("goa-app-header-menu", { slot: slotName, ..._props, children });
+}
 function getIconValue(icon, iconType) {
   if (icon !== void 0) {
     return icon ? "true" : "false";
@@ -17,7 +61,7 @@ function GoabxBadge({
   version = "2",
   ...rest
 }) {
-  const _props = parseISO.transformProps({ size, emphasis, ...rest }, parseISO.lowercase);
+  const _props = calendarDate.transformProps({ size, emphasis, ...rest }, calendarDate.lowercase);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "goa-badge",
     {
@@ -40,7 +84,7 @@ function GoabxButton({
   ...rest
 }) {
   const el = react.useRef(null);
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
+  const _props = calendarDate.transformProps(rest, calendarDate.lowercase);
   react.useEffect(() => {
     if (!el.current) {
       return;
@@ -79,7 +123,7 @@ function GoabxCalendar({
   ...rest
 }) {
   const ref = react.useRef(null);
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
+  const _props = calendarDate.transformProps(rest, calendarDate.lowercase);
   react.useEffect(() => {
     if (!ref.current) {
       return;
@@ -118,9 +162,9 @@ const GoabxCallout = ({
   version = "2",
   ...rest
 }) => {
-  const _props = parseISO.transformProps(
+  const _props = calendarDate.transformProps(
     { type, icontheme: iconTheme, size, arialive: ariaLive, emphasis, ...rest },
-    parseISO.lowercase
+    calendarDate.lowercase
   );
   return /* @__PURE__ */ jsxRuntime.jsx("goa-callout", { ..._props, version, children });
 };
@@ -140,7 +184,7 @@ function GoabxCheckbox({
   ...rest
 }) {
   const el = react.useRef(null);
-  const _props = parseISO.transformProps({ size, ...rest }, parseISO.lowercase);
+  const _props = calendarDate.transformProps({ size, ...rest }, calendarDate.lowercase);
   react.useEffect(() => {
     if (!el.current) {
       return;
@@ -236,7 +280,7 @@ function GoabxDatePicker({
   ...rest
 }) {
   const ref = react.useRef(null);
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
+  const _props = calendarDate.transformProps(rest, calendarDate.lowercase);
   react.useEffect(() => {
     if (value && typeof value !== "string") {
       console.warn(
@@ -265,7 +309,7 @@ function GoabxDatePicker({
   const formatValue = (val) => {
     if (!val) return "";
     if (val instanceof Date) {
-      return val.toISOString();
+      return new calendarDate.CalendarDate(val).toString();
     }
     return val;
   };
@@ -325,6 +369,45 @@ function GoabxDrawer({
     }
   );
 }
+function GoabxPushDrawer({
+  open,
+  heading,
+  width,
+  testId,
+  actions,
+  children,
+  onClose,
+  version = "2"
+}) {
+  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);
+    return () => {
+      var _a2;
+      (_a2 = el.current) == null ? void 0 : _a2.removeEventListener("_close", onClose);
+    };
+  }, [el, onClose]);
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { slot: "heading", children: heading }),
+        actions && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "actions", children: actions }),
+        children
+      ]
+    }
+  );
+}
 function stringify(value) {
   if (typeof value === "undefined") {
     return "";
@@ -349,7 +432,7 @@ function GoabxDropdown({
   ...rest
 }) {
   const el = react.useRef(null);
-  const _props = parseISO.transformProps({ size, ...rest }, parseISO.lowercase);
+  const _props = calendarDate.transformProps({ size, ...rest }, calendarDate.lowercase);
   react.useEffect(() => {
     if (!el.current) {
       return;
@@ -417,7 +500,7 @@ function GoabxFileUploadCard({
   ...rest
 }) {
   const el = react.useRef(null);
-  const _props = parseISO.transformProps({ filename, ...rest }, parseISO.lowercase);
+  const _props = calendarDate.transformProps({ filename, ...rest }, calendarDate.lowercase);
   react.useEffect(() => {
     if (!el.current) return;
     const current = el.current;
@@ -438,7 +521,7 @@ function GoabxFileUploadInput({
   ...rest
 }) {
   const el = react.useRef(null);
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
+  const _props = calendarDate.transformProps(rest, calendarDate.lowercase);
   react.useEffect(() => {
     if (!el.current) return;
     const current = el.current;
@@ -461,9 +544,9 @@ const GoabxFilterChip = ({
   ...rest
 }) => {
   const el = react.useRef(null);
-  const _props = parseISO.transformProps(
+  const _props = calendarDate.transformProps(
     { icontheme: iconTheme, ...rest },
-    parseISO.lowercase
+    calendarDate.lowercase
   );
   react.useEffect(() => {
     if (!el.current) return;
@@ -493,7 +576,7 @@ function GoabxFormItem({
   version = "2",
   ...rest
 }) {
-  const _props = parseISO.transformProps({ type, ...rest }, parseISO.lowercase);
+  const _props = calendarDate.transformProps({ type, ...rest }, calendarDate.lowercase);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "goa-form-item",
     {
@@ -511,21 +594,21 @@ function GoabxFormItem({
   );
 }
 function GoabxAppFooter({ children, ...rest }) {
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
+  const _props = calendarDate.transformProps(rest, calendarDate.lowercase);
   return /* @__PURE__ */ jsxRuntime.jsx("goa-app-footer", { ..._props, version: "2", children });
 }
 function GoabxAppFooterMetaSection({
   children,
   ...rest
 }) {
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
+  const _props = calendarDate.transformProps(rest, calendarDate.lowercase);
   return /* @__PURE__ */ jsxRuntime.jsx("goa-app-footer-meta-section", { slot: "meta", ..._props, children });
 }
 function GoabxAppFooterNavSection({
   children,
   ...rest
 }) {
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
+  const _props = calendarDate.transformProps(rest, calendarDate.lowercase);
   return /* @__PURE__ */ jsxRuntime.jsx("goa-app-footer-nav-section", { slot: "nav", ..._props, children });
 }
 function GoabxInput({
@@ -547,9 +630,9 @@ function GoabxInput({
   ...rest
 }) {
   const ref = react.useRef(null);
-  const _props = parseISO.transformProps(
+  const _props = calendarDate.transformProps(
     { variant, textalign: textAlign, size, ...rest },
-    parseISO.lowercase
+    calendarDate.lowercase
   );
   react.useEffect(() => {
     if (!ref.current) {
@@ -612,11 +695,11 @@ const onDateChangeHandler = (onChange) => {
       onChange == null ? void 0 : onChange({ name, value: "", event });
       return;
     }
-    if (typeof value === "string" && parseISO.isValid(new Date(value))) {
-      onChange == null ? void 0 : onChange({ name, value: parseISO.parseISO(value), event });
+    if (typeof value === "string" && calendarDate.isValid(new Date(value))) {
+      onChange == null ? void 0 : onChange({ name, value: calendarDate.parseISO(value), event });
       return;
     }
-    if (parseISO.isValid(value)) {
+    if (calendarDate.isValid(value)) {
       onChange == null ? void 0 : onChange({ name, value, event });
       return;
     }
@@ -636,12 +719,12 @@ function toString(value, tmpl = "yyyy-MM-dd") {
     return "";
   }
   if (typeof value === "string") {
-    return parseISO.format(parseISO.parseISO(value), tmpl);
+    return calendarDate.format(calendarDate.parseISO(value), tmpl);
   }
   if (value.toISOString() === (/* @__PURE__ */ new Date(0)).toISOString()) {
     return "";
   }
-  return parseISO.format(value, tmpl);
+  return calendarDate.format(value, tmpl);
 }
 function GoabxInputText(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(GoabxInput, { ...props, type: "text" });
@@ -783,7 +866,7 @@ function GoabxLink({
   children,
   ...rest
 }) {
-  const _props = parseISO.transformProps({ color, size, ...rest }, parseISO.lowercase);
+  const _props = calendarDate.transformProps({ color, size, ...rest }, calendarDate.lowercase);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "goa-link",
     {
@@ -795,7 +878,7 @@ function GoabxLink({
   );
 }
 function GoabxMenuAction(props) {
-  const _props = parseISO.transformProps(props, parseISO.lowercase);
+  const _props = calendarDate.transformProps(props, calendarDate.lowercase);
   return /* @__PURE__ */ jsxRuntime.jsx("goa-menu-action", { ..._props });
 }
 function GoabxMenuButton({
@@ -806,9 +889,9 @@ function GoabxMenuButton({
   ...rest
 }) {
   const el = react.useRef(null);
-  const _props = parseISO.transformProps(
+  const _props = calendarDate.transformProps(
     { type, testid: testId, ...rest },
-    parseISO.kebab
+    calendarDate.kebab
   );
   react.useEffect(() => {
     if (!el.current) {
@@ -1013,7 +1096,7 @@ function GoabxRadioGroup({
   ...rest
 }) {
   const el = react.useRef(null);
-  const _props = parseISO.transformProps({ size, ...rest }, parseISO.lowercase);
+  const _props = calendarDate.transformProps({ size, ...rest }, calendarDate.lowercase);
   react.useEffect(() => {
     if (!el.current) return;
     const listener = (e) => {
@@ -1157,7 +1240,8 @@ function GoabxTabs({
   testId,
   onChange,
   variant,
-  orientation
+  orientation,
+  navigation
 }) {
   const ref = react.useRef(null);
   react.useEffect(() => {
@@ -1182,6 +1266,7 @@ function GoabxTabs({
       variant,
       version: "2",
       orientation,
+      navigation,
       children
     }
   );
@@ -1197,7 +1282,7 @@ function GoabxTextArea({
   ...rest
 }) {
   const el = react.useRef(null);
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
+  const _props = calendarDate.transformProps(rest, calendarDate.lowercase);
   react.useEffect(() => {
     if (!el.current) {
       return;
@@ -1246,7 +1331,8 @@ function GoabxWorkSideMenu({
   secondaryContent,
   accountContent,
   open,
-  onToggle
+  onToggle,
+  onNavigate
 }) {
   const el = react.useRef(null);
   react.useEffect(() => {
@@ -1260,6 +1346,20 @@ function GoabxWorkSideMenu({
       (_a2 = el.current) == null ? void 0 : _a2.removeEventListener("_toggle", onToggle);
     };
   }, [el, onToggle]);
+  react.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__ */ jsxRuntime.jsxs(
     "goa-work-side-menu",
     {
@@ -1279,7 +1379,7 @@ function GoabxWorkSideMenu({
   );
 }
 function GoabxWorkSideMenuItem(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "goa-work-side-menu-item",
     {
       label: props.label,
@@ -1290,7 +1390,10 @@ function GoabxWorkSideMenuItem(props) {
       icon: props.icon,
       testid: props.testId,
       type: props.type,
-      children: props.children
+      children: [
+        props.popoverContent && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "popoverContent", children: props.popoverContent }),
+        props.children
+      ]
     }
   );
 }
@@ -1306,9 +1409,83 @@ function GoabxWorkSideMenuGroup(props) {
     }
   );
 }
+function GoabxWorkSideNotificationPanel({
+  heading,
+  activeTab,
+  testId,
+  children,
+  onMarkAllRead,
+  onViewAll
+}) {
+  const el = react.useRef(null);
+  react.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__ */ jsxRuntime.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 = react.useRef(null);
+  react.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__ */ jsxRuntime.jsx(
+    "goa-work-side-notification-item",
+    {
+      ref: el,
+      type,
+      timestamp,
+      title,
+      description,
+      "read-status": readStatus,
+      priority,
+      testid: testId
+    }
+  );
+}
 exports.GoabxAppFooter = GoabxAppFooter;
 exports.GoabxAppFooterMetaSection = GoabxAppFooterMetaSection;
 exports.GoabxAppFooterNavSection = GoabxAppFooterNavSection;
+exports.GoabxAppHeader = GoabxAppHeader;
+exports.GoabxAppHeaderMenu = GoabxAppHeaderMenu;
 exports.GoabxBadge = GoabxBadge;
 exports.GoabxButton = GoabxButton;
 exports.GoabxCalendar = GoabxCalendar;
@@ -1344,6 +1521,7 @@ exports.GoabxMenuButton = GoabxMenuButton;
 exports.GoabxModal = GoabxModal;
 exports.GoabxNotification = GoabxNotification;
 exports.GoabxPagination = GoabxPagination;
+exports.GoabxPushDrawer = GoabxPushDrawer;
 exports.GoabxRadioGroup = GoabxRadioGroup;
 exports.GoabxRadioItem = GoabxRadioItem;
 exports.GoabxSideMenu = GoabxSideMenu;
@@ -1357,4 +1535,6 @@ exports.GoabxTextArea = GoabxTextArea;
 exports.GoabxWorkSideMenu = GoabxWorkSideMenu;
 exports.GoabxWorkSideMenuGroup = GoabxWorkSideMenuGroup;
 exports.GoabxWorkSideMenuItem = GoabxWorkSideMenuItem;
+exports.GoabxWorkSideNotificationItem = GoabxWorkSideNotificationItem;
+exports.GoabxWorkSideNotificationPanel = GoabxWorkSideNotificationPanel;
 //# sourceMappingURL=experimental.js.map