@okta/odyssey-react-mui 0.22.0 → 0.24.0

package/dist/useUniqueAlphabeticalId.js

@@ -9,6 +9,7 @@
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
+
 import { useMemo } from "react";
 import { createUniqueAlphabeticalId } from "./createUniqueAlphabeticalId.js";
 export const useUniqueAlphabeticalId = id => {

package/dist/useUniqueAlphabeticalId.js.map

@@ -1 +1 @@
-{"version":3,"file":"useUniqueAlphabeticalId.js","names":["useMemo","createUniqueAlphabeticalId","useUniqueAlphabeticalId","id","uniqueAlphabeticalId"],"sources":["../src/useUniqueAlphabeticalId.ts"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useMemo } from \"react\";\n\nimport { createUniqueAlphabeticalId } from \"./createUniqueAlphabeticalId\";\n\nexport const useUniqueAlphabeticalId = (id?: string) => {\n  const uniqueAlphabeticalId = useMemo(() => createUniqueAlphabeticalId(), []);\n\n  return id ?? uniqueAlphabeticalId;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAASA,OAAT,QAAwB,OAAxB;SAESC,0B;AAET,OAAO,MAAMC,uBAAuB,GAAIC,EAAD,IAAiB;EACtD,MAAMC,oBAAoB,GAAGJ,OAAO,CAAC,MAAMC,0BAA0B,EAAjC,EAAqC,EAArC,CAApC;EAEA,OAAOE,EAAE,IAAIC,oBAAb;AACD,CAJM"}
+{"version":3,"file":"useUniqueAlphabeticalId.js","names":["useMemo","createUniqueAlphabeticalId","useUniqueAlphabeticalId","id","uniqueAlphabeticalId"],"sources":["../src/useUniqueAlphabeticalId.ts"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useMemo } from \"react\";\n\nimport { createUniqueAlphabeticalId } from \"./createUniqueAlphabeticalId\";\n\nexport const useUniqueAlphabeticalId = (id?: string) => {\n  const uniqueAlphabeticalId = useMemo(() => createUniqueAlphabeticalId(), []);\n\n  return id ?? uniqueAlphabeticalId;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,OAAO,QAAQ,OAAO;AAAC,SAEvBC,0BAA0B;AAEnC,OAAO,MAAMC,uBAAuB,GAAIC,EAAW,IAAK;EACtD,MAAMC,oBAAoB,GAAGJ,OAAO,CAAC,MAAMC,0BAA0B,CAAC,CAAC,EAAE,EAAE,CAAC;EAE5E,OAAOE,EAAE,IAAIC,oBAAoB;AACnC,CAAC"}

package/dist/useUniqueId.js

@@ -9,6 +9,7 @@
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
+
 import { useMemo } from "react";
 import { createUniqueId } from "./createUniqueId.js";
 export const useUniqueId = id => {

package/dist/useUniqueId.js.map

@@ -1 +1 @@
-{"version":3,"file":"useUniqueId.js","names":["useMemo","createUniqueId","useUniqueId","id","uniqueId"],"sources":["../src/useUniqueId.ts"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useMemo } from \"react\";\n\nimport { createUniqueId } from \"./createUniqueId\";\n\nexport const useUniqueId = (id?: string) => {\n  const uniqueId = useMemo(() => createUniqueId(), []);\n\n  return id ?? uniqueId;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAASA,OAAT,QAAwB,OAAxB;SAESC,c;AAET,OAAO,MAAMC,WAAW,GAAIC,EAAD,IAAiB;EAC1C,MAAMC,QAAQ,GAAGJ,OAAO,CAAC,MAAMC,cAAc,EAArB,EAAyB,EAAzB,CAAxB;EAEA,OAAOE,EAAE,IAAIC,QAAb;AACD,CAJM"}
+{"version":3,"file":"useUniqueId.js","names":["useMemo","createUniqueId","useUniqueId","id","uniqueId"],"sources":["../src/useUniqueId.ts"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useMemo } from \"react\";\n\nimport { createUniqueId } from \"./createUniqueId\";\n\nexport const useUniqueId = (id?: string) => {\n  const uniqueId = useMemo(() => createUniqueId(), []);\n\n  return id ?? uniqueId;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,OAAO,QAAQ,OAAO;AAAC,SAEvBC,cAAc;AAEvB,OAAO,MAAMC,WAAW,GAAIC,EAAW,IAAK;EAC1C,MAAMC,QAAQ,GAAGJ,OAAO,CAAC,MAAMC,cAAc,CAAC,CAAC,EAAE,EAAE,CAAC;EAEpD,OAAOE,EAAE,IAAIC,QAAQ;AACvB,CAAC"}

package/i18n.config.json

@@ -0,0 +1,8 @@
+{
+  "defaultBranch": "develop",
+  "resourceFile": "odyssey-react-mui.properties",
+  "resourceFilePath": "packages/odyssey-react-mui/src/properties",
+  "translationsFilePath": "packages/odyssey-react-mui/src/properties/translations",
+  "commitPrefix": "chore(odyssey-react-mui): ",
+  "reviewers": ["okta/eng-globalizationcore", "okta/design-system"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "0.22.0",
+  "version": "0.24.0",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -12,6 +12,9 @@
     ".": {
       "types": "./dist/src/index.d.ts",
       "default": "./dist/index.js"
+    },
+    "./README.md": {
+      "default": "./README.md"
     }
   },
   "repository": {
@@ -23,9 +26,11 @@
     "@emotion/cache": "^11.10.5",
     "@mui/icons-material": "^5.11.0",
     "@mui/lab": "^5.0.0-alpha.117",
-    "@mui/material": "^5.11.6",
+    "@mui/material": "^5.12.3",
     "@mui/utils": "^5.11.2",
-    "@okta/odyssey-design-tokens": "0.22.0"
+    "@okta/odyssey-design-tokens": "0.24.0",
+    "i18next": "^22.4.15",
+    "react-i18next": "^12.2.2"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
@@ -33,5 +38,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "b1a4a93f7d570162a52e4c28012fb65e31d5bb4b"
+  "gitHead": "a0606b67a94216882f377514f2f733c6ebb39f9d"
 }

package/scripts/properties-to-ts.js

@@ -0,0 +1,103 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+// Part of this has been copied over from @okta/ui-build-tools' own internal node script
+// https://github.com/okta/ui-build-tools/blob/master/packages/clis/i18n/properties-to-json.js
+
+const { resolve, join, basename, extname } = require("node:path");
+const {
+  readFileSync,
+  writeFileSync,
+  rmSync,
+  existsSync,
+  mkdirSync,
+} = require("fs");
+const properties = require("properties");
+const readdir = require("recursive-readdir");
+
+const convert = (baseFiles, propertiesTargetDir) => {
+  for (const src of baseFiles) {
+    const filename = basename(src);
+    const extension = extname(src);
+    const source = `${readFileSync(src)}`;
+
+    properties.parse(source, function (error, obj) {
+      if (error) {
+        return console.error(error);
+      }
+
+      const targetFile = join(
+        propertiesTargetDir,
+        filename.replace(extension, ".ts")
+      );
+      writeFileSync(
+        targetFile,
+        `export const translation = ${JSON.stringify(obj)};`
+      );
+    });
+  }
+};
+
+async function convertPropertiesToJson({ resourcePath, targetJsonPath }) {
+  const sourceDirectory = resolve(resourcePath);
+  const propertiesTargetDirectory = resolve(targetJsonPath);
+
+  if (!existsSync(sourceDirectory)) {
+    mkdirSync(sourceDirectory);
+  }
+  if (existsSync(propertiesTargetDirectory)) {
+    rmSync(propertiesTargetDirectory, { recursive: true, force: true });
+  }
+  mkdirSync(propertiesTargetDirectory);
+
+  let baseFiles = await readdir(sourceDirectory);
+  convert(baseFiles, propertiesTargetDirectory);
+}
+
+exports.handler = async (argv) => {
+  const { resourcePath, targetJsonPath } = argv;
+
+  await convertPropertiesToJson({
+    resourcePath,
+    targetJsonPath,
+  });
+};
+
+require("yargs")
+  .scriptName("properties-to-ts")
+  .usage("$0 <cmd> [args]")
+  .command(
+    "bundle",
+    "Converts properties file to ts",
+    (yargs) => {
+      yargs
+        .positional("resourcePath", {
+          type: "string",
+          default: "src/properties",
+          describe: "A relative path to resources based on cwd.",
+        })
+        .positional("targetJsonPath", {
+          type: "string",
+          default: "src/properties/ts",
+          describe: "A relative path to directory for ts file output",
+        });
+    },
+    function (argv) {
+      const { resourcePath, targetJsonPath } = argv;
+
+      convertPropertiesToJson({
+        resourcePath,
+        targetJsonPath,
+      });
+    }
+  )
+  .help().argv;

package/src/@types/i18next.d.ts

@@ -0,0 +1,22 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import "i18next";
+import { translation as en } from "../properties/ts/odyssey-react-mui";
+
+declare module "i18next" {
+  interface CustomTypeOptions {
+    resources: {
+      translations: typeof en;
+    };
+  }
+}

package/src/Autocomplete.tsx

@@ -62,6 +62,12 @@ export type AutocompleteProps<
     undefined,
     IsCustomValueAllowed
   >["onChange"];
+  onInputChange?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["onInputChange"];
   options: MuiAutocompleteProps<
     OptionType,
     HasMultipleChoices,
@@ -89,14 +95,16 @@ const Autocomplete = <
   hint,
   label,
   onChange,
+  onInputChange,
   options,
   value,
 }: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {
   const renderInput = useCallback(
     ({ InputLabelProps, InputProps, ...params }) => (
       <Field
-        {...InputLabelProps}
+        fieldType="single"
         hasVisibleLabel
+        id={InputLabelProps.htmlFor}
         hint={hint}
         label={label}
         renderFieldComponent={({ ariaDescribedBy, id }) => (
@@ -119,6 +127,7 @@ const Autocomplete = <
       loading={isLoading}
       multiple={hasMultipleChoices}
       onChange={onChange}
+      onInputChange={onInputChange}
       options={options}
       readOnly={isReadOnly}
       renderInput={renderInput}

package/src/Banner.tsx

@@ -13,57 +13,62 @@
 import { AlertColor, AlertProps } from "@mui/material";
 import { memo } from "react";
 import { Alert, Link, ScreenReaderText } from "./";
+import { useTranslation } from "react-i18next";
 
-export interface BannerProps {
+export type BannerProps = {
   /**
-   * Determine the color and icon of the alert
-   */
-  severity: AlertColor;
-  /**
-   * Sets the ARIA role of the alert
-   * ("status" for something that dynamically updates, "alert" for errors, null for something
-   * unchanging)
+   * If linkUrl is not undefined, this is the text of the link.
+   * If left blank, it defaults to "Learn more".
+   * Note that linkText does nothing if linkUrl is not defined
    */
-  role?: "status" | "alert";
+  linkText?: string;
   /**
-   * The text content of the alert
+   * If defined, the alert will include a link to the URL
    */
-  text: string;
+  linkUrl?: string;
   /**
    * The function that's fired when the user clicks the close button. If undefined,
    * the close button will not be shown.
    */
   onClose?: AlertProps["onClose"];
   /**
-   * If defined, the alert will include a link to the URL
+   * Sets the ARIA role of the alert
+   * ("status" for something that dynamically updates, "alert" for errors, null for something
+   * unchanging)
    */
-  linkUrl?: string;
+  role?: "status" | "alert";
   /**
-   * If linkUrl is not undefined, this is the text of the link.
-   * If left blank, it defaults to "Learn more".
-   * Note that linkText does nothing if linkUrl is not defined
+   * Determine the color and icon of the alert
    */
-  linkText?: string;
-}
+  severity: AlertColor;
+  /**
+   * The text content of the alert
+   */
+  text: string;
+};
 
 const Banner = ({
-  onClose,
-  severity,
-  role,
   linkUrl,
   linkText,
+  onClose,
+  role,
+  severity,
   text,
-}: BannerProps) => (
-  <Alert onClose={onClose} role={role} severity={severity} variant="banner">
-    <ScreenReaderText>{severity}:</ScreenReaderText>
-    {text}
-    {linkUrl && (
-      <Link href={linkUrl} variant="monochrome">
-        {linkText}
-      </Link>
-    )}
-  </Alert>
-);
+}: BannerProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <Alert onClose={onClose} role={role} severity={severity} variant="banner">
+      <ScreenReaderText>{t(`severity.${severity}`)}:</ScreenReaderText>
+      {text}
+      {linkUrl && (
+        <Link href={linkUrl} variant="monochrome">
+          {linkText}
+        </Link>
+      )}
+    </Alert>
+  );
+};
 
 const MemoizedBanner = memo(Banner);
 

package/src/Button.tsx

@@ -12,17 +12,20 @@
 
 import { Button as MuiButton } from "@mui/material";
 import type { ButtonProps as MuiButtonProps } from "@mui/material";
-import { Tooltip } from "./";
-import { memo } from "react";
+import { memo, ReactElement, useContext, useMemo } from "react";
+
+import { Icon } from "./Icon";
+import { MuiPropsContext } from "./MuiPropsContext";
+import { Tooltip } from "./Tooltip";
 
 export type ButtonProps = {
-  endIcon?: React.ReactNode;
+  endIcon?: ReactElement<typeof Icon>;
   id?: string;
   isDisabled?: boolean;
   isFullWidth?: boolean;
   onClick?: MuiButtonProps["onClick"];
   size?: MuiButtonProps["size"];
-  startIcon?: React.ReactNode;
+  startIcon?: ReactElement<typeof Icon>;
   text?: string;
   /**
    * `tooltipText` determines the text of the tooltip that wraps the button if it's icon-only.
@@ -43,25 +46,42 @@ const Button = ({
   tooltipText,
   variant,
 }: ButtonProps) => {
-  const button = (
-    <MuiButton
-      disabled={isDisabled}
-      endIcon={endIcon}
-      fullWidth={isFullWidth}
-      id={id}
-      onClick={onClick}
-      size={size}
-      startIcon={startIcon}
-      variant={variant}
-    >
-      {text}
-    </MuiButton>
+  const muiProps = useContext(MuiPropsContext);
+
+  const button = useMemo(
+    () => (
+      <MuiButton
+        {...muiProps}
+        disabled={isDisabled}
+        endIcon={endIcon}
+        fullWidth={isFullWidth}
+        id={id}
+        onClick={onClick}
+        size={size}
+        startIcon={startIcon}
+        variant={variant}
+      >
+        {text}
+      </MuiButton>
+    ),
+    [
+      endIcon,
+      id,
+      isDisabled,
+      isFullWidth,
+      muiProps,
+      onClick,
+      size,
+      startIcon,
+      text,
+      variant,
+    ]
   );
 
   return (
     <>
       {tooltipText && (
-        <Tooltip describeChild placement="top" title={tooltipText}>
+        <Tooltip ariaType="description" placement="top" text={tooltipText}>
           {button}
         </Tooltip>
       )}

package/src/Checkbox.tsx

@@ -10,19 +10,22 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Checkbox as MuiCheckbox } from "@mui/material";
-import { ChangeEventHandler, memo } from "react";
+import { Checkbox as MuiCheckbox, Typography } from "@mui/material";
+import { ChangeEventHandler, memo, useMemo } from "react";
+import { useTranslation } from "react-i18next";
 
 import { FormControlLabel } from ".";
 
 export type CheckboxProps = {
   ariaLabel?: string;
   ariaLabelledBy?: string;
+  isInvalid?: boolean;
+  isValid?: boolean;
   isChecked?: boolean;
   isDefaultChecked?: boolean;
   isDisabled?: boolean;
-  hasError?: boolean;
   isIndeterminate?: boolean;
+  isRequired?: boolean;
   label?: string;
   name?: string;
   onChange?: ChangeEventHandler<EventTarget>;
@@ -32,30 +35,53 @@ export type CheckboxProps = {
 const Checkbox = ({
   ariaLabel,
   ariaLabelledBy,
+  isInvalid,
+  isValid,
   isChecked,
-  isDefaultChecked,
   isDisabled,
   isIndeterminate,
-  hasError,
-  label,
+  isRequired,
+  label: labelProp,
   name,
   onChange,
   value,
-}: CheckboxProps) => (
-  <FormControlLabel
-    aria-label={ariaLabel}
-    aria-labelledby={ariaLabelledBy}
-    checked={isChecked}
-    className={hasError ? "Mui-error" : ""}
-    control={<MuiCheckbox indeterminate={isIndeterminate} />}
-    defaultChecked={isDefaultChecked}
-    disabled={isDisabled}
-    label={label}
-    name={name}
-    onChange={onChange}
-    value={value}
-  />
-);
+}: CheckboxProps) => {
+  const { t } = useTranslation();
+
+  const label = useMemo(() => {
+    if (isRequired) {
+      return (
+        <>
+          {labelProp}{" "}
+          <Typography component="span" color="textSecondary">
+            ({t("fieldlabel.required.text")})
+          </Typography>
+        </>
+      );
+    } else {
+      return <>{labelProp}</>;
+    }
+  }, [isRequired, labelProp, t]);
+
+  return (
+    <FormControlLabel
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+      aria-required={isRequired}
+      checked={isChecked}
+      className={isInvalid ? "Mui-error" : isValid ? "Mui-valid" : ""}
+      control={
+        <MuiCheckbox indeterminate={isIndeterminate} required={isRequired} />
+      }
+      disabled={isDisabled}
+      label={label}
+      name={name}
+      onChange={onChange}
+      value={value}
+      required={isRequired}
+    />
+  );
+};
 
 const MemoizedCheckbox = memo(Checkbox);
 

package/src/CheckboxGroup.tsx

@@ -10,16 +10,11 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo, ReactElement, useMemo } from "react";
+import { FormGroup as MuiFormGroup } from "@mui/material";
+import { memo, ReactElement, useCallback } from "react";
 
-import {
-  Checkbox,
-  FormControl,
-  FormGroup,
-  FormHelperText,
-  FormLabel,
-  ScreenReaderText,
-} from ".";
+import { Checkbox } from "./Checkbox";
+import { Field } from "./Field";
 
 export type CheckboxGroupProps = {
   children:
@@ -27,9 +22,13 @@ export type CheckboxGroupProps = {
     | Array<ReactElement<typeof Checkbox>>;
   errorMessage?: string;
   hint?: string;
+  /**
+   * The id of the `input` element. This will also be the input's `name` field.
+   */
+  id?: string;
   isDisabled?: boolean;
-  label?: string;
-  name?: string;
+  isRequired?: boolean;
+  label: string;
 };
 
 const CheckboxGroup = ({
@@ -37,34 +36,31 @@ const CheckboxGroup = ({
   isDisabled,
   errorMessage,
   hint,
+  id: idOverride,
+  isRequired = false,
   label,
-  name,
 }: CheckboxGroupProps) => {
-  const ariaDescribedBy = useMemo(
-    () =>
-      errorMessage || hint
-        ? [hint && `${name}-hint`, errorMessage && `${name}-error`]
-            .filter(Boolean)
-            .join(" ")
-        : undefined,
-    [errorMessage, hint, name]
+  const renderFieldComponent = useCallback(
+    ({ ariaDescribedBy, id }) => (
+      <MuiFormGroup aria-describedby={ariaDescribedBy} id={id}>
+        {children}
+      </MuiFormGroup>
+    ),
+    [children]
   );
 
   return (
-    <FormControl
-      component="fieldset"
-      disabled={isDisabled}
-      error={Boolean(errorMessage)}
-    >
-      {label && <FormLabel component="legend">{label}</FormLabel>}
-      {hint && <FormHelperText id={`${name}-hint`}>{hint}</FormHelperText>}
-      <FormGroup aria-describedby={ariaDescribedBy}>{children}</FormGroup>
-      {errorMessage && (
-        <FormHelperText id={`${name}-error`} error>
-          <ScreenReaderText>Error:</ScreenReaderText> {errorMessage}
-        </FormHelperText>
-      )}
-    </FormControl>
+    <Field
+      errorMessage={errorMessage}
+      fieldType="group"
+      hasVisibleLabel={true}
+      hint={hint}
+      id={idOverride}
+      isDisabled={isDisabled}
+      isOptional={!isRequired}
+      label={label}
+      renderFieldComponent={renderFieldComponent}
+    />
   );
 };