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

package/experimental.mjs

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { t as transformProps, l as lowercase, f as format, p as parseISO, i as isValid } from "./parseISO-BHUUf1QW.mjs";
+import { t as transformProps, l as lowercase, f as format, p as parseISO, i as isValid, k as kebab } from "./parseISO-BHUUf1QW.mjs";
 import { useRef, useEffect } from "react";
 function getIconValue(icon, iconType) {
   if (icon !== void 0) {
@@ -174,6 +174,54 @@ function GoabxCheckbox({
     }
   );
 }
+function GoabxCheckboxList({
+  name,
+  value = [],
+  disabled,
+  error,
+  testId,
+  maxWidth,
+  size = "default",
+  children,
+  onChange,
+  mt,
+  mr,
+  mb,
+  ml
+}) {
+  const el = useRef(null);
+  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__ */ 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,
@@ -744,6 +792,44 @@ function GoabxLink({
     }
   );
 }
+function GoabxMenuAction(props) {
+  const _props = transformProps(props, lowercase);
+  return /* @__PURE__ */ jsx("goa-menu-action", { ..._props });
+}
+function GoabxMenuButton({
+  type = "primary",
+  testId,
+  onAction,
+  children,
+  ...rest
+}) {
+  const el = useRef(null);
+  const _props = transformProps(
+    { type, testid: testId, ...rest },
+    kebab
+  );
+  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__ */ jsx("goa-menu-button", { ..._props, version: "2", ref: el, children })
+  );
+}
 function GoabxModal({
   heading,
   children,
@@ -1000,7 +1086,7 @@ function GoabxSideMenuHeading({
     meta && /* @__PURE__ */ jsx("span", { slot: "meta", children: meta })
   ] });
 }
-function GoabxTable({ onSort, version = "2", ...props }) {
+function GoabxTable({ onSort, onMultiSort, sortMode, version = "2", ...props }) {
   const ref = useRef(null);
   useEffect(() => {
     if (!ref.current) {
@@ -1011,17 +1097,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__ */ 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,
@@ -1034,11 +1127,27 @@ function GoabxTable({ onSort, version = "2", ...props }) {
   );
 }
 function GoabxTableSortHeader({
+  name,
+  direction = "none",
+  sortOrder,
   children,
   ...rest
 }) {
-  const _props = transformProps(rest, lowercase);
-  return /* @__PURE__ */ jsx("goa-table-sort-header", { ..._props, children });
+  return /* @__PURE__ */ jsx("goa-table-sort-header", { name, direction, "sort-order": sortOrder, ...rest, children });
+}
+function GoabxTab({ heading, disabled, slug, children }) {
+  return /* @__PURE__ */ jsxs(
+    "goa-tab",
+    {
+      slug,
+      disabled: disabled ? "true" : void 0,
+      heading: typeof heading === "string" ? heading : void 0,
+      children: [
+        typeof heading !== "string" && /* @__PURE__ */ jsx("span", { slot: "heading", children: heading }),
+        children
+      ]
+    }
+  );
 }
 function GoabxTabs({
   initialTab,
@@ -1046,7 +1155,7 @@ function GoabxTabs({
   testId,
   onChange,
   variant,
-  version = "2"
+  orientation
 }) {
   const ref = useRef(null);
   useEffect(() => {
@@ -1069,7 +1178,8 @@ function GoabxTabs({
       initialtab: initialTab,
       testid: testId,
       variant,
-      version,
+      version: "2",
+      orientation,
       children
     }
   );
@@ -1188,6 +1298,7 @@ function GoabxWorkSideMenuGroup(props) {
     {
       heading: props.heading,
       icon: props.icon,
+      open: props.open ? true : void 0,
       testid: props.testId,
       children: props.children
     }
@@ -1202,6 +1313,7 @@ export {
   GoabxCalendar,
   GoabxCallout,
   GoabxCheckbox,
+  GoabxCheckboxList,
   GoabxDatePicker,
   GoabxDrawer,
   GoabxDropdown,
@@ -1226,6 +1338,8 @@ export {
   GoabxInputTime,
   GoabxInputUrl,
   GoabxLink,
+  GoabxMenuAction,
+  GoabxMenuButton,
   GoabxModal,
   GoabxNotification,
   GoabxPagination,
@@ -1234,6 +1348,7 @@ export {
   GoabxSideMenu,
   GoabxSideMenuGroup,
   GoabxSideMenuHeading,
+  GoabxTab,
   GoabxTable,
   GoabxTableSortHeader,
   GoabxTabs,