@abgov/react-components 6.11.0-dev.1 → 6.11.0-dev.10

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';
@@ -25,6 +28,7 @@ export * from './side-menu-group/side-menu-group';
 export * from './side-menu-heading/side-menu-heading';
 export * from './table/table';
 export * from './table/table-sort-header';
+export * from './tab/tab';
 export * from './tabs/tabs';
 export * from './textarea/textarea';
 export * from './work-side-menu/work-side-menu';

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/tab/tab.d.ts

@@ -0,0 +1,21 @@
+import { JSX } from 'react';
+interface WCProps {
+    heading?: React.ReactNode;
+    disabled?: string;
+    slug?: string;
+}
+declare module "react" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "goa-tab": WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface GoabxTabItemProps {
+    heading?: React.ReactNode;
+    disabled?: boolean;
+    children?: React.ReactNode;
+    slug?: string;
+}
+export declare function GoabxTab({ heading, disabled, slug, children }: GoabxTabItemProps): JSX.Element;
+export {};

package/experimental/tabs/tabs.d.ts

@@ -1,5 +1,5 @@
 import { default as React, JSX } from 'react';
-import { GoabTabsOnChangeDetail, GoabTabsVariant } from '@abgov/ui-components-common';
+import { GoabTabsOnChangeDetail, GoabTabsOrientation, GoabTabsVariant } from '@abgov/ui-components-common';
 interface WCProps {
     initialtab?: number;
     ref: React.RefObject<HTMLElement | null>;
@@ -7,6 +7,7 @@ interface WCProps {
     testid?: string;
     variant?: GoabTabsVariant;
     version?: string;
+    orientation?: string;
 }
 declare module "react" {
     namespace JSX {
@@ -20,8 +21,9 @@ export interface GoabxTabsProps {
     children?: React.ReactNode;
     testId?: string;
     variant?: GoabTabsVariant;
+    /** Tab layout orientation. "auto" stacks vertically on mobile (default), "horizontal" keeps horizontal on all screen sizes. */
+    orientation?: GoabTabsOrientation;
     onChange?: (detail: GoabTabsOnChangeDetail) => void;
-    version?: string;
 }
-export declare function GoabxTabs({ initialTab, children, testId, onChange, variant, version, }: GoabxTabsProps): JSX.Element;
+export declare function GoabxTabs({ initialTab, children, testId, onChange, variant, orientation, }: GoabxTabsProps): JSX.Element;
 export default GoabxTabs;

package/experimental/work-side-menu-group/work-side-menu-group.d.ts

@@ -4,6 +4,7 @@ interface WCProps {
     heading: string;
     icon: GoabIconType;
     testid?: string;
+    open?: boolean;
 }
 declare module "react" {
     namespace JSX {
@@ -15,6 +16,7 @@ declare module "react" {
 export interface GoabWorkSideMenuGroupProps {
     heading: string;
     icon: GoabIconType;
+    open?: boolean;
     testId?: string;
     children?: React.ReactNode;
 }

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,
@@ -1042,13 +1128,27 @@ function GoabxTableSortHeader({
   const _props = parseISO.transformProps(rest, parseISO.lowercase);
   return /* @__PURE__ */ jsxRuntime.jsx("goa-table-sort-header", { ..._props, children });
 }
+function GoabxTab({ heading, disabled, slug, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "goa-tab",
+    {
+      slug,
+      disabled: disabled ? "true" : void 0,
+      heading: typeof heading === "string" ? heading : void 0,
+      children: [
+        typeof heading !== "string" && /* @__PURE__ */ jsxRuntime.jsx("span", { slot: "heading", children: heading }),
+        children
+      ]
+    }
+  );
+}
 function GoabxTabs({
   initialTab,
   children,
   testId,
   onChange,
   variant,
-  version = "2"
+  orientation
 }) {
   const ref = react.useRef(null);
   react.useEffect(() => {
@@ -1071,7 +1171,8 @@ function GoabxTabs({
       initialtab: initialTab,
       testid: testId,
       variant,
-      version,
+      version: "2",
+      orientation,
       children
     }
   );
@@ -1190,6 +1291,7 @@ function GoabxWorkSideMenuGroup(props) {
     {
       heading: props.heading,
       icon: props.icon,
+      open: props.open ? true : void 0,
       testid: props.testId,
       children: props.children
     }
@@ -1203,6 +1305,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;
@@ -1227,6 +1330,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;
@@ -1235,6 +1340,7 @@ exports.GoabxRadioItem = GoabxRadioItem;
 exports.GoabxSideMenu = GoabxSideMenu;
 exports.GoabxSideMenuGroup = GoabxSideMenuGroup;
 exports.GoabxSideMenuHeading = GoabxSideMenuHeading;
+exports.GoabxTab = GoabxTab;
 exports.GoabxTable = GoabxTable;
 exports.GoabxTableSortHeader = GoabxTableSortHeader;
 exports.GoabxTabs = GoabxTabs;