@abgov/react-components 7.2.0-dev.2 → 7.2.0-dev.21

package/index.d.ts

@@ -62,6 +62,7 @@ export * from './lib/side-menu/side-menu';
 export * from './lib/skeleton/skeleton';
 export * from './lib/spacer/spacer';
 export * from './lib/spinner/spinner';
+export * from './lib/scroll-panel/scroll-panel';
 export * from './lib/table/table';
 export * from './lib/table/table-sort-header';
 export * from './lib/tabs/tabs';
@@ -79,3 +80,5 @@ 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';
+export * from './lib/workspace-layout/workspace-layout';

package/index.js

@@ -30,6 +30,8 @@ function GoabAccordion({
   open,
   onChange,
   headingContent,
+  headingType,
+  actions,
   children,
   ...rest
 }) {
@@ -48,15 +50,41 @@ 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 renderSlottedItems(children, slot) {
+  return react.Children.map(children, (child) => {
+    if (!react.isValidElement(child)) {
+      return child;
+    }
+    if (child.type === react.Fragment) {
+      const fragment = child;
+      return renderSlottedItems(fragment.props.children, slot);
+    }
+    return react.cloneElement(child, { slot });
+  });
 }
 function GoabAppHeader({
   onMenuClick,
   children,
   secondaryText,
+  banner,
+  phase,
+  navigation,
+  utilities,
   ...rest
 }) {
   const el = react.useRef(null);
@@ -77,7 +105,7 @@ function GoabAppHeader({
       current.removeEventListener("_menuClick", listener);
     };
   }, [el, onMenuClick]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "goa-app-header",
     {
       ref: el,
@@ -85,7 +113,13 @@ function GoabAppHeader({
       secondarytext: secondaryText,
       ..._props,
       version: "2",
-      children
+      children: [
+        children,
+        banner && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "banner", children: banner }),
+        phase && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "phase", children: phase }),
+        navigation && renderSlottedItems(navigation, "navigation"),
+        utilities && renderSlottedItems(utilities, "utilities")
+      ]
     }
   );
 }
@@ -123,9 +157,14 @@ function GoabBadge({
     }
   );
 }
