@abgov/react-components 7.4.0 → 8.0.0-dev.1

package/README.md

@@ -9,7 +9,7 @@ Supported React versions: 17, 18, and 19.
 ## Install
 
 ```bash
-npm i @abgov/react-components @abgov/web-components @abgov/ui-components-common @abgov/design-tokens
+npm i @abgov/react-components @abgov/web-components @abgov/ui-components-common
 ```
 
 ## Register the web components
@@ -23,12 +23,10 @@ import "@abgov/web-components";
 
 ## Add styles
 
-Import the component styles and design tokens in your main stylesheet, such as
-`src/index.css`:
+Import the component styles in your main stylesheet, such as `src/index.css`. This stylesheet includes the design tokens and dark theme overrides:
 
 ```css
 @import "@abgov/web-components/index.css";
-@import "@abgov/design-tokens/dist/tokens.css";
 ```
 
 ## Add icons

package/index.js

@@ -78,7 +78,6 @@ function renderSlottedItems(children, slot) {
   });
 }
 function GoabAppHeader({
-  onMenuClick,
   children,
   secondaryText,
   banner,
@@ -87,41 +86,14 @@ function GoabAppHeader({
   utilities,
   ...rest
 }) {
-  const el = react.useRef(null);
   const _props = transformProps(rest, lowercase);
-  react.useEffect(() => {
-    if (!el.current) {
-      return;
-    }
-    if (!onMenuClick) {
-      return;
-    }
-    const current = el.current;
-    const listener = () => {
-      onMenuClick == null ? void 0 : onMenuClick();
-    };
-    current.addEventListener("_menuClick", listener);
-    return () => {
-      current.removeEventListener("_menuClick", listener);
-    };
-  }, [el, onMenuClick]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "goa-app-header",
-    {
-      ref: el,
-      hasmenuclickhandler: onMenuClick ? "true" : "false",
-      secondarytext: secondaryText,
-      ..._props,
-      version: "2",
-      children: [
-        children,
-        banner && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "banner", children: banner }),
-        phase && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "phase", children: phase }),
-        navigation && renderSlottedItems(navigation, "navigation"),
-        utilities && renderSlottedItems(utilities, "utilities")
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("goa-app-header", { secondarytext: secondaryText, ..._props, children: [
+    children,
+    banner && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "banner", children: banner }),
+    phase && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "phase", children: phase }),
+    navigation && renderSlottedItems(navigation, "navigation"),
+    utilities && renderSlottedItems(utilities, "utilities")
+  ] });
 }
 function GoabAppHeaderMenu({
   children,
@@ -153,7 +125,6 @@ function GoabBadge({
       icontype: iconType,
       content: typeof content === "string" ? content : void 0,
       ..._props,
-      version: "2",
       size,
       emphasis,
       children: typeof content !== "string" && content != null && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "content", children: content })
@@ -174,6 +145,7 @@ function GoabButton({
   onClick,
   actionArgs,
   actionArg,
+  ariaLabel,
   children,
   ...rest
 }) {
@@ -202,17 +174,18 @@ function GoabButton({
       disabled: disabled ? "true" : void 0,
       "action-arg": actionArg,
       "action-args": JSON.stringify(actionArgs),
+      arialabel: ariaLabel || void 0,
       ..._props,
-      version: "2",
       children
     }
   );
 }
 function GoabButtonGroup({
   children,
+  alignment = "start",
   ...rest
 }) {
-  const _props = transformProps(rest, lowercase);
+  const _props = transformProps({ alignment, ...rest }, lowercase);
   return /* @__PURE__ */ jsxRuntime.jsx("goa-button-group", { ..._props, children });
 }
 function GoabCalendar({
@@ -247,7 +220,6 @@ function GoabCalendar({
       name,
       min: min || void 0,
       max: max || void 0,
-      version: "2",
       ..._props
     }
   );
@@ -255,17 +227,16 @@ function GoabCalendar({
 const GoabCallout = ({
   type = "information",
   iconTheme = "outline",
-  size = "large",
   ariaLive = "off",
   emphasis = "medium",
   children,
   ...rest
 }) => {
   const _props = transformProps(
-    { type, icontheme: iconTheme, size, arialive: ariaLive, emphasis, ...rest },
+    { type, icontheme: iconTheme, arialive: ariaLive, emphasis, ...rest },
     lowercase
   );
-  return /* @__PURE__ */ jsxRuntime.jsx("goa-callout", { ..._props, version: "2", children });
+  return /* @__PURE__ */ jsxRuntime.jsx("goa-callout", { ..._props, children });
 };
 function GoabCheckbox({
   error,
@@ -323,7 +294,6 @@ function GoabCheckbox({
       disabled: disabled ? "true" : void 0,
       value: typeof value === "boolean" ? value ? "true" : void 0 : value,
       description: typeof description === "string" ? description : void 0,
-      version: "2",
       children: [
         children,
         typeof description !== "string" && description && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "description", children: description }),
@@ -340,6 +310,7 @@ function GoabCheckboxList({
   testId,
   maxWidth,
   size = "default",
+  ariaLabel,
   children,
   onChange,
   onFocus,
@@ -384,8 +355,8 @@ function GoabCheckboxList({
       error: error ? "true" : void 0,
       testid: testId,
       maxwidth: maxWidth,
-      version: "2",
       size,
+      arialabel: ariaLabel,
       mt,
       mr,
       mb,
@@ -457,7 +428,7 @@ function GoabContainer({
 function GoabDataGrid({
   keyboardIconVisibility = "visible",
   keyboardIconPosition = "left",
-  keyboardNav,
+  keyboardNav = "table",
   children
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2732,7 +2703,6 @@ function GoabDatePicker({
       min: formatValue(min) || void 0,
       max: formatValue(max) || void 0,
       relative: relative ? "true" : void 0,
-      version: "2",
       ..._props
     }
   );
@@ -2755,7 +2725,7 @@ function GoabDivider(props) {
 }
 function GoabDrawer({
   position,
-  open,
+  open = false,
   heading,
   maxSize,
   testId,
@@ -2789,7 +2759,6 @@ function GoabDrawer({
       heading: typeof heading === "string" ? heading : void 0,
       maxsize: maxSize,
       testid: testId,
-      version: "2",
       children: [
         heading && typeof heading !== "string" && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "heading", children: heading }),
         actions && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "actions", children: actions }),
@@ -2866,7 +2835,6 @@ function GoabDropdown({
       native: native ? "true" : void 0,
       relative: relative ? "true" : void 0,
       ..._props,
-      version: "2",
       children
     }
   );
@@ -2980,7 +2948,7 @@ function GoabFileUploadCard({
       current.removeEventListener("_cancel", cancelHandler);
     };
   }, [el, onDelete, onCancel, filename]);
-  return /* @__PURE__ */ jsxRuntime.jsx("goa-file-upload-card", { ref: el, ..._props, version: "2" });
+  return /* @__PURE__ */ jsxRuntime.jsx("goa-file-upload-card", { ref: el, ..._props });
 }
 function GoabFileUploadInput({ onSelectFile, ...rest }) {
   const el = react.useRef(null);
@@ -2997,11 +2965,11 @@ function GoabFileUploadInput({ onSelectFile, ...rest }) {
       current.removeEventListener("_selectFile", handler);
     };
   }, [el, onSelectFile]);
-  return /* @__PURE__ */ jsxRuntime.jsx("goa-file-upload-input", { ref: el, ..._props, version: "2" });
+  return /* @__PURE__ */ jsxRuntime.jsx("goa-file-upload-input", { ref: el, ..._props });
 }
 function GoabAppFooter({ children, ...rest }) {
   const _props = transformProps(rest, lowercase);
-  return /* @__PURE__ */ jsxRuntime.jsx("goa-app-footer", { ..._props, version: "2", children });
+  return /* @__PURE__ */ jsxRuntime.jsx("goa-app-footer", { ..._props, children });
 }
 function GoabAppFooterMetaSection({
   children,
@@ -3211,7 +3179,6 @@ function GoabFormItem({
       helptext: typeof helpText === "string" ? helpText : void 0,
       "public-form-summary-order": publicFormSummaryOrder,
       ..._props,
-      version: "2",
       children: [
         error && typeof error !== "string" && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "error", children: error }),
         helpText && typeof helpText !== "string" && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "helptext", children: helpText }),
@@ -3361,12 +3328,13 @@ function GoabIconButton({
     }
   );
 }
-function GoabIcon({ inverted, ...rest }) {
+function GoabIcon({ inverted, ariaHidden, ...rest }) {
   const _props = transformProps(rest, lowercase);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "goa-icon",
     {
       inverted: typeof inverted === "boolean" ? inverted ? "true" : void 0 : inverted,
+      ariahidden: ariaHidden ? "true" : void 0,
       ..._props
     }
   );
@@ -3440,7 +3408,6 @@ function GoabInput({
       readonly: readonly ? "true" : void 0,
       error: error ? "true" : void 0,
       handletrailingiconclick: onTrailingIconClick ? "true" : "false",
-      version: "2",
       children: [
         leadingContent && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "leadingContent", children: leadingContent }),
         trailingContent && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "trailingContent", children: trailingContent })
@@ -3683,10 +3650,7 @@ function GoabMenuButton({
       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 })
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx("goa-menu-button", { ..._props, ref: el, children });
 }
 function GoabMenuAction(props) {
   const _props = transformProps(props, lowercase);
@@ -3774,7 +3738,6 @@ function GoabModal({
       transition,
       calloutvariant: calloutVariant,
       testid: testId,
-      version: "2",
       children: [
         heading && typeof heading !== "string" && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "heading", children: heading }),
         actions && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "actions", children: actions }),
@@ -3817,7 +3780,6 @@ const GoabNotification = ({
       arialive: ariaLive,
       emphasis,
       compact: compact ? "true" : void 0,
-      version: "2",
       children
     }
   );
@@ -3869,8 +3831,7 @@ function GoabPagination({ onChange, ...props }) {
       mb: props.mb,
       ml: props.ml,
       mr: props.mr,
-      testid: props.testId,
-      version: "2"
+      testid: props.testId
     }
   );
 }
@@ -3929,7 +3890,6 @@ function GoabPushDrawer({
       heading: typeof heading === "string" ? heading : void 0,
       width,
       testid: testId,
-      version: "2",
       children: [
         heading && typeof heading !== "string" && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "heading", children: heading }),
         actions && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "actions", children: actions }),
@@ -3975,7 +3935,6 @@ function GoabRadioItem({
       mr,
       mb,
       ml,
-      version: "2",
       children: [
         description && typeof description !== "string" && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "description", children: description }),
         reveal && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "reveal", children: reveal }),
@@ -4033,7 +3992,6 @@ function GoabRadioGroup({
       name,
       disabled: disabled ? "true" : void 0,
       error: error ? "true" : void 0,
-      version: "2",
       children
     }
   );
@@ -4058,7 +4016,6 @@ function GoabSideMenuGroup({
       mr,
       mb,
       ml,
-      version: "2",
       children
     }
   );
@@ -4069,13 +4026,13 @@ function GoabSideMenuHeading({
   icon,
   children
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("goa-side-menu-heading", { icon, testid: testId, version: "2", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("goa-side-menu-heading", { icon, testid: testId, children: [
     children,
     meta && /* @__PURE__ */ jsxRuntime.jsx("span", { slot: "meta", children: meta })
   ] });
 }
 function GoabSideMenu({ testId, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("goa-side-menu", { testid: testId, version: "2", children });
+  return /* @__PURE__ */ jsxRuntime.jsx("goa-side-menu", { testid: testId, children });
 }
 const GoabSkeleton = ({
   maxWidth,
@@ -4192,7 +4149,6 @@ function GoabTable({ onSort, onMultiSort, sortMode, ...props }) {
       mb: props.mb,
       ml: props.ml,
       mr: props.mr,
-      version: "2",
       children: /* @__PURE__ */ jsxRuntime.jsx("table", { style: { width: "100%" }, children: props.children })
     }
   );
@@ -4210,7 +4166,6 @@ function GoabTableSortHeader({
       name,
       direction,
       "sort-order": sortOrder,
-      version: "2",
       ...rest,
       children
     }
@@ -4246,7 +4201,6 @@ function GoabTabs({
       initialtab: initialTab,
       testid: testId,
       variant,
-      version: "2",
       orientation,
       navigation,
       children
@@ -4344,7 +4298,6 @@ function GoabTextArea({
       readOnly: readOnly ? "true" : void 0,
       disabled: disabled ? "true" : void 0,
       error: error ? "true" : void 0,
-      version: "2",
       ..._props
     }
   );
@@ -4418,7 +4371,6 @@ const GoabFilterChip = ({
       ref: el,
       content: typeof content === "string" ? content : void 0,
       error: error ? "true" : void 0,
-      version: "2",
       ..._props,
       children: typeof content !== "string" && content != null && /* @__PURE__ */ jsxRuntime.jsx("div", { slot: "content", children: content })
     }