@abgov/react-components 6.11.0-dev.6 → 6.11.0-dev.8

package/experimental/checkbox-list/checkbox-list.d.ts

@@ -0,0 +1,33 @@
+import { GoabCheckboxListOnChangeDetail, Margins } from '@abgov/ui-components-common';
+import { JSX } from 'react';
+interface WCProps extends Margins {
+    ref: React.RefObject<HTMLElement | null>;
+    name: string;
+    value?: string[];
+    disabled?: string;
+    error?: string;
+    testid?: string;
+    maxwidth?: string;
+    version?: string;
+    size?: string;
+}
+declare module "react" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-checkbox-list": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface GoabxCheckboxListProps extends Margins {
+    name: string;
+    value?: string[];
+    disabled?: boolean;
+    error?: boolean;
+    testId?: string;
+    maxWidth?: string;
+    size?: "default" | "compact";
+    children?: React.ReactNode;
+    onChange?: (detail: GoabCheckboxListOnChangeDetail) => void;
+}
+export declare function GoabxCheckboxList({ name, value, disabled, error, testId, maxWidth, size, children, onChange, mt, mr, mb, ml, }: GoabxCheckboxListProps): JSX.Element;
+export default GoabxCheckboxList;

package/experimental/index.d.ts

@@ -3,6 +3,7 @@ export * from './button/button';
 export * from './calendar/calendar';
 export * from './callout/callout';
 export * from './checkbox/checkbox';
+export * from './checkbox-list/checkbox-list';
 export * from './date-picker/date-picker';
 export * from './drawer/drawer';
 export * from './dropdown/dropdown';

package/experimental.js

@@ -176,6 +176,54 @@ function GoabxCheckbox({
     }
   );
 }
+function GoabxCheckboxList({
+  name,
+  value = [],
+  disabled,
+  error,
+  testId,
+  maxWidth,
+  size = "default",
+  children,
+  onChange,
+  mt,
+  mr,
+  mb,
+  ml
+}) {
+  const el = react.useRef(null);
+  react.useEffect(() => {
+    if (!el.current) return;
+    const current = el.current;
+    const listener = (e) => {
+      const detail = e.detail;
+      onChange == null ? void 0 : onChange({ ...detail, event: e });
+    };
+    current.addEventListener("_change", listener);
+    return () => {
+      current.removeEventListener("_change", listener);
+    };
+  }, [onChange]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "goa-checkbox-list",
+    {
+      ref: el,
+      name,
+      value,
+      disabled: disabled ? "true" : void 0,
+      error: error ? "true" : void 0,
+      testid: testId,
+      maxwidth: maxWidth,
+      version: "2",
+      size,
+      mt,
+      mr,
+      mb,
+      ml,
+      children
+    }
+  );
+}
 function GoabxDatePicker({
   value,
   error,
@@ -1256,6 +1304,7 @@ exports.GoabxButton = GoabxButton;
 exports.GoabxCalendar = GoabxCalendar;
 exports.GoabxCallout = GoabxCallout;
 exports.GoabxCheckbox = GoabxCheckbox;
+exports.GoabxCheckboxList = GoabxCheckboxList;
 exports.GoabxDatePicker = GoabxDatePicker;
 exports.GoabxDrawer = GoabxDrawer;
 exports.GoabxDropdown = GoabxDropdown;