@abgov/react-components 5.2.0 → 5.4.0

package/index.js

@@ -2,27 +2,46 @@
 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,
   headingSize,
   secondaryText,
   headingContent,
+  iconPosition,
   maxWidth,
   testid,
+  onChange,
   children,
   mt,
   mr,
   mb,
   ml
 }) {
+  const ref = react.useRef(null);
+  react.useEffect(() => {
+    const element = ref.current;
+    if (element && onChange) {
+      const handler = (event) => {
+        const customEvent = event;
+        onChange(customEvent.detail.open);
+      };
+      element.addEventListener("_change", handler);
+      return () => {
+        element.removeEventListener("_change", handler);
+      };
+    }
+  }, [onChange]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "goa-accordion",
     {
+      ref,
       open,
       headingSize,
       heading,
       secondaryText,
+      iconposition: iconPosition,
       maxwidth: maxWidth,
       testid,
       mt,
@@ -42,16 +61,36 @@ function GoAAppHeader({
   maxContentWidth,
   fullMenuBreakpoint,
   testId,
-  children
+  children,
+  onMenuClick
 }) {
+  const el = react.useRef(null);
+  react.useEffect(() => {
+    if (!el.current) {
+      return;
+    }
+    if (!onMenuClick) {
+      return;
+    }
+    const current = el.current;
+    const listener = () => {
+      onMenuClick();
+    };
+    current.addEventListener("_menuClick", listener);
+    return () => {
+      current.removeEventListener("_menuClick", listener);
+    };
+  }, [el, onMenuClick]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "goa-app-header",
     {
+      ref: el,
       heading,
       url,
       fullmenubreakpoint: fullMenuBreakpoint,
       maxcontentwidth: maxContentWidth,
       testid: testId,
+      hasmenuclickhandler: !!onMenuClick,
       children
     }
   );
@@ -70,7 +109,7 @@ function GoAAppHeaderMenu(props) {
 function GoABadge({
   type,
   content,
-  icon,
+  icon: icon2,
   testId,
   mt,
   mr,
@@ -83,7 +122,7 @@ function GoABadge({
     {
       type,
       content,
-      icon,
+      icon: icon2,
       testid: testId,
       arialabel: ariaLabel,
       mt,
@@ -96,7 +135,7 @@ function GoABadge({
 function GoAInfoBadge({
   content,
   testId,
-  icon,
+  icon: icon2,
   mt,
   mr,
   mb,
@@ -107,7 +146,7 @@ function GoAInfoBadge({
     GoABadge,
     {
       type: "information",
-      icon,
+      icon: icon2,
       content,
       testId,
       ariaLabel,
@@ -121,7 +160,7 @@ function GoAInfoBadge({
 function GoASuccessBadge({
   content,
   testId,
-  icon,
+  icon: icon2,
   mt,
   mr,
   mb,
@@ -132,7 +171,7 @@ function GoASuccessBadge({
     GoABadge,
     {
       type: "success",
-      icon,
+      icon: icon2,
       content,
       ariaLabel,
       testId,
@@ -146,7 +185,7 @@ function GoASuccessBadge({
 function GoAImportantBadge({
   content,
   testId,
-  icon,
+  icon: icon2,
   mt,
   mr,
   mb,
@@ -157,7 +196,7 @@ function GoAImportantBadge({
     GoABadge,
     {
       type: "important",
-      icon,
+      icon: icon2,
       content,
       testId,
       ariaLabel,
@@ -171,7 +210,7 @@ function GoAImportantBadge({
 function GoAEmergencyBadge({
   content,
   testId,
-  icon,
+  icon: icon2,
   mt,
   mr,
   mb,
@@ -182,7 +221,7 @@ function GoAEmergencyBadge({
     GoABadge,
     {
       type: "emergency",
-      icon,
+      icon: icon2,
       content,
       testId,
       ariaLabel,
@@ -216,6 +255,7 @@ function GoAButton({
   variant,
   leadingIcon,
   trailingIcon,
+  width,
   testId,
   children,
   onClick,
@@ -251,6 +291,7 @@ function GoAButton({
       disabled,
       leadingicon: leadingIcon,
       trailingicon: trailingIcon,
+      width,
       testid: testId,
       mt,
       mr,
@@ -325,6 +366,7 @@ function GoACalendar({
 const GoACallout = ({
   heading,
   type = "information",
+  iconTheme = "outline",
   size = "large",
   maxWidth,
   testId,
@@ -343,6 +385,7 @@ const GoACallout = ({
       size,
       maxwidth: maxWidth,
       arialive: ariaLive,
+      icontheme: iconTheme,
       mt,
       mr,
       mb,
@@ -652,7 +695,7 @@ function GoADropdownOption(props) {
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(GoADropdownItem, { ...props });
 }
-function GoADropdownItem({ value, label, filter, name, testId, mountType = "append" }) {
+function GoADropdownItem({ value, label, filter, name, testId, mountType = "reset" }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "goa-dropdown-item",
     {
@@ -946,7 +989,7 @@ function GoAHeroBannerActions({
   return /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "actions", children });
 }
 function GoAIconButton({
-  icon,
+  icon: icon2,
   disabled,
   variant = "color",
   onClick,
@@ -981,7 +1024,7 @@ function GoAIconButton({
     "goa-icon-button",
     {
       ref,
-      icon,
+      icon: icon2,
       disabled,
       variant,
       size,
@@ -996,40 +1039,6 @@ function GoAIconButton({
     }
   );
 }
-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,
-      testid: testId
-    }
-  );
-}
 function toDate(argument) {
   const argStr = Object.prototype.toString.call(argument);
   if (argument instanceof Date || typeof argument === "object" && argStr === "[object Date]") {
@@ -3251,7 +3260,12 @@ function GoASideMenuGroup(props) {
     "goa-side-menu-group",
     {
       heading: props.heading,
+      icon: props.icon,
       testid: props.testId,
+      mt: props.mt,
+      mr: props.mr,
+      mb: props.mb,
+      ml: props.ml,
       children: props.children
     }
   );
@@ -3413,6 +3427,7 @@ function GoATextarea({
   value,
   placeholder,
   rows,
+  readOnly,
   disabled,
   countBy,
   maxCount,
@@ -3465,6 +3480,7 @@ function GoATextarea({
       placeholder,
       value,
       rows,
+      readOnly,
       disabled,
       countby: countBy,
       maxcount: maxCount,
@@ -3529,6 +3545,43 @@ function GoATwoColumnLayout(props) {
     }
   );
 }
+const GoAFilterChip = ({
+  iconTheme = "outline",
+  error = false,
+  content,
+  onClick,
+  mt,
+  mr,
+  mb,
+  ml,
+  testId
+}) => {
+  const el = react.useRef(null);
+  react.useEffect(() => {
+    if (!el.current) return;
+    if (!onClick) return;
+    const current = el.current;
+    current.addEventListener("_click", onClick);
+    return () => {
+      current.removeEventListener("_click", onClick);
+    };
+  }, [el, onClick]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "goa-filter-chip",
+    {
+      ref: el,
+      icontheme: iconTheme,
+      error,
+      content,
+      mt,
+      mr,
+      mb,
+      ml,
+      "data-testid": testId
+    }
+  );
+};
+exports.GoAIcon = icon.GoAIcon;
 exports.GoAAccordion = GoAAccordion;
 exports.GoAAppFooter = GoAAppFooter;
 exports.GoAAppFooterMetaSection = GoAAppFooterMetaSection;
@@ -3555,13 +3608,13 @@ exports.GoAEmergencyBadge = GoAEmergencyBadge;
 exports.GoAFieldset = GoAFieldset;
 exports.GoAFileUploadCard = GoAFileUploadCard;
 exports.GoAFileUploadInput = GoAFileUploadInput;
+exports.GoAFilterChip = GoAFilterChip;
 exports.GoAFormItem = GoAFormItem;
 exports.GoAFormStep = GoAFormStep;
 exports.GoAFormStepper = GoAFormStepper;
 exports.GoAGrid = GoAGrid;
 exports.GoAHeroBanner = GoAHeroBanner;
 exports.GoAHeroBannerActions = GoAHeroBannerActions;
-exports.GoAIcon = GoAIcon;
 exports.GoAIconButton = GoAIconButton;
 exports.GoAImportantBadge = GoAImportantBadge;
 exports.GoAInfoBadge = GoAInfoBadge;