@abgov/react-components 7.2.0-dev.12 → 7.2.0-dev.14

package/index.mjs

@@ -133,9 +133,14 @@ function GoabBadge({
     }
   );
 }
-function GoabBlock({ testId, children, ...rest }) {
+function GoabBlock({
+  testId,
+  stretch,
+  children,
+  ...rest
+}) {
   const _props = transformProps({ testid: testId, ...rest }, kebab);
-  return /* @__PURE__ */ jsx("goa-block", { ..._props, children });
+  return /* @__PURE__ */ jsx("goa-block", { ..._props, stretch: stretch ? "true" : void 0, children });
 }
 function GoabButton({
   disabled,
@@ -410,6 +415,9 @@ function GoabDataGrid({
     }
   );
 }
+const GoabWorkspaceLayoutScrollState = {
+  NO_SCROLL: "no-scroll"
+};
 function dispatch(el, eventName, detail, opts) {
   if (!el) {
     console.error("dispatch element is null");
@@ -3960,6 +3968,21 @@ function GoabSpinner({
     }
   );
 }
+function GoabScrollPanel({
+  header,
+  children,
+  footer,
+  height,
+  testId,
+  ...rest
+}) {
+  const hostStyle = height ? { height } : void 0;
+  return /* @__PURE__ */ jsxs("goa-scroll-panel", { height, testid: testId, style: hostStyle, ...rest, children: [
+    header && /* @__PURE__ */ jsx("div", { slot: "header", children: header }),
+    children,
+    footer && /* @__PURE__ */ jsx("div", { slot: "footer", children: footer })
+  ] });
+}
 function GoabTable({ onSort, onMultiSort, sortMode, ...props }) {
   const ref = useRef(null);
   useEffect(() => {
@@ -4503,6 +4526,50 @@ function useTheme() {
   }
   return ctx;
 }
+const GoabWorkspaceLayoutScrollStateDefault = {
+  scrollPosition: GoabWorkspaceLayoutScrollState.NO_SCROLL,
+  isScrollable: false
+};
+const GoabWorkspaceLayoutScrollStateContext = createContext(
+  GoabWorkspaceLayoutScrollStateDefault
+);
+function useGoabWorkspaceLayoutScrollState() {
+  return useContext(GoabWorkspaceLayoutScrollStateContext);
+}
+function GoabWorkspaceLayout({
+  sideMenu,
+  pageHeader,
+  pageFooter,
+  pushDrawer,
+  children,
+  testId,
+  onScrollStateChange,
+  ...rest
+}) {
+  const ref = useRef(null);
+  const [scrollState, setScrollState] = useState(GoabWorkspaceLayoutScrollStateDefault);
+  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__ */ jsx(GoabWorkspaceLayoutScrollStateContext.Provider, { value: scrollState, children: /* @__PURE__ */ jsxs("goa-workspace-layout", { ref, testid: testId, ...rest, children: [
+    sideMenu && /* @__PURE__ */ jsx("div", { slot: "side-menu", children: sideMenu }),
+    pageHeader && /* @__PURE__ */ jsx("div", { slot: "page-header", children: pageHeader }),
+    children,
+    pageFooter && /* @__PURE__ */ jsx("div", { slot: "page-footer", children: pageFooter }),
+    pushDrawer && /* @__PURE__ */ jsx("div", { slot: "push-drawer", children: pushDrawer })
+  ] }) });
+}
 export {
   GoALinkButton,
   GoabAccordion,
@@ -4578,6 +4645,7 @@ export {
   GoabPushDrawer,
   GoabRadioGroup,
   GoabRadioItem,
+  GoabScrollPanel,
   GoabSideMenu,
   GoabSideMenuGroup,
   GoabSideMenuHeading,
@@ -4601,6 +4669,8 @@ export {
   GoabWorkSideMenuItem,
   GoabWorkSideNotificationItem,
   GoabWorkSideNotificationPanel,
+  GoabWorkspaceLayout,
+  useGoabWorkspaceLayoutScrollState,
   usePublicFormController,
   useTheme
 };