@abgov/react-components 5.0.0-alpha.1 → 5.0.0-alpha.10

package/index.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
+const icon = require("./icon-1IRcN4Uf.js");
 function GoAAccordion({
   open,
   heading,
@@ -24,7 +25,7 @@ function GoAAccordion({
       heading,
       secondaryText,
       maxwidth: maxWidth,
-      "data-testid": testid,
+      testid,
       mt,
       mr,
       mb,
@@ -51,7 +52,7 @@ function GoAAppHeader({
       url,
       fullmenubreakpoint: fullMenuBreakpoint,
       maxcontentwidth: maxContentWidth,
-      "data-testid": testId,
+      testid: testId,
       children
     }
   );
@@ -62,7 +63,7 @@ function GoAAppHeaderMenu(props) {
     {
       heading: props.heading,
       leadingicon: props.leadingIcon,
-      "data-testid": props.testId,
+      testid: props.testId,
       children: props.children
     }
   );
@@ -70,7 +71,7 @@ function GoAAppHeaderMenu(props) {
 function GoABadge({
   type,
   content,
-  icon,
+  icon: icon2,
   testId,
   mt,
   mr,
@@ -83,8 +84,8 @@ function GoABadge({
     {
       type,
       content,
-      icon,
-      "data-testid": testId,
+      icon: icon2,
+      testid: testId,
       arialabel: ariaLabel,
       mt,
       mr,
@@ -96,7 +97,7 @@ function GoABadge({
 function GoAInfoBadge({
   content,
   testId,
-  icon,
+  icon: icon2,
   mt,
   mr,
   mb,
@@ -107,7 +108,7 @@ function GoAInfoBadge({
     GoABadge,
     {
       type: "information",
-      icon,
+      icon: icon2,
       content,
       testId,
       ariaLabel,
@@ -121,7 +122,7 @@ function GoAInfoBadge({
 function GoASuccessBadge({
   content,
   testId,
-  icon,
+  icon: icon2,
   mt,
   mr,
   mb,
@@ -132,7 +133,7 @@ function GoASuccessBadge({
     GoABadge,
     {
       type: "success",
-      icon,
+      icon: icon2,
       content,
       ariaLabel,
       testId,
@@ -146,7 +147,7 @@ function GoASuccessBadge({
 function GoAImportantBadge({
   content,
   testId,
-  icon,
+  icon: icon2,
   mt,
   mr,
   mb,
@@ -157,7 +158,7 @@ function GoAImportantBadge({
     GoABadge,
     {
       type: "important",
-      icon,
+      icon: icon2,
       content,
       testId,
       ariaLabel,
@@ -171,7 +172,7 @@ function GoAImportantBadge({
 function GoAEmergencyBadge({
   content,
   testId,
-  icon,
+  icon: icon2,
   mt,
   mr,
   mb,
@@ -182,7 +183,7 @@ function GoAEmergencyBadge({
     GoABadge,
     {
       type: "emergency",
-      icon,
+      icon: icon2,
       content,
       testId,
       ariaLabel,
@@ -204,7 +205,7 @@ function GoABlock(props) {
       mr: props.mr,
       mb: props.mb,
       ml: props.ml,
-      "data-testid": props.testId,
+      testid: props.testId,
       children: props.children
     }
   );
@@ -251,7 +252,7 @@ function GoAButton({
       disabled,
       leadingicon: leadingIcon,
       trailingicon: trailingIcon,
-      "data-testid": testId,
+      testid: testId,
       mt,
       mr,
       mb,
@@ -279,7 +280,7 @@ function GoAButtonGroup({
       mr,
       mb,
       ml,
-      "data-testid": testId,
+      testid: testId,
       children
     }
   );
@@ -314,7 +315,7 @@ function GoACalendar({
       value: value == null ? void 0 : value.toISOString(),
       min: min == null ? void 0 : min.toISOString(),
       max: max == null ? void 0 : max.toISOString(),
-      "data-testid": testId,
+      testid: testId,
       mt,
       mr,
       mb,
@@ -347,7 +348,7 @@ const GoACallout = ({
       mr,
       mb,
       ml,
-      "data-testid": testId,
+      testid: testId,
       children
     }
   );
@@ -389,12 +390,12 @@ function GoACheckbox({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "goa-checkbox",
     {
-      "data-testid": testId,
+      testid: testId,
       ref: el,
       id,
       name,
       error,
-      checked,
+      checked: checked || false,
       disabled,
       text,
       value,
@@ -453,7 +454,7 @@ const GoAChip = ({
       mr,
       mb,
       ml,
-      "data-testid": testId
+      testid: testId
     }
   );
 };
@@ -473,7 +474,7 @@ const GoACircularProgress = ({
       progress,
       variant,
       size,
-      "data-testid": testId
+      testid: testId
     }
   );
 };
@@ -506,7 +507,7 @@ function GoAContainer({
       mr,
       mb,
       ml,
-      "data-testid": testId,
+      testid: testId,
       children: [
         headingContent && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "title", children: headingContent }),
         children,
@@ -522,10 +523,12 @@ function GoADatePicker({
   min,
   max,
   testId,
+  disabled,
   mt,
   mr,
   mb,
   ml,
+  relative,
   onChange
 }) {
   const ref = react.useRef(null);
@@ -535,7 +538,8 @@ function GoADatePicker({
     }
     const current = ref.current;
     const handleChange = (e) => {
-      onChange(name || "", e.detail.value);
+      const newValue = e.detail.value;
+      onChange == null ? void 0 : onChange(name || "", newValue ? new Date(newValue) : void 0);
     };
     current.addEventListener("_change", handleChange);
     return () => {
@@ -547,15 +551,17 @@ function GoADatePicker({
     {
       ref,
       name,
-      value: value == null ? void 0 : value.toISOString(),
+      value: (value == null ? void 0 : value.toISOString()) || "",
       error,
+      disabled,
       min: min == null ? void 0 : min.toISOString(),
       max: max == null ? void 0 : max.toISOString(),
-      "data-testid": testId,
+      testid: testId,
       mt,
       mr,
       mb,
-      ml
+      ml,
+      relative
     }
   );
 }
@@ -566,7 +572,7 @@ function GoADetails(props) {
       heading: props.heading,
       open: props.open,
       maxwidth: props.maxWidth,
-      "data-testid": props.testId,
+      testid: props.testId,
       mt: props.mt,
       mr: props.mr,
       mb: props.mb,
@@ -583,7 +589,7 @@ function GoADivider(props) {
       mr: props.mr,
       mb: props.mb,
       ml: props.ml,
-      "data-testid": props.testId
+      testid: props.testId
     }
   );
 }
@@ -604,8 +610,9 @@ function GoADropdown(props) {
     }
     const current = el.current;
     const handler = (e) => {
+      var _a;
       const { name, value, values } = e.detail;
-      props.onChange(name, props.multiselect ? values : value);
+      (_a = props.onChange) == null ? void 0 : _a.call(props, name, props.multiselect ? values : value);
     };
     current.addEventListener("_change", handler);
     return () => {
@@ -632,7 +639,7 @@ function GoADropdown(props) {
       multiselect: props.multiselect,
       native: props.native,
       placeholder: props.placeholder,
-      "data-testid": props.testId,
+      testid: props.testId,
       width: props.width,
       relative: props.relative,
       id: props.id,
@@ -659,6 +666,53 @@ function GoADropdownItem({ value, label, filter, name, testId, mountType = "appe
     }
   );
 }
+function GoAFieldset({
+  heading,
+  buttonText,
+  id,
+  onContinue,
+  children,
+  mt,
+  mr,
+  mb,
+  ml,
+  first,
+  last
+}) {
+  const ref = react.useRef(null);
+  react.useEffect(() => {
+    var _a;
+    const _continue = (e) => {
+      const { el, state } = e.detail;
+      return onContinue == null ? void 0 : onContinue(el, state);
+    };
+    if (onContinue) {
+      (_a = ref.current) == null ? void 0 : _a.addEventListener("_continue", _continue);
+    }
+    return () => {
+      var _a2;
+      if (onContinue) {
+        (_a2 = ref.current) == null ? void 0 : _a2.removeEventListener("_continue", _continue);
+      }
+    };
+  }, [ref.current, onContinue]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "goa-fieldset",
+    {
+      ref,
+      id,
+      first,
+      last,
+      heading,
+      buttontext: buttonText,
+      mt,
+      mr,
+      mb,
+      ml,
+      children
+    }
+  );
+}
 function GoAFileUploadCard({
   filename,
   size,
@@ -691,7 +745,7 @@ function GoAFileUploadCard({
       type,
       progress,
       error,
-      "data-testid": testId
+      testid: testId
     }
   );
 }
@@ -721,7 +775,7 @@ function GoAFileUploadInput({
       variant,
       accept,
       maxfilesize: maxFileSize,
-      "data-testid": testId
+      testid: testId
     }
   );
 }
@@ -730,13 +784,13 @@ function GoAAppFooter({
   children,
   testId
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("goa-app-footer", { maxcontentwidth: maxContentWidth, "data-testid": testId, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("goa-app-footer", { maxcontentwidth: maxContentWidth, testid: testId, children });
 }
 function GoAAppFooterMetaSection({ testId, children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "goa-app-footer-meta-section",
     {
-      "data-testid": testId,
+      testid: testId,
       slot: "meta",
       children
     }
@@ -754,7 +808,7 @@ function GoAAppFooterNavSection({
       slot: "nav",
       heading,
       maxcolumncount: maxColumnCount,
-      "data-testid": testId,
+      testid: testId,
       children
     }
   );
@@ -787,7 +841,7 @@ function GoAFormItem({
       mr,
       mb,
       ml,
-      "data-testid": testId,
+      testid: testId,
       id,
       children: [
         error && typeof error !== "string" && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "error", children: error }),
@@ -829,7 +883,7 @@ function GoAFormStepper({
     "goa-form-stepper",
     {
       ref,
-      "data-testid": testId,
+      testid: testId,
       step,
       mt,
       mr,
@@ -858,7 +912,7 @@ function GoAGrid({
       mr,
       mb,
       ml,
-      "data-testid": testId,
+      testid: testId,
       children
     }
   );
@@ -882,7 +936,7 @@ function GoAHeroBanner({
       maxcontentwidth: maxContentWidth,
       backgroundcolor: backgroundColor,
       textcolor: textColor,
-      "data-testid": testId,
+      testid: testId,
       children
     }
   );
@@ -893,7 +947,7 @@ function GoAHeroBannerActions({
   return /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "actions", children });
 }
 function GoAIconButton({
-  icon,
+  icon: icon2,
   disabled,
   variant = "color",
   onClick,
@@ -928,7 +982,7 @@ function GoAIconButton({
     "goa-icon-button",
     {
       ref,
-      icon,
+      icon: icon2,
       disabled,
       variant,
       size,
@@ -938,45 +992,11 @@ function GoAIconButton({
       mr,
       mb,
       ml,
-      "data-testid": testId,
+      testid: testId,
       children
     }
   );
 }
-function GoAIcon({
-  type,
-  theme,
-  size,
-  inverted,
-  fillColor,
-  opacity,
-  title,
-  ariaLabel,
-  mt,
-  mr,
-  mb,
-  ml,
-  testId
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "goa-icon",
-    {
-      type,
-      theme,
-      size,
-      inverted,
-      fillcolor: fillColor,
-      opacity,
-      title,
-      arialabel: ariaLabel,
-      mt,
-      mr,
-      mb,
-      ml,
-      "data-testid": testId
-    }
-  );
-}
 function toDate(argument) {
   const argStr = Object.prototype.toString.call(argument);
   if (argument instanceof Date || typeof argument === "object" && argStr === "[object Date]") {
@@ -2625,7 +2645,7 @@ function GoAInput({
     const current = ref.current;
     const changeListener = (e) => {
       const { name: name2, value: value2 } = e.detail;
-      onChange(name2, value2);
+      onChange == null ? void 0 : onChange(name2, value2);
     };
     const clickListener = () => {
       onTrailingIconClick == null ? void 0 : onTrailingIconClick();
@@ -2672,7 +2692,7 @@ function GoAInput({
       readonly,
       placeholder,
       error,
-      "data-testid": testId,
+      testid: testId,
       value,
       width,
       min,
@@ -2696,6 +2716,7 @@ function GoAInput({
 }
 const onDateChangeHandler = (onChange) => {
   return (name, value) => {
+    if (!onChange) return;
     if (!value) {
       onChange(name, "");
       return;
@@ -2707,6 +2728,7 @@ const onDateChangeHandler = (onChange) => {
 };
 const onTimeChangeHandler = (onChange) => {
   return (name, value) => {
+    if (!onChange) return;
     if (!value) {
       onChange(name, "");
       return;
@@ -2801,7 +2823,10 @@ function GoAInputFile(props) {
       id: props.id,
       name: props.name,
       type: "file",
-      onChange: (e) => props.onChange(e.target.name, e.target.value),
+      onChange: (e) => {
+        var _a;
+        return (_a = props.onChange) == null ? void 0 : _a.call(props, e.target.name, e.target.value);
+      },
       style: { backgroundColor: "revert" }
     }
   );
@@ -2816,7 +2841,8 @@ function GoAInputNumber({
   ...props
 }) {
   const onNumberChange = (name, value2) => {
-    props.onChange(name, parseFloat(value2));
+    var _a;
+    (_a = props.onChange) == null ? void 0 : _a.call(props, name, parseFloat(value2));
   };
   const onFocus = (name, value2) => {
     var _a;
@@ -2848,6 +2874,35 @@ function GoAInputNumber({
 function GoAInputRange(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(GoAInput, { ...props, type: "range" });
 }
+function GoALink(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "goa-link",
+    {
+      leadingicon: props.leadingIcon,
+      trailingicon: props.trailingIcon,
+      mt: props.mt,
+      mb: props.mb,
+      ml: props.ml,
+      mr: props.mr,
+      children: props.children
+    }
+  );
+}
+function GoALinkButton({ type = "primary", ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "goa-link-button",
+    {
+      type,
+      leadingicon: props.leadingIcon,
+      trailingicon: props.trailingIcon,
+      mt: props.mt,
+      mb: props.mb,
+      ml: props.ml,
+      mr: props.mr,
+      children: props.children
+    }
+  );
+}
 function GoAMicrositeHeader({
   type,
   version,
@@ -2855,18 +2910,39 @@ function GoAMicrositeHeader({
   maxContentWidth,
   feedbackUrlTarget,
   headerUrlTarget,
-  testId
+  testId,
+  onFeedbackClick
 }) {
+  const el = react.useRef(null);
+  react.useEffect(() => {
+    if (!el.current) {
+      return;
+    }
+    if (!onFeedbackClick) {
+      return;
+    }
+    const current = el.current;
+    const listener = () => {
+      onFeedbackClick();
+    };
+    current.addEventListener("_feedbackClick", listener);
+    return () => {
+      current.removeEventListener("_feedbackClick", listener);
+    };
+  }, [el, onFeedbackClick]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "goa-microsite-header",
     {
+      ref: el,
       type,
-      version,
+      version: typeof version === "string" ? version : void 0,
       feedbackurl: feedbackUrl,
-      "data-testid": testId,
+      testid: testId,
       maxcontentwidth: maxContentWidth,
       feedbackurltarget: feedbackUrlTarget,
-      headerurltarget: headerUrlTarget
+      headerurltarget: headerUrlTarget,
+      hasfeedbackhandler: !!onFeedbackClick,
+      children: version && typeof version !== "string" && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "version", children: version })
     }
   );
 }
@@ -2915,7 +2991,7 @@ function GoAModal({
       maxwidth: maxWidth,
       transition,
       calloutvariant: calloutVariant,
-      "data-testid": testId,
+      testid: testId,
       role,
       children: [
         heading && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "heading", children: heading }),
@@ -2952,7 +3028,7 @@ const GoANotification = ({
     {
       ref: el,
       type,
-      "data-testid": testId,
+      testid: testId,
       maxcontentwidth: maxContentWidth,
       arialive: ariaLive,
       children
@@ -2963,7 +3039,7 @@ function GoAOneColumnLayout(props) {
   return /* @__PURE__ */ jsxRuntime.jsx("goa-one-column-layout", { children: props.children });
 }
 function GoAPageBlock(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx("goa-page-block", { width: props.width, "data-testid": props.testId, children: props.children });
+  return /* @__PURE__ */ jsxRuntime.jsx("goa-page-block", { width: props.width, testid: props.testId, children: props.children });
 }
 function GoAPages(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -3006,7 +3082,7 @@ function GoAPagination({ onChange, ...props }) {
       mb: props.mb,
       ml: props.ml,
       mr: props.mr,
-      "data-testid": props.testId
+      testid: props.testId
     }
   );
 }
@@ -3027,7 +3103,7 @@ function GoAPopover({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "goa-popover",
     {
-      "data-testid": testId,
+      testid: testId,
       maxwidth: maxWidth,
       minwidth: minWidth,
       padded,
@@ -3121,7 +3197,7 @@ function GoARadioGroup({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "goa-radio-group",
     {
-      "data-testid": testId,
+      testid: testId,
       ref: el,
       name,
       value,
@@ -3142,7 +3218,7 @@ function GoASideMenuGroup(props) {
     "goa-side-menu-group",
     {
       heading: props.heading,
-      "data-testid": props.testId,
+      testid: props.testId,
       children: props.children
     }
   );
@@ -3152,7 +3228,7 @@ function GoASideMenuHeading(props) {
     "goa-side-menu-heading",
     {
       icon: props.icon,
-      "data-testid": props.testId,
+      testid: props.testId,
       children: [
         props.children,
         props.meta && /* @__PURE__ */ jsxRuntime.jsx("span", { slot: "meta", children: props.meta })
@@ -3161,7 +3237,7 @@ function GoASideMenuHeading(props) {
   );
 }
 function GoASideMenu(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx("goa-side-menu", { "data-testid": props.testId, children: props.children });
+  return /* @__PURE__ */ jsxRuntime.jsx("goa-side-menu", { testid: props.testId, children: props.children });
 }
 const GoASkeleton = ({
   maxWidth,
@@ -3185,7 +3261,7 @@ const GoASkeleton = ({
       mr,
       mb,
       ml,
-      "data-testid": testId
+      testid: testId
     }
   );
 };
@@ -3195,7 +3271,7 @@ function GoASpacer(props) {
     {
       hspacing: props.hSpacing,
       vspacing: props.vSpacing,
-      "data-testid": props.testId
+      testid: props.testId
     }
   );
 }
@@ -3213,7 +3289,7 @@ function GoASpinner({
       size,
       progress,
       invert,
-      "data-testid": testId
+      testid: testId
     }
   );
 }
@@ -3240,7 +3316,7 @@ function GoATable({ onSort, ...props }) {
       width: props.width,
       stickyheader: false,
       variant: props.variant,
-      "data-testid": props.testId,
+      testid: props.testId,
       mt: props.mt,
       mb: props.mb,
       ml: props.ml,
@@ -3276,7 +3352,7 @@ function GoATabs({
       };
     }
   }, [onChange]);
-  return /* @__PURE__ */ jsxRuntime.jsx("goa-tabs", { ref, initialtab: initialTab, "data-testid": testId, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("goa-tabs", { ref, initialtab: initialTab, testid: testId, children });
 }
 function GoATab({ heading, children }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("goa-tab", { children: [
@@ -3284,6 +3360,21 @@ function GoATab({ heading, children }) {
     children
   ] });
 }
+function GoAText(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "goa-text",
+    {
+      as: props.as || "div",
+      size: props.size,
+      maxwidth: props.maxWidth || "65ch",
+      mt: props.mt,
+      mb: props.mb,
+      ml: props.ml,
+      mr: props.mr,
+      children: props.children
+    }
+  );
+}
 function GoATextarea({
   name,
   value,
@@ -3312,7 +3403,7 @@ function GoATextarea({
     const current = el.current;
     const listener = (e) => {
       const { name: name2, value: value2 } = e.detail;
-      onChange(name2, value2);
+      onChange == null ? void 0 : onChange(name2, value2);
     };
     current.addEventListener("_change", listener);
     return () => {
@@ -3347,7 +3438,7 @@ function GoATextarea({
       width,
       maxwidth: maxWidth,
       error,
-      "data-testid": testId,
+      testid: testId,
       arialabel: ariaLabel,
       mt,
       mr,
@@ -3381,7 +3472,7 @@ function GoATooltip(props) {
       position: props.position,
       content: props.content,
       halign: props.hAlign,
-      "data-testid": props.testId,
+      testid: props.testId,
       mt: props.mt,
       mr: props.mr,
       mb: props.mb,
@@ -3405,6 +3496,7 @@ function GoATwoColumnLayout(props) {
     }
   );
 }
+exports.GoAIcon = icon.GoAIcon;
 exports.GoAAccordion = GoAAccordion;
 exports.GoAAppFooter = GoAAppFooter;
 exports.GoAAppFooterMetaSection = GoAAppFooterMetaSection;
@@ -3428,6 +3520,7 @@ exports.GoADropdown = GoADropdown;
 exports.GoADropdownItem = GoADropdownItem;
 exports.GoADropdownOption = GoADropdownOption;
 exports.GoAEmergencyBadge = GoAEmergencyBadge;
+exports.GoAFieldset = GoAFieldset;
 exports.GoAFileUploadCard = GoAFileUploadCard;
 exports.GoAFileUploadInput = GoAFileUploadInput;
 exports.GoAFormItem = GoAFormItem;
@@ -3436,7 +3529,6 @@ exports.GoAFormStepper = GoAFormStepper;
 exports.GoAGrid = GoAGrid;
 exports.GoAHeroBanner = GoAHeroBanner;
 exports.GoAHeroBannerActions = GoAHeroBannerActions;
-exports.GoAIcon = GoAIcon;
 exports.GoAIconButton = GoAIconButton;
 exports.GoAImportantBadge = GoAImportantBadge;
 exports.GoAInfoBadge = GoAInfoBadge;
@@ -3454,6 +3546,8 @@ exports.GoAInputTel = GoAInputTel;
 exports.GoAInputText = GoAInputText;
 exports.GoAInputTime = GoAInputTime;
 exports.GoAInputUrl = GoAInputUrl;
+exports.GoALink = GoALink;
+exports.GoALinkButton = GoALinkButton;
 exports.GoAMicrositeHeader = GoAMicrositeHeader;
 exports.GoAModal = GoAModal;
 exports.GoANotification = GoANotification;
@@ -3475,6 +3569,7 @@ exports.GoATab = GoATab;
 exports.GoATable = GoATable;
 exports.GoATableSortHeader = GoATableSortHeader;
 exports.GoATabs = GoATabs;
+exports.GoAText = GoAText;
 exports.GoATextArea = GoATextarea;
 exports.GoATextarea = GoATextarea;
 exports.GoAThreeColumnLayout = GoAThreeColumnLayout;