@abgov/react-components 6.11.0-dev.5 → 6.11.0-dev.7

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';
@@ -16,6 +17,8 @@ export * from './footer-meta-section/footer-meta-section';
 export * from './footer-nav-section/footer-nav-section';
 export * from './input/input';
 export * from './link/link';
+export * from './menu-action/menu-action';
+export * from './menu-button/menu-button';
 export * from './modal/modal';
 export * from './notification/notification';
 export * from './pagination/pagination';

package/experimental/menu-action/menu-action.d.ts

@@ -0,0 +1,10 @@
+import { DataAttributes, GoabIconType } from '@abgov/ui-components-common';
+import { JSX } from 'react';
+export interface GoabxMenuActionProps extends DataAttributes {
+    text: string;
+    action: string;
+    icon?: GoabIconType;
+    testId?: string;
+}
+export declare function GoabxMenuAction(props: GoabxMenuActionProps): JSX.Element;
+export default GoabxMenuAction;

package/experimental/menu-button/menu-button.d.ts

@@ -0,0 +1,16 @@
+import { DataAttributes, GoabButtonSize, GoabButtonType, GoabButtonVariant, GoabIconType, GoabMenuButtonOnActionDetail } from '@abgov/ui-components-common';
+import { ReactNode, JSX } from 'react';
+export interface GoabxMenuButtonProps extends DataAttributes {
+    text?: string;
+    type?: GoabButtonType;
+    size?: GoabButtonSize;
+    variant?: GoabButtonVariant;
+    maxWidth?: string;
+    leadingIcon?: GoabIconType;
+    ariaLabel?: string;
+    testId?: string;
+    onAction?: (detail: GoabMenuButtonOnActionDetail) => void;
+    children?: ReactNode;
+}
+export declare function GoabxMenuButton({ type, testId, onAction, children, ...rest }: GoabxMenuButtonProps): JSX.Element;
+export default GoabxMenuButton;

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,
@@ -746,6 +794,44 @@ function GoabxLink({
     }
   );
 }
+function GoabxMenuAction(props) {
+  const _props = parseISO.transformProps(props, parseISO.lowercase);
+  return /* @__PURE__ */ jsxRuntime.jsx("goa-menu-action", { ..._props });
+}
+function GoabxMenuButton({
+  type = "primary",
+  testId,
+  onAction,
+  children,
+  ...rest
+}) {
+  const el = react.useRef(null);
+  const _props = parseISO.transformProps(
+    { type, testid: testId, ...rest },
+    parseISO.kebab
+  );
+  react.useEffect(() => {
+    if (!el.current) {
+      return;
+    }
+    if (!onAction) {
+      return;
+    }
+    const current = el.current;
+    const listener = (e) => {
+      const detail = e.detail;
+      onAction == null ? void 0 : onAction(detail);
+    };
+    current.addEventListener("_action", listener);
+    return () => {
+      current.removeEventListener("_action", listener);
+    };
+  }, [el, onAction]);
+  return (
+    // @ts-expect-error - stable WCProps requires text, but experimental supports icon-only mode
+    /* @__PURE__ */ jsxRuntime.jsx("goa-menu-button", { ..._props, version: "2", ref: el, children })
+  );
+}
 function GoabxModal({
   heading,
   children,
@@ -1218,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;
@@ -1242,6 +1329,8 @@ exports.GoabxInputText = GoabxInputText;
 exports.GoabxInputTime = GoabxInputTime;
 exports.GoabxInputUrl = GoabxInputUrl;
 exports.GoabxLink = GoabxLink;
+exports.GoabxMenuAction = GoabxMenuAction;
+exports.GoabxMenuButton = GoabxMenuButton;
 exports.GoabxModal = GoabxModal;
 exports.GoabxNotification = GoabxNotification;
 exports.GoabxPagination = GoabxPagination;