-function GoabBlock({ testId, children, ...rest }) {
+function GoabBlock({
+  testId,
+  stretch,
+  children,
+  ...rest
+}) {
   const _props = transformProps({ testid: testId, ...rest }, kebab);
-  return /* @__PURE__ */ jsxRuntime.jsx("goa-block", { ..._props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("goa-block", { ..._props, stretch: stretch ? "true" : void 0, children });
 }
 function GoabButton({
   disabled,
@@ -234,6 +273,8 @@ function GoabCheckbox({
   description,
   reveal,
   onChange,
+  onFocus,
+  onBlur,
   name,
   children,
   size = "default",
@@ -250,11 +291,23 @@ function GoabCheckbox({
       const detail = e.detail;
       onChange == null ? void 0 : onChange({ ...detail, event: e });
     };
+    const focusListener = (e) => {
+      const detail = e.detail;
+      onFocus == null ? void 0 : onFocus({ ...detail, event: e });
+    };
+    const blurListener = (e) => {
+      const detail = e.detail;
+      onBlur == null ? void 0 : onBlur({ ...detail, event: e });
+    };
     current.addEventListener("_change", listener);
+    current.addEventListener("_focus", focusListener);
+    current.addEventListener("_blur", blurListener);
     return () => {
       current.removeEventListener("_change", listener);
+      current.removeEventListener("_focus", focusListener);
+      current.removeEventListener("_blur", blurListener);
     };
-  }, [name, onChange]);
+  }, [name, onChange, onFocus, onBlur]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "goa-checkbox",
     {
@@ -286,6 +339,8 @@ function GoabCheckboxList({
   size = "default",
   children,
   onChange,
+  onFocus,
+  onBlur,
   mt,
   mr,
   mb,
@@ -299,11 +354,23 @@ function GoabCheckboxList({
       const detail = e.detail;
       onChange == null ? void 0 : onChange({ ...detail, event: e });
     };
+    const focusListener = (e) => {
+      const detail = e.detail;
+      onFocus == null ? void 0 : onFocus({ ...detail, event: e });
+    };
+    const blurListener = (e) => {
+      const detail = e.detail;
+      onBlur == null ? void 0 : onBlur({ ...detail, event: e });
+    };
     current.addEventListener("_change", listener);
+    current.addEventListener("_focus", focusListener);
+    current.addEventListener("_blur", blurListener);
     return () => {
       current.removeEventListener("_change", listener);
+      current.removeEventListener("_focus", focusListener);
+      current.removeEventListener("_blur", blurListener);
     };
-  }, [onChange]);
+  }, [onChange, onFocus, onBlur]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "goa-checkbox-list",
     {
@@ -400,6 +467,9 @@ function GoabDataGrid({
     }
   );
 }
+const GoabWorkspaceLayoutScrollState = {
+  NO_SCROLL: "no-scroll"
+};
 function dispatch(el, eventName, detail, opts) {
   if (!el) {
     console.error("dispatch element is null");
@@ -2599,6 +2669,8 @@ function GoabDatePicker({
   disabled,
   relative,
   onChange,
+  onFocus,
+  onBlur,
   ...rest
 }) {
   const ref = react.useRef(null);
@@ -2619,15 +2691,27 @@ function GoabDatePicker({
       const detail = e.detail;
       onChange == null ? void 0 : onChange({ ...detail, event: e });
     };
+    const handleFocus = (e) => {
+      const detail = e.detail;
+      onFocus == null ? void 0 : onFocus({ ...detail, event: e });
+    };
+    const handleBlur = (e) => {
+      const detail = e.detail;
+      onBlur == null ? void 0 : onBlur({ ...detail, event: e });
+    };
     if (onChange) {
       current.addEventListener("_change", handleChange);
     }
+    current.addEventListener("_focus", handleFocus);
+    current.addEventListener("_blur", handleBlur);
     return () => {
       if (onChange) {
         current.removeEventListener("_change", handleChange);
       }
+      current.removeEventListener("_focus", handleFocus);
+      current.removeEventListener("_blur", handleBlur);
     };
-  }, [onChange]);
+  }, [onChange, onFocus, onBlur]);
   const formatValue = (val) => {
     if (!val) return "";
     if (val instanceof Date) {
@@ -2723,6 +2807,8 @@ function stringify(value) {
 function GoabDropdown({
   value,
   onChange,
+  onFocus,
+  onBlur,
   disabled,
   error,
   filterable,
@@ -2744,15 +2830,27 @@ function GoabDropdown({
       const detail = e.detail;
       onChange == null ? void 0 : onChange({ ...detail, event: e });
     };
+    const focusListener = (e) => {
+      const detail = e.detail;
+      onFocus == null ? void 0 : onFocus({ ...detail, event: e });
+    };
+    const blurListener = (e) => {
+      const detail = e.detail;
+      onBlur == null ? void 0 : onBlur({ ...detail, event: e });
+    };
     if (onChange) {
       current.addEventListener("_change", handler);
     }
+    current.addEventListener("_focus", focusListener);
+    current.addEventListener("_blur", blurListener);
     return () => {
       if (onChange) {
         current.removeEventListener("_change", handler);
       }
+      current.removeEventListener("_focus", focusListener);
+      current.removeEventListener("_blur", blurListener);
     };
-  }, [el, onChange]);
+  }, [el, onChange, onFocus, onBlur]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "goa-dropdown",
     {
@@ -2781,7 +2879,8 @@ function GoabDropdownItem({
   label,
   filter,
   name,
-  mountType = "append"
+  mountType = "append",
+  children
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "goa-dropdown-item",
@@ -2790,7 +2889,8 @@ function GoabDropdownItem({
       label,
       filter,
       name,
-      mount: mountType
+      mount: mountType,
+      children
     }
   );
 }
@@ -3821,6 +3921,8 @@ function GoabRadioGroup({
   disabled,
   error,
   onChange,
+  onFocus,
+  onBlur,
   name,
   children,
   size = "default",
@@ -3834,16 +3936,28 @@ function GoabRadioGroup({
       const detail = e.detail;
       onChange == null ? void 0 : onChange({ ...detail, event: e });
     };
+    const focusListener = (e) => {
+      const detail = e.detail;
+      onFocus == null ? void 0 : onFocus({ ...detail, event: e });
+    };
+    const blurListener = (e) => {
+      const detail = e.detail;
+      onBlur == null ? void 0 : onBlur({ ...detail, event: e });
+    };
     const currentEl = el.current;
     if (onChange) {
       currentEl.addEventListener("_change", listener);
     }
+    currentEl.addEventListener("_focus", focusListener);
+    currentEl.addEventListener("_blur", blurListener);
     return () => {
       if (onChange) {
         currentEl.removeEventListener("_change", listener);
       }
+      currentEl.removeEventListener("_focus", focusListener);
+      currentEl.removeEventListener("_blur", blurListener);
     };
-  }, [name, onChange]);
+  }, [name, onChange, onFocus, onBlur]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "goa-radio-group",
     {
@@ -3950,6 +4064,21 @@ function GoabSpinner({
     }
   );
 }
+function GoabScrollPanel({
+  header,
+  children,
+  footer,
+  height,
+  testId,
+  ...rest
+}) {
+  const hostStyle = height ? { height } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("goa-scroll-panel", { height, testid: testId, style: hostStyle, ...rest, children: [
+    header && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "header", children: header }),
+    children,
+    footer && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "footer", children: footer })
+  ] });
+}
 function GoabTable({ onSort, onMultiSort, sortMode, ...props }) {
   const ref = react.useRef(null);
   react.useEffect(() => {
@@ -4003,6 +4132,7 @@ function GoabTableSortHeader({
       name,
       direction,
       "sort-order": sortOrder,
+      version: "2",
       ...rest,
       children
     }
@@ -4091,6 +4221,7 @@ function GoabTextArea({
   error,
   onChange,
   onKeyPress,
+  onFocus,
   onBlur,
   ...rest
 }) {
@@ -4109,19 +4240,25 @@ function GoabTextArea({
       const detail = e.detail;
       onKeyPress == null ? void 0 : onKeyPress({ ...detail, event: e });
     };
+    const focusListener = (e) => {
+      const detail = e.detail;
+      onFocus == null ? void 0 : onFocus({ ...detail, event: e });
+    };
     const blurListener = (e) => {
       const detail = e.detail;
       onBlur == null ? void 0 : onBlur({ ...detail, event: e });
     };
     current.addEventListener("_change", changeListener);
     current.addEventListener("_keyPress", keypressListener);
+    current.addEventListener("_focus", focusListener);
     current.addEventListener("_blur", blurListener);
     return () => {
       current.removeEventListener("_change", changeListener);
       current.removeEventListener("_keyPress", keypressListener);
+      current.removeEventListener("_focus", focusListener);
       current.removeEventListener("_blur", blurListener);
     };
-  }, [el, onChange, onKeyPress, onBlur]);
+  }, [el, onChange, onKeyPress, onFocus, onBlur]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "goa-textarea",
     {
@@ -4303,30 +4440,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",
     {
@@ -4371,6 +4506,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
       ]
     }
@@ -4448,6 +4584,95 @@ 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;
+}
+const GoabWorkspaceLayoutScrollStateDefault = {
+  scrollPosition: GoabWorkspaceLayoutScrollState.NO_SCROLL,
+  isScrollable: false
+};
+const GoabWorkspaceLayoutScrollStateContext = react.createContext(
+  GoabWorkspaceLayoutScrollStateDefault
+);
+function useGoabWorkspaceLayoutScrollState() {
+  return react.useContext(GoabWorkspaceLayoutScrollStateContext);
+}
+function GoabWorkspaceLayout({
+  sideMenu,
+  pageHeader,
+  pageFooter,
+  pushDrawer,
+  children,
+  testId,
+  onScrollStateChange,
+  ...rest
+}) {
+  const ref = react.useRef(null);
+  const [scrollState, setScrollState] = react.useState(GoabWorkspaceLayoutScrollStateDefault);
+  react.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const listener = (e) => {
+      const detail = e.detail;
+      setScrollState({
+        scrollPosition: detail.state,
+        isScrollable: detail.isScrollable
+      });
+      onScrollStateChange == null ? void 0 : onScrollStateChange({ ...detail, event: e });
+    };
+    el.addEventListener("_scrollStateChange", listener);
+    return () => el.removeEventListener("_scrollStateChange", listener);
+  }, [onScrollStateChange]);
+  return /* @__PURE__ */ jsxRuntime.jsx(GoabWorkspaceLayoutScrollStateContext.Provider, { value: scrollState, children: /* @__PURE__ */ jsxRuntime.jsxs("goa-workspace-layout", { ref, testid: testId, ...rest, children: [
+    sideMenu && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "side-menu", children: sideMenu }),
+    pageHeader && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "page-header", children: pageHeader }),
+    children,
+    pageFooter && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "page-footer", children: pageFooter }),
+    pushDrawer && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "push-drawer", children: pushDrawer })
+  ] }) });
+}
 exports.GoALinkButton = GoALinkButton;
 exports.GoabAccordion = GoabAccordion;
 exports.GoabAppFooter = GoabAppFooter;
