@abgov/react-components 6.4.1 → 6.5.0-alpha.1

package/index.d.ts

@@ -17,12 +17,15 @@ export * from './lib/divider/divider';
 export * from './lib/drawer/drawer';
 export * from './lib/dropdown/dropdown';
 export * from './lib/dropdown/dropdown-item';
-export * from './lib/fieldset/fieldset';
 export * from './lib/file-upload-card/file-upload-card';
 export * from './lib/file-upload-input/file-upload-input';
 export * from './lib/footer/footer';
 export * from './lib/footer-meta-section/footer-meta-section';
 export * from './lib/footer-nav-section/footer-nav-section';
+export * from './lib/form/fieldset';
+export * from './lib/form/public-form-page';
+export * from './lib/form/public-form-summary';
+export * from './lib/form/public-form';
 export * from './lib/form-item/form-item';
 export * from './lib/form-step/form-step';
 export * from './lib/form-stepper/form-stepper';

package/index.js

@@ -721,53 +721,6 @@ function GoabDropdownItem({
     }
   );
 }
-function GoabFieldset({
-  heading,
-  buttonText,
-  id,
-  onContinue,
-  children,
-  mt,
-  mr,
-  mb,
-  ml,
-  first,
-  last
-}) {
-  const ref = react.useRef(null);
-  react.useEffect(() => {
-    if (!ref.current) return;
-    const current = ref.current;
-    const _continue = (e) => {
-      const event = e.detail;
-      return onContinue == null ? void 0 : onContinue(event);
-    };
-    if (onContinue) {
-      current.addEventListener("_continue", _continue);
-    }
-    return () => {
-      if (onContinue) {
-        current.removeEventListener("_continue", _continue);
-      }
-    };
-  }, [ref, onContinue]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "goa-public-form-page",
-    {
-      ref,
-      id,
-      first: first ? "true" : void 0,
-      last: last ? "true" : void 0,
-      heading,
-      buttontext: buttonText,
-      mt,
-      mr,
-      mb,
-      ml,
-      children
-    }
-  );
-}
 function GoabFileUploadCard({
   filename,
   size,
@@ -866,6 +819,213 @@ function GoabAppFooterNavSection({
     }
   );
 }
+function GoabFieldset({
+  id,
+  sectionTitle,
+  dispatchOn,
+  onContinue,
+  onChange,
+  children
+}) {
+  const ref = react.useRef(null);
+  react.useEffect(() => {
+    if (!ref.current) return;
+    const current = ref.current;
+    const changeListener = (e) => {
+      const detail = e.detail;
+      onChange == null ? void 0 : onChange(detail);
+    };
+    const continueListener = (e) => {
+      const event = e.detail;
+      return onContinue == null ? void 0 : onContinue(event);
+    };
+    if (onContinue) {
+      current.addEventListener("_continue", continueListener);
+    }
+    if (onChange) {
+      current.addEventListener("_change", changeListener);
+    }
+    return () => {
+      if (onContinue) {
+        current.removeEventListener("_continue", continueListener);
+      }
+      if (onChange) {
+        current.removeEventListener("_change", changeListener);
+      }
+    };
+  }, [ref, onContinue]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "goa-fieldset",
+    {
+      ref,
+      id,
+      "section-title": sectionTitle,
+      "dispatch-on": dispatchOn,
+      children
+    }
+  );
+}
+function GoabPublicFormPage({
+  id = "",
+  heading = "",
+  subHeading = "",
+  summaryHeading = "",
+  sectionTitle = "",
+  backUrl = "",
+  type = "step",
+  buttonText = "",
+  buttonVisibility = "visible",
+  first = false,
+  last = false,
+  onContinue,
+  onBack,
+  onFieldsetChange,
+  onComplete,
+  children,
+  mt,
+  mr,
+  mb,
+  ml
+}) {
+  const ref = react.useRef(null);
+  react.useEffect(() => {
+    if (!ref.current) return;
+    const current = ref.current;
+    const continueListener = (e) => {
+      const detail = e.detail;
+      onContinue == null ? void 0 : onContinue(detail);
+    };
+    const backListener = () => {
+      onBack == null ? void 0 : onBack();
+    };
+    const fieldsetChangeListener = (e) => {
+      const detail = e.detail;
+      onFieldsetChange == null ? void 0 : onFieldsetChange(detail);
+    };
+    const completeListener = (e) => {
+      const detail = e.detail;
+      onComplete == null ? void 0 : onComplete(detail);
+    };
+    if (onContinue) {
+      current.addEventListener("_continue", continueListener);
+    }
+    if (onBack) {
+      current.addEventListener("_back", backListener);
+    }
+    if (onFieldsetChange) {
+      current.addEventListener("_fieldsetChange", fieldsetChangeListener);
+    }
+    if (onComplete) {
+      current.addEventListener("_complete", completeListener);
+    }
+    return () => {
+      if (onContinue) {
+        current.removeEventListener("_continue", continueListener);
+      }
+      if (onBack) {
+        current.removeEventListener("_back", backListener);
+      }
+      if (onFieldsetChange) {
+        current.removeEventListener("_fieldsetChange", fieldsetChangeListener);
+      }
+      if (onComplete) {
+        current.removeEventListener("_complete", completeListener);
+      }
+    };
+  }, [ref, onContinue, onBack, onFieldsetChange, onComplete]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "goa-public-form-page",
+    {
+      ref,
+      id,
+      heading,
+      "sub-heading": subHeading,
+      "section-title": sectionTitle,
+      "back-url": backUrl,
+      type,
+      "button-text": buttonText,
+      "button-visibility": buttonVisibility,
+      first,
+      last,
+      "summary-heading": summaryHeading,
+      mt,
+      mr,
+      mb,
+      ml,
+      children
+    }
+  );
+}
+function GoabPublicFormSummary({
+  heading = ""
+}) {
+  const ref = react.useRef(null);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "goa-public-form-summary",
+    {
+      ref,
+      heading
+    }
+  );
+}
+function GoabPublicForm({
+  status = "complete",
+  name,
+  onInit,
+  onComplete,
+  onStateChange,
+  children
+}) {
+  const ref = react.useRef(null);
+  const initialized = react.useRef(false);
+  react.useLayoutEffect(() => {
+    if (!ref.current) return;
+    const current = ref.current;
+    const initListener = (e) => {
+      const detail = e.detail;
+      if (detail == null ? void 0 : detail.el) {
+        onInit == null ? void 0 : onInit(detail);
+      }
+    };
+    if (onInit && !initialized.current) {
+      current.addEventListener("_init", initListener);
+    }
+    const completeListener = (e) => {
+      const detail = e.detail;
+      onComplete == null ? void 0 : onComplete(detail);
+    };
+    const stateChangeListener = (e) => {
+      const detail = e.detail;
+      onStateChange == null ? void 0 : onStateChange(detail.data);
+    };
+    if (onComplete) {
+      current.addEventListener("_complete", completeListener);
+    }
+    if (onStateChange) {
+      current.addEventListener("_stateChange", stateChangeListener);
+    }
+    return () => {
+      if (onInit) {
+        current.removeEventListener("_init", initListener);
+      }
+      if (onComplete) {
+        current.removeEventListener("_complete", completeListener);
+      }
+      if (onStateChange) {
+        current.removeEventListener("_stateChange", stateChangeListener);
+      }
+    };
+  }, [onInit, onComplete, onStateChange]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "goa-public-form",
+    {
+      ref,
+      status,
+      name,
+      children
+    }
+  );
+}
 function GoabFormItem({
   children,
   helpText,
@@ -874,6 +1034,8 @@ function GoabFormItem({
   label,
   labelSize,
   maxWidth,
+  publicFormSummaryOrder,
+  name,
   mt,
   mr,
   mb,
@@ -890,6 +1052,8 @@ function GoabFormItem({
       requirement,
       helptext: typeof helpText === "string" ? helpText : void 0,
       maxwidth: maxWidth,
+      "public-form-summary-order": publicFormSummaryOrder,
+      name,
       mt,
       mr,
       mb,
@@ -2705,7 +2869,7 @@ function GoabInput({
     const current = ref.current;
     const changeListener = (e) => {
       const detail = e.detail;
-      onChange(detail);
+      onChange == null ? void 0 : onChange(detail);
     };
     const clickListener = () => {
       onTrailingIconClick == null ? void 0 : onTrailingIconClick();
@@ -2778,15 +2942,15 @@ function GoabInput({
 const onDateChangeHandler = (onChange) => {
   return ({ name, value }) => {
     if (!value) {
-      onChange({ name, value: "" });
+      onChange == null ? void 0 : onChange({ name, value: "" });
       return;
     }
     if (typeof value === "string" && isValid(new Date(value))) {
-      onChange({ name, value: parseISO(value) });
+      onChange == null ? void 0 : onChange({ name, value: parseISO(value) });
       return;
     }
     if (isValid(value)) {
-      onChange({ name, value });
+      onChange == null ? void 0 : onChange({ name, value });
       return;
     }
   };
@@ -2794,10 +2958,10 @@ const onDateChangeHandler = (onChange) => {
 const onTimeChangeHandler = (onChange) => {
   return ({ name, value }) => {
     if (!value) {
-      onChange({ name, value: "" });
+      onChange == null ? void 0 : onChange({ name, value: "" });
       return;
     }
-    onChange({ name, value });
+    onChange == null ? void 0 : onChange({ name, value });
   };
 };
 function toString(value, tmpl = "yyyy-MM-dd") {
@@ -2887,7 +3051,10 @@ function GoabInputFile(props) {
       id: props.id,
       name: props.name,
       type: "file",
-      onChange: (e) => props.onChange({ name: e.target.name, value: e.target.value }),
+      onChange: (e) => {
+        var _a;
+        return (_a = props.onChange) == null ? void 0 : _a.call(props, { name: e.target.name, value: e.target.value });
+      },
       style: { backgroundColor: "revert" }
     }
   );
@@ -2902,7 +3069,8 @@ function GoabInputNumber({
   ...props
 }) {
   const onNumberChange = ({ name, value: value2 }) => {
-    props.onChange({ name, value: parseFloat(value2) });
+    var _a;
+    (_a = props.onChange) == null ? void 0 : _a.call(props, { name, value: parseFloat(value2) });
   };
   const onFocus = ({ name, value: value2 }) => {
     var _a;
@@ -3220,6 +3388,7 @@ function GoabRadioGroup({
   orientation,
   disabled,
   error,
+  id,
   testId,
   ariaLabel,
   mt,
@@ -3232,17 +3401,17 @@ function GoabRadioGroup({
   react.useEffect(() => {
     if (!el.current) return;
     const listener = (e) => {
-      if (!onChange) {
-        console.warn("Missing onChange function");
-        return;
-      }
       const detail = e.detail;
-      onChange(detail);
+      onChange == null ? void 0 : onChange(detail);
     };
     const currentEl = el.current;
-    currentEl.addEventListener("_change", listener);
+    if (onChange) {
+      currentEl.addEventListener("_change", listener);
+    }
     return () => {
-      currentEl.removeEventListener("_change", listener);
+      if (onChange) {
+        currentEl.removeEventListener("_change", listener);
+      }
     };
   }, [name, onChange]);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3250,6 +3419,7 @@ function GoabRadioGroup({
     {
       testid: testId,
       ref: el,
+      id,
       name,
       value,
       orientation,
@@ -3453,11 +3623,15 @@ function GoabTextArea({
     const current = el.current;
     const listener = (e) => {
       const detail = e.detail;
-      onChange(detail);
+      onChange == null ? void 0 : onChange(detail);
     };
-    current.addEventListener("_change", listener);
+    if (onChange) {
+      current.addEventListener("_change", listener);
+    }
     return () => {
-      current.removeEventListener("_change", listener);
+      if (onChange) {
+        current.removeEventListener("_change", listener);
+      }
     };
   }, [el, onChange]);
   react.useEffect(() => {
@@ -3645,6 +3819,9 @@ exports.GoabPageBlock = GoabPageBlock;
 exports.GoabPages = GoabPages;
 exports.GoabPagination = GoabPagination;
 exports.GoabPopover = GoabPopover;
+exports.GoabPublicForm = GoabPublicForm;
+exports.GoabPublicFormPage = GoabPublicFormPage;
+exports.GoabPublicFormSummary = GoabPublicFormSummary;
 exports.GoabRadioGroup = GoabRadioGroup;
 exports.GoabRadioItem = GoabRadioItem;
 exports.GoabSideMenu = GoabSideMenu;