@abgov/react-components 5.3.0 → 5.4.0

package/index.d.ts

@@ -57,4 +57,5 @@ export * from "./lib/textarea/textarea";
 export * from "./lib/three-column-layout/three-column-layout";
 export * from "./lib/tooltip/tooltip";
 export * from "./lib/two-column-layout/two-column-layout";
+export * from "./lib/filter-chip/filter-chip";
 export * from "./common/styling";

package/index.js

@@ -12,15 +12,31 @@ function GoAAccordion({
   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,
@@ -239,6 +255,7 @@ function GoAButton({
   variant,
   leadingIcon,
   trailingIcon,
+  width,
   testId,
   children,
   onClick,
@@ -274,6 +291,7 @@ function GoAButton({
       disabled,
       leadingicon: leadingIcon,
       trailingicon: trailingIcon,
+      width,
       testid: testId,
       mt,
       mr,
@@ -677,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",
     {
@@ -3409,6 +3427,7 @@ function GoATextarea({
   value,
   placeholder,
   rows,
+  readOnly,
   disabled,
   countBy,
   maxCount,
@@ -3461,6 +3480,7 @@ function GoATextarea({
       placeholder,
       value,
       rows,
+      readOnly,
       disabled,
       countby: countBy,
       maxcount: maxCount,
@@ -3525,6 +3545,42 @@ 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;
@@ -3552,6 +3608,7 @@ exports.GoAEmergencyBadge = GoAEmergencyBadge;
 exports.GoAFieldset = GoAFieldset;
 exports.GoAFileUploadCard = GoAFileUploadCard;
 exports.GoAFileUploadInput = GoAFileUploadInput;
+exports.GoAFilterChip = GoAFilterChip;
 exports.GoAFormItem = GoAFormItem;
 exports.GoAFormStep = GoAFormStep;
 exports.GoAFormStepper = GoAFormStepper;