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

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';
@@ -24,7 +27,8 @@ export * from './side-menu/side-menu';
 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 './table-sort-header/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/table/table.d.ts

@@ -1,10 +1,11 @@
-import { GoabTableOnSortDetail, GoabTableVariant, Margins } from '@abgov/ui-components-common';
+import { GoabTableOnSortDetail, GoabTableOnMultiSortDetail, GoabTableSortMode, GoabTableVariant, Margins } from '@abgov/ui-components-common';
 import { ReactNode } from 'react';
 interface WCProps extends Margins {
     ref?: React.RefObject<HTMLElement | null>;
     width?: string;
     stickyheader?: string;
     variant?: GoabTableVariant;
+    "sort-mode"?: GoabTableSortMode;
     testid?: string;
     striped?: string;
     version?: string;
@@ -19,6 +20,8 @@ declare module "react" {
 export interface GoabxTableProps extends Margins {
     width?: string;
     onSort?: (detail: GoabTableOnSortDetail) => void;
+    onMultiSort?: (detail: GoabTableOnMultiSortDetail) => void;
+    sortMode?: GoabTableSortMode;
     variant?: GoabTableVariant;
     striped?: boolean;
     testId?: string;
@@ -26,5 +29,5 @@ export interface GoabxTableProps extends Margins {
     children?: ReactNode;
 }
 export type TableProps = GoabxTableProps;
-export declare function GoabxTable({ onSort, version, ...props }: GoabxTableProps): import("react/jsx-runtime").JSX.Element;
+export declare function GoabxTable({ onSort, onMultiSort, sortMode, version, ...props }: GoabxTableProps): import("react/jsx-runtime").JSX.Element;
 export default GoabxTable;

package/experimental/{table → table-sort-header}/table-sort-header.d.ts

@@ -1,8 +1,9 @@
-import { DataAttributes, GoabTableSortDirection } from '@abgov/ui-components-common';
+import { DataAttributes, GoabTableSortDirection, GoabTableSortOrder } from '@abgov/ui-components-common';
 import { JSX } from 'react';
 interface WCProps {
     name?: string;
     direction?: GoabTableSortDirection;
+    "sort-order"?: GoabTableSortOrder;
 }
 declare module "react" {
     namespace JSX {
@@ -14,7 +15,8 @@ declare module "react" {
 export interface GoabxTableSortProps extends DataAttributes {
     name?: string;
     direction?: GoabTableSortDirection;
+    sortOrder?: GoabTableSortOrder;
     children?: React.ReactNode;
 }
-export declare function GoabxTableSortHeader({ children, ...rest }: GoabxTableSortProps): JSX.Element;
+export declare function GoabxTableSortHeader({ name, direction, sortOrder, children, ...rest }: GoabxTableSortProps): JSX.Element;
 export default GoabxTableSortHeader;

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,
@@ -1002,7 +1088,7 @@ function GoabxSideMenuHeading({
     meta && /* @__PURE__ */ jsxRuntime.jsx("span", { slot: "meta", children: meta })
   ] });
 }
-function GoabxTable({ onSort, version = "2", ...props }) {
+function GoabxTable({ onSort, onMultiSort, sortMode, version = "2", ...props }) {
   const ref = react.useRef(null);
   react.useEffect(() => {
     if (!ref.current) {
@@ -1013,17 +1099,24 @@ function GoabxTable({ onSort, version = "2", ...props }) {
       const detail = e.detail;
       onSort == null ? void 0 : onSort(detail);
     };
+    const multiSortListener = (e) => {
+      const detail = e.detail;
+      onMultiSort == null ? void 0 : onMultiSort(detail);
+    };
     current.addEventListener("_sort", sortListener);
+    current.addEventListener("_multisort", multiSortListener);
     return () => {
       current.removeEventListener("_sort", sortListener);
+      current.removeEventListener("_multisort", multiSortListener);
     };
-  }, [ref, onSort]);
+  }, [ref, onSort, onMultiSort]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "goa-table",
     {
       ref,
       width: props.width,
       variant: props.variant,
+      "sort-mode": sortMode,
       striped: props.striped ? "true" : void 0,
       testid: props.testId,
       mt: props.mt,
@@ -1036,11 +1129,27 @@ function GoabxTable({ onSort, version = "2", ...props }) {
   );
 }
 function GoabxTableSortHeader({
+  name,
+  direction = "none",
+  sortOrder,
   children,
   ...rest
 }) {
-  const _props = parseISO.transformProps(rest, parseISO.lowercase);
-  return /* @__PURE__ */ jsxRuntime.jsx("goa-table-sort-header", { ..._props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("goa-table-sort-header", { name, direction, "sort-order": sortOrder, ...rest, 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,
@@ -1048,7 +1157,7 @@ function GoabxTabs({
   testId,
   onChange,
   variant,
-  version = "2"
+  orientation
 }) {
   const ref = react.useRef(null);
   react.useEffect(() => {
@@ -1071,7 +1180,8 @@ function GoabxTabs({
       initialtab: initialTab,
       testid: testId,
       variant,
-      version,
+      version: "2",
+      orientation,
       children
     }
   );
@@ -1190,6 +1300,7 @@ function GoabxWorkSideMenuGroup(props) {
     {
       heading: props.heading,
       icon: props.icon,
+      open: props.open ? true : void 0,
       testid: props.testId,
       children: props.children
     }
@@ -1203,6 +1314,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 +1339,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 +1349,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;