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

package/experimental/index.d.ts

@@ -16,6 +16,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 +27,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.js

@@ -746,6 +746,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 +1080,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 +1123,8 @@ function GoabxTabs({
       initialtab: initialTab,
       testid: testId,
       variant,
-      version,
+      version: "2",
+      orientation,
       children
     }
   );
@@ -1227,6 +1280,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 +1290,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;