@@ -4522,6 +4747,7 @@ exports.GoabPublicSubformIndex = GoabPublicSubformIndex;
 exports.GoabPushDrawer = GoabPushDrawer;
 exports.GoabRadioGroup = GoabRadioGroup;
 exports.GoabRadioItem = GoabRadioItem;
+exports.GoabScrollPanel = GoabScrollPanel;
 exports.GoabSideMenu = GoabSideMenu;
 exports.GoabSideMenuGroup = GoabSideMenuGroup;
 exports.GoabSideMenuHeading = GoabSideMenuHeading;
@@ -4536,6 +4762,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;
@@ -4544,5 +4771,8 @@ exports.GoabWorkSideMenuGroup = GoabWorkSideMenuGroup;
 exports.GoabWorkSideMenuItem = GoabWorkSideMenuItem;
 exports.GoabWorkSideNotificationItem = GoabWorkSideNotificationItem;
 exports.GoabWorkSideNotificationPanel = GoabWorkSideNotificationPanel;
+exports.GoabWorkspaceLayout = GoabWorkspaceLayout;
+exports.useGoabWorkspaceLayoutScrollState = useGoabWorkspaceLayoutScrollState;
 exports.usePublicFormController = usePublicFormController;
+exports.useTheme = useTheme;
 //# sourceMappingURL=index.js.map