@okta/odyssey-react-mui 1.4.0 → 1.6.0

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.6.0](https://github.com/okta/odyssey/compare/v1.5.0...v1.6.0) (2023-11-02)
+
+### Features
+
+- **odyssey-react-mui:** wrapped typography component with context ([#2013](https://github.com/okta/odyssey/issues/2013)) ([4ae50de](https://github.com/okta/odyssey/commit/4ae50debc051299774847804509aa1dae0dad831))
+
+### Bug Fixes
+
+- revert [#2013](https://github.com/okta/odyssey/issues/2013) ([#2029](https://github.com/okta/odyssey/issues/2029)) ([9f75603](https://github.com/okta/odyssey/commit/9f7560336221ea00014b21627488932ade2d6e16))
+
+## [1.5.0](https://github.com/okta/odyssey/compare/v1.4.0...v1.5.0) (2023-10-27)
+
+### Features
+
+- update secondary Button style ([#2011](https://github.com/okta/odyssey/issues/2011)) ([0d02217](https://github.com/okta/odyssey/commit/0d02217c3c4de1788a4e5a786b041ae749f96c2d))
+
+### Bug Fixes
+
+- remove ":" from ScreenReaderText ([37393e5](https://github.com/okta/odyssey/commit/37393e5025a3b8694074554de8c74e33feebc5a7))
+
 ## [1.4.0](https://github.com/okta/odyssey/compare/v1.3.0...v1.4.0) (2023-10-23)
 
 ### Features

package/dist/Accordion.js

@@ -0,0 +1,52 @@
+import _Accordion from "@mui/material/Accordion";
+import _AccordionDetails from "@mui/material/AccordionDetails";
+import _AccordionSummary from "@mui/material/AccordionSummary";
+/*!
+ * 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 { memo } from "react";
+import { ChevronDownIcon } from "./icons.generated/index.js";
+import { Support } from "./Typography.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Accordion = _ref => {
+  let {
+    children,
+    label,
+    hasShadow = true,
+    isDefaultExpanded,
+    isDisabled,
+    isExpanded,
+    onChange
+  } = _ref;
+  return _jsxs(_Accordion, {
+    defaultExpanded: isDefaultExpanded,
+    disabled: isDisabled,
+    disableGutters: true,
+    expanded: isExpanded,
+    onChange: onChange,
+    className: hasShadow ? `hasShadow` : undefined,
+    children: [_jsx(_AccordionSummary, {
+      expandIcon: _jsx(ChevronDownIcon, {}),
+      children: _jsx(Support, {
+        component: "div",
+        children: label
+      })
+    }), _jsx(_AccordionDetails, {
+      children: children
+    })]
+  });
+};
+const MemoizedAccordion = memo(Accordion);
+MemoizedAccordion.displayName = "Accordion";
+export { MemoizedAccordion as Accordion };
+//# sourceMappingURL=Accordion.js.map

package/dist/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","names":["memo","ChevronDownIcon","Support","jsx","_jsx","jsxs","_jsxs","Accordion","_ref","children","label","hasShadow","isDefaultExpanded","isDisabled","isExpanded","onChange","_Accordion","defaultExpanded","disabled","disableGutters","expanded","className","undefined","_AccordionSummary","expandIcon","component","_AccordionDetails","MemoizedAccordion","displayName"],"sources":["../src/Accordion.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-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 { ReactNode, memo } from \"react\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\nimport {\n  Accordion as MuiAccordion,\n  AccordionDetails as MuiAccordionDetails,\n  AccordionSummary as MuiAccordionSummary,\n  AccordionProps as MuiAccordionProps,\n} from \"@mui/material\";\nimport { ChevronDownIcon } from \"./icons.generated\";\nimport { Support } from \"./Typography\";\n\nexport type AccordionProps = {\n  /**\n   * The content of the Accordion itself\n   */\n  children: ReactNode;\n  /**\n   * The label text for the AccordionSummary\n   */\n  label: string;\n  /**\n   * If true, the Accordion item will have a shadow.\n   */\n  hasShadow?: boolean;\n  /**\n   * Whether the item is expanded by default\n   */\n  isDefaultExpanded?: boolean;\n  /**\n   * Whether the item is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether the item is expanded\n   */\n  isExpanded?: boolean;\n  /**\n   * Event fired when the expansion state of the accordion is changed\n   */\n  onChange?: MuiAccordionProps[\"onChange\"];\n} & (\n  | {\n      isExpanded: boolean;\n      isDefaultExpanded?: never;\n    }\n  | {\n      isDefaultExpanded?: boolean;\n      isExpanded?: never;\n    }\n) &\n  SeleniumProps;\n\nconst Accordion = ({\n  children,\n  label,\n  hasShadow = true,\n  isDefaultExpanded,\n  isDisabled,\n  isExpanded,\n  onChange,\n}: AccordionProps) => {\n  return (\n    <MuiAccordion\n      defaultExpanded={isDefaultExpanded}\n      disabled={isDisabled}\n      disableGutters\n      expanded={isExpanded}\n      onChange={onChange}\n      className={hasShadow ? `hasShadow` : undefined}\n    >\n      <MuiAccordionSummary expandIcon={<ChevronDownIcon />}>\n        <Support component=\"div\">{label}</Support>\n      </MuiAccordionSummary>\n      <MuiAccordionDetails>{children}</MuiAccordionDetails>\n    </MuiAccordion>\n  );\n};\n\nconst MemoizedAccordion = memo(Accordion);\nMemoizedAccordion.displayName = \"Accordion\";\n\nexport { MemoizedAccordion as Accordion };\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAAoBA,IAAI,QAAQ,OAAO;AAAC,SAQ/BC,eAAe;AAAA,SACfC,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AA2ChB,MAAMC,SAAS,GAAGC,IAAA,IAQI;EAAA,IARH;IACjBC,QAAQ;IACRC,KAAK;IACLC,SAAS,GAAG,IAAI;IAChBC,iBAAiB;IACjBC,UAAU;IACVC,UAAU;IACVC;EACc,CAAC,GAAAP,IAAA;EACf,OACEF,KAAA,CAAAU,UAAA;IACEC,eAAe,EAAEL,iBAAkB;IACnCM,QAAQ,EAAEL,UAAW;IACrBM,cAAc;IACdC,QAAQ,EAAEN,UAAW;IACrBC,QAAQ,EAAEA,QAAS;IACnBM,SAAS,EAAEV,SAAS,GAAI,WAAU,GAAGW,SAAU;IAAAb,QAAA,GAE/CL,IAAA,CAAAmB,iBAAA;MAAqBC,UAAU,EAAEpB,IAAA,CAACH,eAAe,IAAE,CAAE;MAAAQ,QAAA,EACnDL,IAAA,CAACF,OAAO;QAACuB,SAAS,EAAC,KAAK;QAAAhB,QAAA,EAAEC;MAAK,CAAU;IAAC,CACvB,CAAC,EACtBN,IAAA,CAAAsB,iBAAA;MAAAjB,QAAA,EAAsBA;IAAQ,CAAsB,CAAC;EAAA,CACzC,CAAC;AAEnB,CAAC;AAED,MAAMkB,iBAAiB,GAAG3B,IAAI,CAACO,SAAS,CAAC;AACzCoB,iBAAiB,CAACC,WAAW,GAAG,WAAW;AAE3C,SAASD,iBAAiB,IAAIpB,SAAS"}

package/dist/Autocomplete.js

@@ -52,11 +52,18 @@ const Autocomplete = _ref => {
       renderFieldComponent: _ref3 => {
         let {
           ariaDescribedBy,
-          id
+          id,
+          errorMessageElementId,
+          labelElementId
         } = _ref3;
         return _jsx(_InputBase, {
           ...params,
           ...InputProps,
+          inputProps: {
+            ...params.inputProps,
+            "aria-errormessage": errorMessageElementId,
+            "aria-labelledby": labelElementId
+          },
           "aria-describedby": ariaDescribedBy,
           id: id,
           name: nameOverride ?? id,

package/dist/Autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.js","names":["memo","useCallback","Field","jsx","_jsx","Autocomplete","_ref","errorMessage","hasMultipleChoices","id","idOverride","isCustomValueAllowed","isDisabled","isLoading","isOptional","isReadOnly","hint","label","name","nameOverride","onBlur","onChange","onInputChange","onFocus","options","value","testId","renderInput","_ref2","InputLabelProps","InputProps","params","fieldType","hasVisibleLabel","htmlFor","renderFieldComponent","_ref3","ariaDescribedBy","_InputBase","required","_Autocomplete","disableCloseOnSelect","disabled","freeSolo","filterSelectedOptions","loading","multiple","readOnly","MemoizedAutocomplete","displayName"],"sources":["../src/Autocomplete.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-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 {\n  Autocomplete as MuiAutocomplete,\n  AutocompleteProps as MuiAutocompleteProps,\n  InputBase,\n} from \"@mui/material\";\nimport { memo, useCallback } from \"react\";\n\nimport { Field } from \"./Field\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\n\nexport type AutocompleteProps<\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined\n> = {\n  /**\n   * The error message for the Select\n   */\n  errorMessage?: string;\n  /**\n   * Enables multiple choice selection\n   */\n  hasMultipleChoices?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"multiple\"];\n  /**\n   * The hint text for the Autocomplete input\n   */\n  hint?: string;\n  /**\n   * The id attribute of the Select\n   */\n  id?: string;\n  /**\n   * Allows the input of custom values\n   */\n  isCustomValueAllowed?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"freeSolo\"];\n  /**\n   * Disables the Autocomplete input\n   */\n  isDisabled?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"disabled\"];\n  /**\n   * Displays a loading indicator\n   */\n  isLoading?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"loading\"];\n  /**\n   * If `true`, the `input` element is not required.\n   */\n  isOptional?: boolean;\n  /**\n   * Makes the Autocomplete input read-only\n   */\n  isReadOnly?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"readOnly\"];\n  /**\n   * The label text for the autocomplete input\n   */\n  label: string;\n  /**\n   * The name of the `input` element. Defaults to the `id` if not set.\n   */\n  name?: string;\n  /**\n   * Callback fired when the autocomplete loses focus.\n   */\n  onBlur?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onBlur\"];\n  /**\n   * Callback fired when a selection is made.\n   */\n  onChange?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onChange\"];\n  /**\n   * Callback fired when the textbox receives typed characters.\n   */\n  onInputChange?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onInputChange\"];\n  /**\n   * Callback fired when the autocomplete gains focus.\n   */\n  onFocus?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onFocus\"];\n  /**\n   * The options for the Autocomplete input\n   */\n  options: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"options\"];\n  /**\n   * The value of the Autocomplete input\n   */\n  value?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"value\"];\n} & SeleniumProps;\n\nconst Autocomplete = <\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined\n>({\n  errorMessage,\n  hasMultipleChoices,\n  id: idOverride,\n  isCustomValueAllowed,\n  isDisabled,\n  isLoading,\n  isOptional = false,\n  isReadOnly,\n  hint,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange,\n  onInputChange,\n  onFocus,\n  options,\n  value,\n  testId,\n}: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n  const renderInput = useCallback(\n    ({ InputLabelProps, InputProps, ...params }) => (\n      <Field\n        errorMessage={errorMessage}\n        fieldType=\"single\"\n        hasVisibleLabel\n        id={InputLabelProps.htmlFor}\n        hint={hint}\n        label={label}\n        isOptional={isOptional}\n        renderFieldComponent={({ ariaDescribedBy, id }) => (\n          <InputBase\n            {...params}\n            {...InputProps}\n            aria-describedby={ariaDescribedBy}\n            id={id}\n            name={nameOverride ?? id}\n            required={!isOptional}\n          />\n        )}\n      />\n    ),\n    [errorMessage, hint, isOptional, label, nameOverride]\n  );\n\n  return (\n    <MuiAutocomplete\n      // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div\n      aria-disabled={isDisabled}\n      data-se={testId}\n      disableCloseOnSelect={hasMultipleChoices}\n      disabled={isDisabled}\n      freeSolo={isCustomValueAllowed}\n      filterSelectedOptions={true}\n      id={idOverride}\n      loading={isLoading}\n      multiple={hasMultipleChoices}\n      onBlur={onBlur}\n      onChange={onChange}\n      onInputChange={onInputChange}\n      onFocus={onFocus}\n      options={options}\n      readOnly={isReadOnly}\n      renderInput={renderInput}\n      value={value}\n    />\n  );\n};\n\n// Need the `typeof Autocomplete` because generics don't get passed through\nconst MemoizedAutocomplete = memo(Autocomplete) as typeof Autocomplete;\n// @ts-expect-error displayName is expected to not be on `typeof Autocomplete`\nMemoizedAutocomplete.displayName = \"Autocomplete\";\n\nexport { MemoizedAutocomplete as Autocomplete };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAOA,SAASA,IAAI,EAAEC,WAAW,QAAQ,OAAO;AAAC,SAEjCC,KAAK;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAqId,MAAMC,YAAY,GAAGC,IAAA,IAuB0D;EAAA,IAnB7E;IACAC,YAAY;IACZC,kBAAkB;IAClBC,EAAE,EAAEC,UAAU;IACdC,oBAAoB;IACpBC,UAAU;IACVC,SAAS;IACTC,UAAU,GAAG,KAAK;IAClBC,UAAU;IACVC,IAAI;IACJC,KAAK;IACLC,IAAI,EAAEC,YAAY;IAClBC,MAAM;IACNC,QAAQ;IACRC,aAAa;IACbC,OAAO;IACPC,OAAO;IACPC,KAAK;IACLC;EACuE,CAAC,GAAApB,IAAA;EACxE,MAAMqB,WAAW,GAAG1B,WAAW,CAC7B2B,KAAA;IAAA,IAAC;MAAEC,eAAe;MAAEC,UAAU;MAAE,GAAGC;IAAO,CAAC,GAAAH,KAAA;IAAA,OACzCxB,IAAA,CAACF,KAAK;MACJK,YAAY,EAAEA,YAAa;MAC3ByB,SAAS,EAAC,QAAQ;MAClBC,eAAe;MACfxB,EAAE,EAAEoB,eAAe,CAACK,OAAQ;MAC5BlB,IAAI,EAAEA,IAAK;MACXC,KAAK,EAAEA,KAAM;MACbH,UAAU,EAAEA,UAAW;MACvBqB,oBAAoB,EAAEC,KAAA;QAAA,IAAC;UAAEC,eAAe;UAAE5B;QAAG,CAAC,GAAA2B,KAAA;QAAA,OAC5ChC,IAAA,CAAAkC,UAAA;UAAA,GACMP,MAAM;UAAA,GACND,UAAU;UACd,oBAAkBO,eAAgB;UAClC5B,EAAE,EAAEA,EAAG;UACPS,IAAI,EAAEC,YAAY,IAAIV,EAAG;UACzB8B,QAAQ,EAAE,CAACzB;QAAW,CACvB,CAAC;MAAA;IACF,CACH,CAAC;EAAA,CACH,EACD,CAACP,YAAY,EAAES,IAAI,EAAEF,UAAU,EAAEG,KAAK,EAAEE,YAAY,CACtD,CAAC;EAED,OACEf,IAAA,CAAAoC,aAAA;IAEE,iBAAe5B,UAAW;IAC1B,WAASc,MAAO;IAChBe,oBAAoB,EAAEjC,kBAAmB;IACzCkC,QAAQ,EAAE9B,UAAW;IACrB+B,QAAQ,EAAEhC,oBAAqB;IAC/BiC,qBAAqB,EAAE,IAAK;IAC5BnC,EAAE,EAAEC,UAAW;IACfmC,OAAO,EAAEhC,SAAU;IACnBiC,QAAQ,EAAEtC,kBAAmB;IAC7BY,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEA,QAAS;IACnBC,aAAa,EAAEA,aAAc;IAC7BC,OAAO,EAAEA,OAAQ;IACjBC,OAAO,EAAEA,OAAQ;IACjBuB,QAAQ,EAAEhC,UAAW;IACrBY,WAAW,EAAEA,WAAY;IACzBF,KAAK,EAAEA;EAAM,CACd,CAAC;AAEN,CAAC;AAGD,MAAMuB,oBAAoB,GAAGhD,IAAI,CAACK,YAAY,CAAwB;AAEtE2C,oBAAoB,CAACC,WAAW,GAAG,cAAc;AAEjD,SAASD,oBAAoB,IAAI3C,YAAY"}
+{"version":3,"file":"Autocomplete.js","names":["memo","useCallback","Field","jsx","_jsx","Autocomplete","_ref","errorMessage","hasMultipleChoices","id","idOverride","isCustomValueAllowed","isDisabled","isLoading","isOptional","isReadOnly","hint","label","name","nameOverride","onBlur","onChange","onInputChange","onFocus","options","value","testId","renderInput","_ref2","InputLabelProps","InputProps","params","fieldType","hasVisibleLabel","htmlFor","renderFieldComponent","_ref3","ariaDescribedBy","errorMessageElementId","labelElementId","_InputBase","inputProps","required","_Autocomplete","disableCloseOnSelect","disabled","freeSolo","filterSelectedOptions","loading","multiple","readOnly","MemoizedAutocomplete","displayName"],"sources":["../src/Autocomplete.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-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 {\n  Autocomplete as MuiAutocomplete,\n  AutocompleteProps as MuiAutocompleteProps,\n  InputBase,\n} from \"@mui/material\";\nimport { memo, useCallback } from \"react\";\n\nimport { Field } from \"./Field\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\n\nexport type AutocompleteProps<\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined\n> = {\n  /**\n   * The error message for the Select\n   */\n  errorMessage?: string;\n  /**\n   * Enables multiple choice selection\n   */\n  hasMultipleChoices?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"multiple\"];\n  /**\n   * The hint text for the Autocomplete input\n   */\n  hint?: string;\n  /**\n   * The id attribute of the Select\n   */\n  id?: string;\n  /**\n   * Allows the input of custom values\n   */\n  isCustomValueAllowed?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"freeSolo\"];\n  /**\n   * Disables the Autocomplete input\n   */\n  isDisabled?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"disabled\"];\n  /**\n   * Displays a loading indicator\n   */\n  isLoading?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"loading\"];\n  /**\n   * If `true`, the `input` element is not required.\n   */\n  isOptional?: boolean;\n  /**\n   * Makes the Autocomplete input read-only\n   */\n  isReadOnly?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"readOnly\"];\n  /**\n   * The label text for the autocomplete input\n   */\n  label: string;\n  /**\n   * The name of the `input` element. Defaults to the `id` if not set.\n   */\n  name?: string;\n  /**\n   * Callback fired when the autocomplete loses focus.\n   */\n  onBlur?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onBlur\"];\n  /**\n   * Callback fired when a selection is made.\n   */\n  onChange?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onChange\"];\n  /**\n   * Callback fired when the textbox receives typed characters.\n   */\n  onInputChange?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onInputChange\"];\n  /**\n   * Callback fired when the autocomplete gains focus.\n   */\n  onFocus?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onFocus\"];\n  /**\n   * The options for the Autocomplete input\n   */\n  options: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"options\"];\n  /**\n   * The value of the Autocomplete input\n   */\n  value?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"value\"];\n} & SeleniumProps;\n\nconst Autocomplete = <\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined\n>({\n  errorMessage,\n  hasMultipleChoices,\n  id: idOverride,\n  isCustomValueAllowed,\n  isDisabled,\n  isLoading,\n  isOptional = false,\n  isReadOnly,\n  hint,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange,\n  onInputChange,\n  onFocus,\n  options,\n  value,\n  testId,\n}: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n  const renderInput = useCallback(\n    ({ InputLabelProps, InputProps, ...params }) => (\n      <Field\n        errorMessage={errorMessage}\n        fieldType=\"single\"\n        hasVisibleLabel\n        id={InputLabelProps.htmlFor}\n        hint={hint}\n        label={label}\n        isOptional={isOptional}\n        renderFieldComponent={({\n          ariaDescribedBy,\n          id,\n          errorMessageElementId,\n          labelElementId,\n        }) => (\n          <InputBase\n            {...params}\n            {...InputProps}\n            inputProps={{\n              ...params.inputProps,\n              \"aria-errormessage\": errorMessageElementId,\n              \"aria-labelledby\": labelElementId,\n            }}\n            aria-describedby={ariaDescribedBy}\n            id={id}\n            name={nameOverride ?? id}\n            required={!isOptional}\n          />\n        )}\n      />\n    ),\n    [errorMessage, hint, isOptional, label, nameOverride]\n  );\n\n  return (\n    <MuiAutocomplete\n      // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div\n      aria-disabled={isDisabled}\n      data-se={testId}\n      disableCloseOnSelect={hasMultipleChoices}\n      disabled={isDisabled}\n      freeSolo={isCustomValueAllowed}\n      filterSelectedOptions={true}\n      id={idOverride}\n      loading={isLoading}\n      multiple={hasMultipleChoices}\n      onBlur={onBlur}\n      onChange={onChange}\n      onInputChange={onInputChange}\n      onFocus={onFocus}\n      options={options}\n      readOnly={isReadOnly}\n      renderInput={renderInput}\n      value={value}\n    />\n  );\n};\n\n// Need the `typeof Autocomplete` because generics don't get passed through\nconst MemoizedAutocomplete = memo(Autocomplete) as typeof Autocomplete;\n// @ts-expect-error displayName is expected to not be on `typeof Autocomplete`\nMemoizedAutocomplete.displayName = \"Autocomplete\";\n\nexport { MemoizedAutocomplete as Autocomplete };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAOA,SAASA,IAAI,EAAEC,WAAW,QAAQ,OAAO;AAAC,SAEjCC,KAAK;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAqId,MAAMC,YAAY,GAAGC,IAAA,IAuB0D;EAAA,IAnB7E;IACAC,YAAY;IACZC,kBAAkB;IAClBC,EAAE,EAAEC,UAAU;IACdC,oBAAoB;IACpBC,UAAU;IACVC,SAAS;IACTC,UAAU,GAAG,KAAK;IAClBC,UAAU;IACVC,IAAI;IACJC,KAAK;IACLC,IAAI,EAAEC,YAAY;IAClBC,MAAM;IACNC,QAAQ;IACRC,aAAa;IACbC,OAAO;IACPC,OAAO;IACPC,KAAK;IACLC;EACuE,CAAC,GAAApB,IAAA;EACxE,MAAMqB,WAAW,GAAG1B,WAAW,CAC7B2B,KAAA;IAAA,IAAC;MAAEC,eAAe;MAAEC,UAAU;MAAE,GAAGC;IAAO,CAAC,GAAAH,KAAA;IAAA,OACzCxB,IAAA,CAACF,KAAK;MACJK,YAAY,EAAEA,YAAa;MAC3ByB,SAAS,EAAC,QAAQ;MAClBC,eAAe;MACfxB,EAAE,EAAEoB,eAAe,CAACK,OAAQ;MAC5BlB,IAAI,EAAEA,IAAK;MACXC,KAAK,EAAEA,KAAM;MACbH,UAAU,EAAEA,UAAW;MACvBqB,oBAAoB,EAAEC,KAAA;QAAA,IAAC;UACrBC,eAAe;UACf5B,EAAE;UACF6B,qBAAqB;UACrBC;QACF,CAAC,GAAAH,KAAA;QAAA,OACChC,IAAA,CAAAoC,UAAA;UAAA,GACMT,MAAM;UAAA,GACND,UAAU;UACdW,UAAU,EAAE;YACV,GAAGV,MAAM,CAACU,UAAU;YACpB,mBAAmB,EAAEH,qBAAqB;YAC1C,iBAAiB,EAAEC;UACrB,CAAE;UACF,oBAAkBF,eAAgB;UAClC5B,EAAE,EAAEA,EAAG;UACPS,IAAI,EAAEC,YAAY,IAAIV,EAAG;UACzBiC,QAAQ,EAAE,CAAC5B;QAAW,CACvB,CAAC;MAAA;IACF,CACH,CAAC;EAAA,CACH,EACD,CAACP,YAAY,EAAES,IAAI,EAAEF,UAAU,EAAEG,KAAK,EAAEE,YAAY,CACtD,CAAC;EAED,OACEf,IAAA,CAAAuC,aAAA;IAEE,iBAAe/B,UAAW;IAC1B,WAASc,MAAO;IAChBkB,oBAAoB,EAAEpC,kBAAmB;IACzCqC,QAAQ,EAAEjC,UAAW;IACrBkC,QAAQ,EAAEnC,oBAAqB;IAC/BoC,qBAAqB,EAAE,IAAK;IAC5BtC,EAAE,EAAEC,UAAW;IACfsC,OAAO,EAAEnC,SAAU;IACnBoC,QAAQ,EAAEzC,kBAAmB;IAC7BY,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEA,QAAS;IACnBC,aAAa,EAAEA,aAAc;IAC7BC,OAAO,EAAEA,OAAQ;IACjBC,OAAO,EAAEA,OAAQ;IACjB0B,QAAQ,EAAEnC,UAAW;IACrBY,WAAW,EAAEA,WAAY;IACzBF,KAAK,EAAEA;EAAM,CACd,CAAC;AAEN,CAAC;AAGD,MAAM0B,oBAAoB,GAAGnD,IAAI,CAACK,YAAY,CAAwB;AAEtE8C,oBAAoB,CAACC,WAAW,GAAG,cAAc;AAEjD,SAASD,oBAAoB,IAAI9C,YAAY"}

package/dist/Breadcrumbs.js

@@ -62,13 +62,13 @@ const breadcrumbProviderValue = {
     breadcrumbType: "menuItem"
   }
 };
+const defaultTruncationValue = 5;
 const BreadcrumbList = _ref2 => {
   let {
     children,
     homeHref,
-    maxVisibleItems: maxVisibleItemsOverride
+    maxVisibleItems = defaultTruncationValue
   } = _ref2;
-  const maxVisibleItems = maxVisibleItemsOverride ?? children.length;
   const {
     t
   } = useTranslation();

package/dist/Breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","names":["createContext","memo","useCallback","useContext","useMemo","useState","GroupIcon","HomeIcon","UserIcon","Typography","useTranslation","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","BreadcrumbContext","breadcrumbType","Breadcrumb","_ref","children","href","iconName","breadcrumbContent","_MenuItem","_ButtonBase","breadcrumbProviderValue","currentPage","listItem","menuItem","BreadcrumbList","_ref2","homeHref","maxVisibleItems","maxVisibleItemsOverride","length","t","anchorEl","setAnchorEl","breadcrumbSections","beforeMenu","insideMenu","remainingBreadcrumbs","menuStart","Math","floor","menuLength","slice","onMenuButtonClick","event","currentTarget","onCloseMenu","_Breadcrumbs","maxItems","map","breadcrumb","Provider","value","onClick","_Menu","open","Boolean","onClose","anchorOrigin","horizontal","vertical","MenuListProps","sx","minWidth","i","MemoizedBreadcrumbList","displayName"],"sources":["../src/Breadcrumbs.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-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 {\n  ButtonBase,\n  Menu,\n  MenuItem,\n  Breadcrumbs as MuiBreadcrumbs,\n} from \"@mui/material\";\nimport {\n  MouseEventHandler,\n  ReactElement,\n  createContext,\n  memo,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n} from \"react\";\nimport { GroupIcon, HomeIcon, UserIcon } from \"./icons.generated\";\nimport { Typography } from \"./Typography\";\nimport { useTranslation } from \"react-i18next\";\n\nexport type BreadcrumbType = \"listItem\" | \"menuItem\" | \"currentPage\";\n\nexport type BreadcrumbProps = {\n  children?: string;\n  href: string;\n  iconName?: \"user\" | \"group\";\n};\n\nexport type BreadcrumbsProps = {\n  children: ReactElement<typeof Breadcrumb>[];\n  homeHref?: string;\n  maxVisibleItems?: number;\n};\n\nexport type BreadcrumbContextType = {\n  breadcrumbType: BreadcrumbType;\n};\n\nexport const BreadcrumbContext = createContext<BreadcrumbContextType>({\n  breadcrumbType: \"listItem\",\n});\n\nexport const Breadcrumb = ({ children, href, iconName }: BreadcrumbProps) => {\n  const { breadcrumbType } = useContext(BreadcrumbContext);\n\n  const breadcrumbContent = (\n    <>\n      {iconName === \"group\" ? (\n        <GroupIcon />\n      ) : iconName === \"user\" ? (\n        <UserIcon />\n      ) : null}\n      {children}\n    </>\n  );\n\n  if (breadcrumbType === \"menuItem\") {\n    return <MenuItem href={href}>{breadcrumbContent}</MenuItem>;\n  }\n\n  if (breadcrumbType === \"currentPage\") {\n    return <Typography>{breadcrumbContent}</Typography>;\n  }\n\n  // breadcrumbType === \"listItem\" is the default\n  // Provided here without a conditional to get TS to be quiet\n  // about potential undefined returns\n  return <ButtonBase href={href}>{breadcrumbContent}</ButtonBase>;\n};\n\nconst breadcrumbProviderValue: Record<\n  BreadcrumbType,\n  { breadcrumbType: BreadcrumbType }\n> = {\n  currentPage: {\n    breadcrumbType: \"currentPage\",\n  },\n  listItem: {\n    breadcrumbType: \"listItem\",\n  },\n  menuItem: {\n    breadcrumbType: \"menuItem\",\n  },\n};\n\nconst BreadcrumbList = ({\n  children,\n  homeHref,\n  maxVisibleItems: maxVisibleItemsOverride,\n}: BreadcrumbsProps) => {\n  const maxVisibleItems = maxVisibleItemsOverride ?? children.length;\n\n  const { t } = useTranslation();\n\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n\n  const breadcrumbSections = useMemo(() => {\n    if (children.length <= maxVisibleItems) {\n      return {\n        beforeMenu: [],\n        insideMenu: [],\n        remainingBreadcrumbs: children,\n      };\n    } else {\n      const menuStart = Math.floor(maxVisibleItems / 2);\n      const menuLength = children.length - maxVisibleItems;\n\n      return {\n        beforeMenu: children.slice(0, menuStart),\n        insideMenu: children.slice(menuStart, menuStart + menuLength),\n        remainingBreadcrumbs: children.slice(menuStart + menuLength),\n      };\n    }\n  }, [children, maxVisibleItems]);\n\n  const onMenuButtonClick = useCallback<MouseEventHandler<HTMLButtonElement>>(\n    (event) => setAnchorEl(event.currentTarget),\n    []\n  );\n  const onCloseMenu = useCallback(() => {\n    setAnchorEl(null);\n  }, []);\n\n  return (\n    <MuiBreadcrumbs\n      maxItems={children.length + 1}\n      aria-label={t(\"breadcrumbs.label.text\")}\n    >\n      {homeHref && (\n        <ButtonBase href={homeHref} aria-label={t(\"breadcrumbs.home.text\")}>\n          <HomeIcon />\n        </ButtonBase>\n      )}\n\n      {breadcrumbSections.beforeMenu.map((breadcrumb) => (\n        <BreadcrumbContext.Provider value={breadcrumbProviderValue.listItem}>\n          {breadcrumb}\n        </BreadcrumbContext.Provider>\n      ))}\n\n      {breadcrumbSections.insideMenu && (\n        <>\n          <ButtonBase onClick={onMenuButtonClick}>…</ButtonBase>\n          <Menu\n            open={Boolean(anchorEl)}\n            onClose={onCloseMenu}\n            anchorEl={anchorEl}\n            anchorOrigin={{ horizontal: \"left\", vertical: \"bottom\" }}\n            MenuListProps={{\n              sx: {\n                minWidth: 180,\n              },\n            }}\n          >\n            <BreadcrumbContext.Provider\n              value={breadcrumbProviderValue.menuItem}\n            >\n              {breadcrumbSections.insideMenu}\n            </BreadcrumbContext.Provider>\n          </Menu>\n        </>\n      )}\n\n      {breadcrumbSections.remainingBreadcrumbs.map((breadcrumb, i) => {\n        if (i === breadcrumbSections.remainingBreadcrumbs.length - 1) {\n          return (\n            <BreadcrumbContext.Provider\n              value={breadcrumbProviderValue.currentPage}\n            >\n              {breadcrumb}\n            </BreadcrumbContext.Provider>\n          );\n        }\n        return (\n          <BreadcrumbContext.Provider value={breadcrumbProviderValue.listItem}>\n            {breadcrumb}\n          </BreadcrumbContext.Provider>\n        );\n      })}\n    </MuiBreadcrumbs>\n  );\n};\n\nconst MemoizedBreadcrumbList = memo(BreadcrumbList);\nMemoizedBreadcrumbList.displayName = \"BreadcrumbList\";\n\nexport { MemoizedBreadcrumbList as BreadcrumbList };\n"],"mappings":"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"}
+{"version":3,"file":"Breadcrumbs.js","names":["createContext","memo","useCallback","useContext","useMemo","useState","GroupIcon","HomeIcon","UserIcon","Typography","useTranslation","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","BreadcrumbContext","breadcrumbType","Breadcrumb","_ref","children","href","iconName","breadcrumbContent","_MenuItem","_ButtonBase","breadcrumbProviderValue","currentPage","listItem","menuItem","defaultTruncationValue","BreadcrumbList","_ref2","homeHref","maxVisibleItems","t","anchorEl","setAnchorEl","breadcrumbSections","length","beforeMenu","insideMenu","remainingBreadcrumbs","menuStart","Math","floor","menuLength","slice","onMenuButtonClick","event","currentTarget","onCloseMenu","_Breadcrumbs","maxItems","map","breadcrumb","Provider","value","onClick","_Menu","open","Boolean","onClose","anchorOrigin","horizontal","vertical","MenuListProps","sx","minWidth","i","MemoizedBreadcrumbList","displayName"],"sources":["../src/Breadcrumbs.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-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 {\n  ButtonBase,\n  Menu,\n  MenuItem,\n  Breadcrumbs as MuiBreadcrumbs,\n} from \"@mui/material\";\nimport {\n  MouseEventHandler,\n  ReactElement,\n  createContext,\n  memo,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n} from \"react\";\nimport { GroupIcon, HomeIcon, UserIcon } from \"./icons.generated\";\nimport { Typography } from \"./Typography\";\nimport { useTranslation } from \"react-i18next\";\n\nexport type BreadcrumbType = \"listItem\" | \"menuItem\" | \"currentPage\";\n\nexport type BreadcrumbProps = {\n  children?: string;\n  href: string;\n  iconName?: \"user\" | \"group\";\n};\n\nexport type BreadcrumbsProps = {\n  children: ReactElement<typeof Breadcrumb>[];\n  homeHref?: string;\n  maxVisibleItems?: number;\n};\n\nexport type BreadcrumbContextType = {\n  breadcrumbType: BreadcrumbType;\n};\n\nexport const BreadcrumbContext = createContext<BreadcrumbContextType>({\n  breadcrumbType: \"listItem\",\n});\n\nexport const Breadcrumb = ({ children, href, iconName }: BreadcrumbProps) => {\n  const { breadcrumbType } = useContext(BreadcrumbContext);\n\n  const breadcrumbContent = (\n    <>\n      {iconName === \"group\" ? (\n        <GroupIcon />\n      ) : iconName === \"user\" ? (\n        <UserIcon />\n      ) : null}\n      {children}\n    </>\n  );\n\n  if (breadcrumbType === \"menuItem\") {\n    return <MenuItem href={href}>{breadcrumbContent}</MenuItem>;\n  }\n\n  if (breadcrumbType === \"currentPage\") {\n    return <Typography>{breadcrumbContent}</Typography>;\n  }\n\n  // breadcrumbType === \"listItem\" is the default\n  // Provided here without a conditional to get TS to be quiet\n  // about potential undefined returns\n  return <ButtonBase href={href}>{breadcrumbContent}</ButtonBase>;\n};\n\nconst breadcrumbProviderValue: Record<\n  BreadcrumbType,\n  { breadcrumbType: BreadcrumbType }\n> = {\n  currentPage: {\n    breadcrumbType: \"currentPage\",\n  },\n  listItem: {\n    breadcrumbType: \"listItem\",\n  },\n  menuItem: {\n    breadcrumbType: \"menuItem\",\n  },\n};\n\nconst defaultTruncationValue = 5;\n\nconst BreadcrumbList = ({\n  children,\n  homeHref,\n  maxVisibleItems = defaultTruncationValue,\n}: BreadcrumbsProps) => {\n  const { t } = useTranslation();\n\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n\n  const breadcrumbSections = useMemo(() => {\n    if (children.length <= maxVisibleItems) {\n      return {\n        beforeMenu: [],\n        insideMenu: [],\n        remainingBreadcrumbs: children,\n      };\n    } else {\n      const menuStart = Math.floor(maxVisibleItems / 2);\n      const menuLength = children.length - maxVisibleItems;\n\n      return {\n        beforeMenu: children.slice(0, menuStart),\n        insideMenu: children.slice(menuStart, menuStart + menuLength),\n        remainingBreadcrumbs: children.slice(menuStart + menuLength),\n      };\n    }\n  }, [children, maxVisibleItems]);\n\n  const onMenuButtonClick = useCallback<MouseEventHandler<HTMLButtonElement>>(\n    (event) => setAnchorEl(event.currentTarget),\n    []\n  );\n  const onCloseMenu = useCallback(() => {\n    setAnchorEl(null);\n  }, []);\n\n  return (\n    <MuiBreadcrumbs\n      maxItems={children.length + 1}\n      aria-label={t(\"breadcrumbs.label.text\")}\n    >\n      {homeHref && (\n        <ButtonBase href={homeHref} aria-label={t(\"breadcrumbs.home.text\")}>\n          <HomeIcon />\n        </ButtonBase>\n      )}\n\n      {breadcrumbSections.beforeMenu.map((breadcrumb) => (\n        <BreadcrumbContext.Provider value={breadcrumbProviderValue.listItem}>\n          {breadcrumb}\n        </BreadcrumbContext.Provider>\n      ))}\n\n      {breadcrumbSections.insideMenu && (\n        <>\n          <ButtonBase onClick={onMenuButtonClick}>…</ButtonBase>\n          <Menu\n            open={Boolean(anchorEl)}\n            onClose={onCloseMenu}\n            anchorEl={anchorEl}\n            anchorOrigin={{ horizontal: \"left\", vertical: \"bottom\" }}\n            MenuListProps={{\n              sx: {\n                minWidth: 180,\n              },\n            }}\n          >\n            <BreadcrumbContext.Provider\n              value={breadcrumbProviderValue.menuItem}\n            >\n              {breadcrumbSections.insideMenu}\n            </BreadcrumbContext.Provider>\n          </Menu>\n        </>\n      )}\n\n      {breadcrumbSections.remainingBreadcrumbs.map((breadcrumb, i) => {\n        if (i === breadcrumbSections.remainingBreadcrumbs.length - 1) {\n          return (\n            <BreadcrumbContext.Provider\n              value={breadcrumbProviderValue.currentPage}\n            >\n              {breadcrumb}\n            </BreadcrumbContext.Provider>\n          );\n        }\n        return (\n          <BreadcrumbContext.Provider value={breadcrumbProviderValue.listItem}>\n            {breadcrumb}\n          </BreadcrumbContext.Provider>\n        );\n      })}\n    </MuiBreadcrumbs>\n  );\n};\n\nconst MemoizedBreadcrumbList = memo(BreadcrumbList);\nMemoizedBreadcrumbList.displayName = \"BreadcrumbList\";\n\nexport { MemoizedBreadcrumbList as BreadcrumbList };\n"],"mappings":"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"}

package/dist/Callout.js

@@ -16,8 +16,8 @@ import _AlertTitle from "@mui/material/AlertTitle";
 import { memo } from "react";
 import { ScreenReaderText } from "./ScreenReaderText.js";
 import { useTranslation } from "react-i18next";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export const calloutRoleValues = ["status", "alert"];
 export const calloutSeverityValues = ["success", "info", "warning", "error"];
 const Callout = _ref => {
@@ -36,8 +36,8 @@ const Callout = _ref => {
     role: role,
     severity: severity,
     variant: "callout",
-    children: [_jsxs(ScreenReaderText, {
-      children: [t(`severity.${severity}`), ": "]
+    children: [_jsx(ScreenReaderText, {
+      children: t(`severity.${severity}`)
     }), title && _jsx(_AlertTitle, {
       children: title
     }), _jsx(_Box, {

package/dist/Callout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Callout.js","names":["memo","ScreenReaderText","useTranslation","jsxs","_jsxs","jsx","_jsx","calloutRoleValues","calloutSeverityValues","Callout","_ref","children","role","severity","testId","title","t","_Alert","variant","_AlertTitle","_Box","component","MemoizedCallout","displayName"],"sources":["../src/Callout.tsx"],"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 { memo, ReactNode } from \"react\";\nimport { Alert, AlertTitle, Box } from \"@mui/material\";\nimport { ScreenReaderText } from \"./ScreenReaderText\";\nimport { useTranslation } from \"react-i18next\";\n\nimport type { SeleniumProps } from \"./SeleniumProps\";\n\nexport const calloutRoleValues = [\"status\", \"alert\"] as const;\nexport const calloutSeverityValues = [\n  \"success\",\n  \"info\",\n  \"warning\",\n  \"error\",\n] as const;\n\nexport type CalloutProps = {\n  /**\n   * The contents of the Callout\n   */\n  children: ReactNode;\n  /**\n   * Sets the ARIA role of the Callout\n   * (\"status\" for something that dynamically updates, \"alert\" for errors, null for something\n   * unchanging)\n   */\n  role?: (typeof calloutRoleValues)[number];\n  /**\n   * Determine the color and icon of the Callout\n   */\n  severity: (typeof calloutSeverityValues)[number];\n  /**\n   * The title of the Callout\n   */\n  title?: string;\n} & SeleniumProps;\n\nconst Callout = ({ children, role, severity, testId, title }: CalloutProps) => {\n  const { t } = useTranslation();\n\n  return (\n    <Alert data-se={testId} role={role} severity={severity} variant=\"callout\">\n      <ScreenReaderText>{t(`severity.${severity}`)}: </ScreenReaderText>\n      {title && <AlertTitle>{title}</AlertTitle>}\n      <Box component=\"div\">{children}</Box>\n    </Alert>\n  );\n};\n\nconst MemoizedCallout = memo(Callout);\nMemoizedCallout.displayName = \"Callout\";\n\nexport { MemoizedCallout as Callout };\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAmB,OAAO;AAAC,SAE/BC,gBAAgB;AACzB,SAASC,cAAc,QAAQ,eAAe;AAAC,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAI/C,OAAO,MAAMC,iBAAiB,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU;AAC7D,OAAO,MAAMC,qBAAqB,GAAG,CACnC,SAAS,EACT,MAAM,EACN,SAAS,EACT,OAAO,CACC;AAuBV,MAAMC,OAAO,GAAGC,IAAA,IAA+D;EAAA,IAA9D;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,QAAQ;IAAEC,MAAM;IAAEC;EAAoB,CAAC,GAAAL,IAAA;EACxE,MAAM;IAAEM;EAAE,CAAC,GAAGd,cAAc,CAAC,CAAC;EAE9B,OACEE,KAAA,CAAAa,MAAA;IAAO,WAASH,MAAO;IAACF,IAAI,EAAEA,IAAK;IAACC,QAAQ,EAAEA,QAAS;IAACK,OAAO,EAAC,SAAS;IAAAP,QAAA,GACvEP,KAAA,CAACH,gBAAgB;MAAAU,QAAA,GAAEK,CAAC,CAAE,YAAWH,QAAS,EAAC,CAAC,EAAC,IAAE;IAAA,CAAkB,CAAC,EACjEE,KAAK,IAAIT,IAAA,CAAAa,WAAA;MAAAR,QAAA,EAAaI;IAAK,CAAa,CAAC,EAC1CT,IAAA,CAAAc,IAAA;MAAKC,SAAS,EAAC,KAAK;MAAAV,QAAA,EAAEA;IAAQ,CAAM,CAAC;EAAA,CAChC,CAAC;AAEZ,CAAC;AAED,MAAMW,eAAe,GAAGtB,IAAI,CAACS,OAAO,CAAC;AACrCa,eAAe,CAACC,WAAW,GAAG,SAAS;AAEvC,SAASD,eAAe,IAAIb,OAAO"}
+{"version":3,"file":"Callout.js","names":["memo","ScreenReaderText","useTranslation","jsx","_jsx","jsxs","_jsxs","calloutRoleValues","calloutSeverityValues","Callout","_ref","children","role","severity","testId","title","t","_Alert","variant","_AlertTitle","_Box","component","MemoizedCallout","displayName"],"sources":["../src/Callout.tsx"],"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 { memo, ReactNode } from \"react\";\nimport { Alert, AlertTitle, Box } from \"@mui/material\";\nimport { ScreenReaderText } from \"./ScreenReaderText\";\nimport { useTranslation } from \"react-i18next\";\n\nimport type { SeleniumProps } from \"./SeleniumProps\";\n\nexport const calloutRoleValues = [\"status\", \"alert\"] as const;\nexport const calloutSeverityValues = [\n  \"success\",\n  \"info\",\n  \"warning\",\n  \"error\",\n] as const;\n\nexport type CalloutProps = {\n  /**\n   * The contents of the Callout\n   */\n  children: ReactNode;\n  /**\n   * Sets the ARIA role of the Callout\n   * (\"status\" for something that dynamically updates, \"alert\" for errors, null for something\n   * unchanging)\n   */\n  role?: (typeof calloutRoleValues)[number];\n  /**\n   * Determine the color and icon of the Callout\n   */\n  severity: (typeof calloutSeverityValues)[number];\n  /**\n   * The title of the Callout\n   */\n  title?: string;\n} & SeleniumProps;\n\nconst Callout = ({ children, role, severity, testId, title }: CalloutProps) => {\n  const { t } = useTranslation();\n\n  return (\n    <Alert data-se={testId} role={role} severity={severity} variant=\"callout\">\n      <ScreenReaderText>{t(`severity.${severity}`)}</ScreenReaderText>\n      {title && <AlertTitle>{title}</AlertTitle>}\n      <Box component=\"div\">{children}</Box>\n    </Alert>\n  );\n};\n\nconst MemoizedCallout = memo(Callout);\nMemoizedCallout.displayName = \"Callout\";\n\nexport { MemoizedCallout as Callout };\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAmB,OAAO;AAAC,SAE/BC,gBAAgB;AACzB,SAASC,cAAc,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAI/C,OAAO,MAAMC,iBAAiB,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU;AAC7D,OAAO,MAAMC,qBAAqB,GAAG,CACnC,SAAS,EACT,MAAM,EACN,SAAS,EACT,OAAO,CACC;AAuBV,MAAMC,OAAO,GAAGC,IAAA,IAA+D;EAAA,IAA9D;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,QAAQ;IAAEC,MAAM;IAAEC;EAAoB,CAAC,GAAAL,IAAA;EACxE,MAAM;IAAEM;EAAE,CAAC,GAAGd,cAAc,CAAC,CAAC;EAE9B,OACEI,KAAA,CAAAW,MAAA;IAAO,WAASH,MAAO;IAACF,IAAI,EAAEA,IAAK;IAACC,QAAQ,EAAEA,QAAS;IAACK,OAAO,EAAC,SAAS;IAAAP,QAAA,GACvEP,IAAA,CAACH,gBAAgB;MAAAU,QAAA,EAAEK,CAAC,CAAE,YAAWH,QAAS,EAAC;IAAC,CAAmB,CAAC,EAC/DE,KAAK,IAAIX,IAAA,CAAAe,WAAA;MAAAR,QAAA,EAAaI;IAAK,CAAa,CAAC,EAC1CX,IAAA,CAAAgB,IAAA;MAAKC,SAAS,EAAC,KAAK;MAAAV,QAAA,EAAEA;IAAQ,CAAM,CAAC;EAAA,CAChC,CAAC;AAEZ,CAAC;AAED,MAAMW,eAAe,GAAGtB,IAAI,CAACS,OAAO,CAAC;AACrCa,eAAe,CAACC,WAAW,GAAG,SAAS;AAEvC,SAASD,eAAe,IAAIb,OAAO"}

package/dist/CheckboxGroup.js

@@ -25,10 +25,14 @@ const CheckboxGroup = _ref => {
   } = _ref;
   const renderFieldComponent = useCallback(_ref2 => {
     let {
-      ariaDescribedBy
+      ariaDescribedBy,
+      errorMessageElementId,
+      labelElementId
     } = _ref2;
     return _jsx(_FormGroup, {
       "aria-describedby": ariaDescribedBy,
+      "aria-errormessage": errorMessageElementId,
+      "aria-labelledby": labelElementId,
       "data-se": testId,
       children: children
     });

package/dist/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","names":["memo","useCallback","Field","jsx","_jsx","CheckboxGroup","_ref","children","errorMessage","hint","isDisabled","isRequired","label","testId","renderFieldComponent","_ref2","ariaDescribedBy","_FormGroup","fieldType","hasVisibleLabel","isOptional","MemoizedCheckboxGroup","displayName"],"sources":["../src/CheckboxGroup.tsx"],"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 { FormGroup as MuiFormGroup } from \"@mui/material\";\nimport { memo, ReactElement, useCallback } from \"react\";\n\nimport { Checkbox } from \"./Checkbox\";\nimport { Field } from \"./Field\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\n\nexport type CheckboxGroupProps = {\n  /**\n   * A single Checkbox element or an array of Checkbox elements\n   */\n  children:\n    | ReactElement<typeof Checkbox>\n    | Array<ReactElement<typeof Checkbox>>;\n  /**\n   * The error message for the CheckboxGroup\n   */\n  errorMessage?: string;\n  /**\n   * The hint text for the CheckboxGroup\n   */\n  hint?: string;\n  /**\n   * If `true`, the CheckboxGroup is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, the CheckboxGroup is required\n   */\n  isRequired?: boolean;\n  /**\n   * The label text for the CheckboxGroup\n   */\n  label: string;\n} & SeleniumProps;\n\nconst CheckboxGroup = ({\n  children,\n  errorMessage,\n  hint,\n  isDisabled,\n  isRequired = false,\n  label,\n  testId,\n}: CheckboxGroupProps) => {\n  const renderFieldComponent = useCallback(\n    ({ ariaDescribedBy }) => (\n      <MuiFormGroup aria-describedby={ariaDescribedBy} data-se={testId}>\n        {children}\n      </MuiFormGroup>\n    ),\n    [children, testId]\n  );\n\n  return (\n    <Field\n      errorMessage={errorMessage}\n      fieldType=\"group\"\n      hasVisibleLabel={true}\n      hint={hint}\n      isDisabled={isDisabled}\n      isOptional={!isRequired}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedCheckboxGroup = memo(CheckboxGroup);\nMemoizedCheckboxGroup.displayName = \"CheckboxGroup\";\n\nexport { MemoizedCheckboxGroup as CheckboxGroup };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAI,EAAgBC,WAAW,QAAQ,OAAO;AAAC,SAG/CC,KAAK;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAgCd,MAAMC,aAAa,GAAGC,IAAA,IAQI;EAAA,IARH;IACrBC,QAAQ;IACRC,YAAY;IACZC,IAAI;IACJC,UAAU;IACVC,UAAU,GAAG,KAAK;IAClBC,KAAK;IACLC;EACkB,CAAC,GAAAP,IAAA;EACnB,MAAMQ,oBAAoB,GAAGb,WAAW,CACtCc,KAAA;IAAA,IAAC;MAAEC;IAAgB,CAAC,GAAAD,KAAA;IAAA,OAClBX,IAAA,CAAAa,UAAA;MAAc,oBAAkBD,eAAgB;MAAC,WAASH,MAAO;MAAAN,QAAA,EAC9DA;IAAQ,CACG,CAAC;EAAA,CAChB,EACD,CAACA,QAAQ,EAAEM,MAAM,CACnB,CAAC;EAED,OACET,IAAA,CAACF,KAAK;IACJM,YAAY,EAAEA,YAAa;IAC3BU,SAAS,EAAC,OAAO;IACjBC,eAAe,EAAE,IAAK;IACtBV,IAAI,EAAEA,IAAK;IACXC,UAAU,EAAEA,UAAW;IACvBU,UAAU,EAAE,CAACT,UAAW;IACxBC,KAAK,EAAEA,KAAM;IACbE,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CAAC;AAED,MAAMO,qBAAqB,GAAGrB,IAAI,CAACK,aAAa,CAAC;AACjDgB,qBAAqB,CAACC,WAAW,GAAG,eAAe;AAEnD,SAASD,qBAAqB,IAAIhB,aAAa"}
+{"version":3,"file":"CheckboxGroup.js","names":["memo","useCallback","Field","jsx","_jsx","CheckboxGroup","_ref","children","errorMessage","hint","isDisabled","isRequired","label","testId","renderFieldComponent","_ref2","ariaDescribedBy","errorMessageElementId","labelElementId","_FormGroup","fieldType","hasVisibleLabel","isOptional","MemoizedCheckboxGroup","displayName"],"sources":["../src/CheckboxGroup.tsx"],"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 { FormGroup as MuiFormGroup } from \"@mui/material\";\nimport { memo, ReactElement, useCallback } from \"react\";\n\nimport { Checkbox } from \"./Checkbox\";\nimport { Field } from \"./Field\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\n\nexport type CheckboxGroupProps = {\n  /**\n   * A single Checkbox element or an array of Checkbox elements\n   */\n  children:\n    | ReactElement<typeof Checkbox>\n    | Array<ReactElement<typeof Checkbox>>;\n  /**\n   * The error message for the CheckboxGroup\n   */\n  errorMessage?: string;\n  /**\n   * The hint text for the CheckboxGroup\n   */\n  hint?: string;\n  /**\n   * If `true`, the CheckboxGroup is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, the CheckboxGroup is required\n   */\n  isRequired?: boolean;\n  /**\n   * The label text for the CheckboxGroup\n   */\n  label: string;\n} & SeleniumProps;\n\nconst CheckboxGroup = ({\n  children,\n  errorMessage,\n  hint,\n  isDisabled,\n  isRequired = false,\n  label,\n  testId,\n}: CheckboxGroupProps) => {\n  const renderFieldComponent = useCallback(\n    ({ ariaDescribedBy, errorMessageElementId, labelElementId }) => (\n      <MuiFormGroup\n        aria-describedby={ariaDescribedBy}\n        aria-errormessage={errorMessageElementId}\n        aria-labelledby={labelElementId}\n        data-se={testId}\n      >\n        {children}\n      </MuiFormGroup>\n    ),\n    [children, testId]\n  );\n\n  return (\n    <Field\n      errorMessage={errorMessage}\n      fieldType=\"group\"\n      hasVisibleLabel={true}\n      hint={hint}\n      isDisabled={isDisabled}\n      isOptional={!isRequired}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedCheckboxGroup = memo(CheckboxGroup);\nMemoizedCheckboxGroup.displayName = \"CheckboxGroup\";\n\nexport { MemoizedCheckboxGroup as CheckboxGroup };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAI,EAAgBC,WAAW,QAAQ,OAAO;AAAC,SAG/CC,KAAK;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAgCd,MAAMC,aAAa,GAAGC,IAAA,IAQI;EAAA,IARH;IACrBC,QAAQ;IACRC,YAAY;IACZC,IAAI;IACJC,UAAU;IACVC,UAAU,GAAG,KAAK;IAClBC,KAAK;IACLC;EACkB,CAAC,GAAAP,IAAA;EACnB,MAAMQ,oBAAoB,GAAGb,WAAW,CACtCc,KAAA;IAAA,IAAC;MAAEC,eAAe;MAAEC,qBAAqB;MAAEC;IAAe,CAAC,GAAAH,KAAA;IAAA,OACzDX,IAAA,CAAAe,UAAA;MACE,oBAAkBH,eAAgB;MAClC,qBAAmBC,qBAAsB;MACzC,mBAAiBC,cAAe;MAChC,WAASL,MAAO;MAAAN,QAAA,EAEfA;IAAQ,CACG,CAAC;EAAA,CAChB,EACD,CAACA,QAAQ,EAAEM,MAAM,CACnB,CAAC;EAED,OACET,IAAA,CAACF,KAAK;IACJM,YAAY,EAAEA,YAAa;IAC3BY,SAAS,EAAC,OAAO;IACjBC,eAAe,EAAE,IAAK;IACtBZ,IAAI,EAAEA,IAAK;IACXC,UAAU,EAAEA,UAAW;IACvBY,UAAU,EAAE,CAACX,UAAW;IACxBC,KAAK,EAAEA,KAAM;IACbE,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CAAC;AAED,MAAMS,qBAAqB,GAAGvB,IAAI,CAACK,aAAa,CAAC;AACjDkB,qBAAqB,CAACC,WAAW,GAAG,eAAe;AAEnD,SAASD,qBAAqB,IAAIlB,aAAa"}

package/dist/Dialog.js

@@ -68,6 +68,9 @@ const Dialog = _ref => {
     }), _jsx(_DialogContent, {
       dividers: isContentScrollable,
       ref: dialogContentRef,
+      ...(isContentScrollable && {
+        tabIndex: 0
+      }),
       children: content
     }), (callToActionFirstComponent || callToActionSecondComponent || callToActionLastComponent) && _jsxs(_DialogActions, {
       children: [callToActionLastComponent, callToActionSecondComponent, callToActionFirstComponent]

package/dist/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","names":["Button","CloseIcon","memo","useState","useEffect","useRef","jsx","_jsx","jsxs","_jsxs","Dialog","_ref","callToActionFirstComponent","callToActionSecondComponent","callToActionLastComponent","children","isOpen","onClose","testId","title","ariaLabel","isContentScrollable","setIsContentScrollable","dialogContentRef","frameId","handleContentScroll","dialogContentElement","current","scrollHeight","clientHeight","requestAnimationFrame","cancelAnimationFrame","content","_DialogContentText","_Dialog","open","_DialogTitle","label","onClick","size","startIcon","variant","_DialogContent","dividers","ref","_DialogActions","MemoizedDialog","displayName"],"sources":["../src/Dialog.tsx"],"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 { Dialog as MuiDialog } from \"@mui/material\";\nimport {\n  DialogTitle,\n  DialogContent,\n  DialogContentText,\n  DialogActions,\n} from \"@mui/material\";\nimport { Button } from \"./Button\";\nimport { CloseIcon } from \"./icons.generated\";\nimport {\n  memo,\n  ReactNode,\n  useState,\n  useEffect,\n  useRef,\n  ReactElement,\n} from \"react\";\n\nimport type { SeleniumProps } from \"./SeleniumProps\";\n\nexport type DialogProps = {\n  /**\n   * An optional Button object to be situated in the Dialog footer. Should almost always be of variant `primary`.\n   */\n  callToActionFirstComponent?: ReactElement<typeof Button>;\n  /**\n   * An optional Button object to be situated in the Dialog footer, alongside the `callToActionPrimaryComponent`.\n   */\n  callToActionSecondComponent?: ReactElement<typeof Button>;\n  /**\n   * An optional Button object to be situated in the Dialog footer, alongside the other two `callToAction` components.\n   */\n  callToActionLastComponent?: ReactElement<typeof Button>;\n  /**\n   * The content of the Dialog. May be a `string` or any other `ReactNode` or array of `ReactNode`s.\n   */\n  children: ReactNode;\n  /**\n   * When set to `true`, the Dialog will be visible.\n   */\n  isOpen: boolean;\n  /**\n   * Callback that controls what happens when the Dialog is dismissed\n   */\n  onClose: () => void;\n  /**\n   * The title of the Dialog\n   */\n  title: string;\n  ariaLabel: string;\n} & SeleniumProps;\n\nconst Dialog = ({\n  callToActionFirstComponent,\n  callToActionSecondComponent,\n  callToActionLastComponent,\n  children,\n  isOpen,\n  onClose,\n  testId,\n  title,\n  ariaLabel,\n}: DialogProps) => {\n  const [isContentScrollable, setIsContentScrollable] = useState(false);\n  const dialogContentRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    let frameId: number;\n\n    const handleContentScroll = () => {\n      const dialogContentElement = dialogContentRef.current;\n      if (dialogContentElement) {\n        setIsContentScrollable(\n          dialogContentElement.scrollHeight > dialogContentElement.clientHeight\n        );\n      }\n      frameId = requestAnimationFrame(handleContentScroll);\n    };\n\n    if (isOpen) {\n      frameId = requestAnimationFrame(handleContentScroll);\n    }\n\n    return () => {\n      cancelAnimationFrame(frameId);\n    };\n  }, [isOpen]);\n\n  const content =\n    typeof children === \"string\" ? (\n      <DialogContentText>{children}</DialogContentText>\n    ) : (\n      children\n    );\n\n  return (\n    <MuiDialog data-se={testId} open={isOpen} onClose={onClose}>\n      <DialogTitle>\n        {title}\n        <Button\n          ariaLabel={ariaLabel}\n          label=\"\"\n          onClick={onClose}\n          size=\"small\"\n          startIcon={<CloseIcon />}\n          variant=\"floating\"\n        />\n      </DialogTitle>\n      <DialogContent dividers={isContentScrollable} ref={dialogContentRef}>\n        {content}\n      </DialogContent>\n\n      {(callToActionFirstComponent ||\n        callToActionSecondComponent ||\n        callToActionLastComponent) && (\n        <DialogActions>\n          {callToActionLastComponent}\n          {callToActionSecondComponent}\n          {callToActionFirstComponent}\n        </DialogActions>\n      )}\n    </MuiDialog>\n  );\n};\n\nconst MemoizedDialog = memo(Dialog);\nMemoizedDialog.displayName = \"Dialog\";\n\nexport { MemoizedDialog as Dialog };\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAmBSA,MAAM;AAAA,SACNC,SAAS;AAClB,SACEC,IAAI,EAEJC,QAAQ,EACRC,SAAS,EACTC,MAAM,QAED,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAoCf,MAAMC,MAAM,GAAGC,IAAA,IAUI;EAAA,IAVH;IACdC,0BAA0B;IAC1BC,2BAA2B;IAC3BC,yBAAyB;IACzBC,QAAQ;IACRC,MAAM;IACNC,OAAO;IACPC,MAAM;IACNC,KAAK;IACLC;EACW,CAAC,GAAAT,IAAA;EACZ,MAAM,CAACU,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGnB,QAAQ,CAAC,KAAK,CAAC;EACrE,MAAMoB,gBAAgB,GAAGlB,MAAM,CAAiB,IAAI,CAAC;EAErDD,SAAS,CAAC,MAAM;IACd,IAAIoB,OAAe;IAEnB,MAAMC,mBAAmB,GAAGA,CAAA,KAAM;MAChC,MAAMC,oBAAoB,GAAGH,gBAAgB,CAACI,OAAO;MACrD,IAAID,oBAAoB,EAAE;QACxBJ,sBAAsB,CACpBI,oBAAoB,CAACE,YAAY,GAAGF,oBAAoB,CAACG,YAC3D,CAAC;MACH;MACAL,OAAO,GAAGM,qBAAqB,CAACL,mBAAmB,CAAC;IACtD,CAAC;IAED,IAAIT,MAAM,EAAE;MACVQ,OAAO,GAAGM,qBAAqB,CAACL,mBAAmB,CAAC;IACtD;IAEA,OAAO,MAAM;MACXM,oBAAoB,CAACP,OAAO,CAAC;IAC/B,CAAC;EACH,CAAC,EAAE,CAACR,MAAM,CAAC,CAAC;EAEZ,MAAMgB,OAAO,GACX,OAAOjB,QAAQ,KAAK,QAAQ,GAC1BR,IAAA,CAAA0B,kBAAA;IAAAlB,QAAA,EAAoBA;EAAQ,CAAoB,CAAC,GAEjDA,QACD;EAEH,OACEN,KAAA,CAAAyB,OAAA;IAAW,WAAShB,MAAO;IAACiB,IAAI,EAAEnB,MAAO;IAACC,OAAO,EAAEA,OAAQ;IAAAF,QAAA,GACzDN,KAAA,CAAA2B,YAAA;MAAArB,QAAA,GACGI,KAAK,EACNZ,IAAA,CAACP,MAAM;QACLoB,SAAS,EAAEA,SAAU;QACrBiB,KAAK,EAAC,EAAE;QACRC,OAAO,EAAErB,OAAQ;QACjBsB,IAAI,EAAC,OAAO;QACZC,SAAS,EAAEjC,IAAA,CAACN,SAAS,IAAE,CAAE;QACzBwC,OAAO,EAAC;MAAU,CACnB,CAAC;IAAA,CACS,CAAC,EACdlC,IAAA,CAAAmC,cAAA;MAAeC,QAAQ,EAAEtB,mBAAoB;MAACuB,GAAG,EAAErB,gBAAiB;MAAAR,QAAA,EACjEiB;IAAO,CACK,CAAC,EAEf,CAACpB,0BAA0B,IAC1BC,2BAA2B,IAC3BC,yBAAyB,KACzBL,KAAA,CAAAoC,cAAA;MAAA9B,QAAA,GACGD,yBAAyB,EACzBD,2BAA2B,EAC3BD,0BAA0B;IAAA,CACd,CAChB;EAAA,CACQ,CAAC;AAEhB,CAAC;AAED,MAAMkC,cAAc,GAAG5C,IAAI,CAACQ,MAAM,CAAC;AACnCoC,cAAc,CAACC,WAAW,GAAG,QAAQ;AAErC,SAASD,cAAc,IAAIpC,MAAM"}
+{"version":3,"file":"Dialog.js","names":["Button","CloseIcon","memo","useState","useEffect","useRef","jsx","_jsx","jsxs","_jsxs","Dialog","_ref","callToActionFirstComponent","callToActionSecondComponent","callToActionLastComponent","children","isOpen","onClose","testId","title","ariaLabel","isContentScrollable","setIsContentScrollable","dialogContentRef","frameId","handleContentScroll","dialogContentElement","current","scrollHeight","clientHeight","requestAnimationFrame","cancelAnimationFrame","content","_DialogContentText","_Dialog","open","_DialogTitle","label","onClick","size","startIcon","variant","_DialogContent","dividers","ref","tabIndex","_DialogActions","MemoizedDialog","displayName"],"sources":["../src/Dialog.tsx"],"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 { Dialog as MuiDialog } from \"@mui/material\";\nimport {\n  DialogTitle,\n  DialogContent,\n  DialogContentText,\n  DialogActions,\n} from \"@mui/material\";\nimport { Button } from \"./Button\";\nimport { CloseIcon } from \"./icons.generated\";\nimport {\n  memo,\n  ReactNode,\n  useState,\n  useEffect,\n  useRef,\n  ReactElement,\n} from \"react\";\n\nimport type { SeleniumProps } from \"./SeleniumProps\";\n\nexport type DialogProps = {\n  /**\n   * An optional Button object to be situated in the Dialog footer. Should almost always be of variant `primary`.\n   */\n  callToActionFirstComponent?: ReactElement<typeof Button>;\n  /**\n   * An optional Button object to be situated in the Dialog footer, alongside the `callToActionPrimaryComponent`.\n   */\n  callToActionSecondComponent?: ReactElement<typeof Button>;\n  /**\n   * An optional Button object to be situated in the Dialog footer, alongside the other two `callToAction` components.\n   */\n  callToActionLastComponent?: ReactElement<typeof Button>;\n  /**\n   * The content of the Dialog. May be a `string` or any other `ReactNode` or array of `ReactNode`s.\n   */\n  children: ReactNode;\n  /**\n   * When set to `true`, the Dialog will be visible.\n   */\n  isOpen: boolean;\n  /**\n   * Callback that controls what happens when the Dialog is dismissed\n   */\n  onClose: () => void;\n  /**\n   * The title of the Dialog\n   */\n  title: string;\n  ariaLabel: string;\n} & SeleniumProps;\n\nconst Dialog = ({\n  callToActionFirstComponent,\n  callToActionSecondComponent,\n  callToActionLastComponent,\n  children,\n  isOpen,\n  onClose,\n  testId,\n  title,\n  ariaLabel,\n}: DialogProps) => {\n  const [isContentScrollable, setIsContentScrollable] = useState(false);\n  const dialogContentRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    let frameId: number;\n\n    const handleContentScroll = () => {\n      const dialogContentElement = dialogContentRef.current;\n      if (dialogContentElement) {\n        setIsContentScrollable(\n          dialogContentElement.scrollHeight > dialogContentElement.clientHeight\n        );\n      }\n      frameId = requestAnimationFrame(handleContentScroll);\n    };\n\n    if (isOpen) {\n      frameId = requestAnimationFrame(handleContentScroll);\n    }\n\n    return () => {\n      cancelAnimationFrame(frameId);\n    };\n  }, [isOpen]);\n\n  const content =\n    typeof children === \"string\" ? (\n      <DialogContentText>{children}</DialogContentText>\n    ) : (\n      children\n    );\n\n  return (\n    <MuiDialog data-se={testId} open={isOpen} onClose={onClose}>\n      <DialogTitle>\n        {title}\n        <Button\n          ariaLabel={ariaLabel}\n          label=\"\"\n          onClick={onClose}\n          size=\"small\"\n          startIcon={<CloseIcon />}\n          variant=\"floating\"\n        />\n      </DialogTitle>\n      <DialogContent\n        dividers={isContentScrollable}\n        ref={dialogContentRef}\n        {...(isContentScrollable && {\n          tabIndex: 0,\n        })}\n      >\n        {content}\n      </DialogContent>\n\n      {(callToActionFirstComponent ||\n        callToActionSecondComponent ||\n        callToActionLastComponent) && (\n        <DialogActions>\n          {callToActionLastComponent}\n          {callToActionSecondComponent}\n          {callToActionFirstComponent}\n        </DialogActions>\n      )}\n    </MuiDialog>\n  );\n};\n\nconst MemoizedDialog = memo(Dialog);\nMemoizedDialog.displayName = \"Dialog\";\n\nexport { MemoizedDialog as Dialog };\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAmBSA,MAAM;AAAA,SACNC,SAAS;AAClB,SACEC,IAAI,EAEJC,QAAQ,EACRC,SAAS,EACTC,MAAM,QAED,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAoCf,MAAMC,MAAM,GAAGC,IAAA,IAUI;EAAA,IAVH;IACdC,0BAA0B;IAC1BC,2BAA2B;IAC3BC,yBAAyB;IACzBC,QAAQ;IACRC,MAAM;IACNC,OAAO;IACPC,MAAM;IACNC,KAAK;IACLC;EACW,CAAC,GAAAT,IAAA;EACZ,MAAM,CAACU,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGnB,QAAQ,CAAC,KAAK,CAAC;EACrE,MAAMoB,gBAAgB,GAAGlB,MAAM,CAAiB,IAAI,CAAC;EAErDD,SAAS,CAAC,MAAM;IACd,IAAIoB,OAAe;IAEnB,MAAMC,mBAAmB,GAAGA,CAAA,KAAM;MAChC,MAAMC,oBAAoB,GAAGH,gBAAgB,CAACI,OAAO;MACrD,IAAID,oBAAoB,EAAE;QACxBJ,sBAAsB,CACpBI,oBAAoB,CAACE,YAAY,GAAGF,oBAAoB,CAACG,YAC3D,CAAC;MACH;MACAL,OAAO,GAAGM,qBAAqB,CAACL,mBAAmB,CAAC;IACtD,CAAC;IAED,IAAIT,MAAM,EAAE;MACVQ,OAAO,GAAGM,qBAAqB,CAACL,mBAAmB,CAAC;IACtD;IAEA,OAAO,MAAM;MACXM,oBAAoB,CAACP,OAAO,CAAC;IAC/B,CAAC;EACH,CAAC,EAAE,CAACR,MAAM,CAAC,CAAC;EAEZ,MAAMgB,OAAO,GACX,OAAOjB,QAAQ,KAAK,QAAQ,GAC1BR,IAAA,CAAA0B,kBAAA;IAAAlB,QAAA,EAAoBA;EAAQ,CAAoB,CAAC,GAEjDA,QACD;EAEH,OACEN,KAAA,CAAAyB,OAAA;IAAW,WAAShB,MAAO;IAACiB,IAAI,EAAEnB,MAAO;IAACC,OAAO,EAAEA,OAAQ;IAAAF,QAAA,GACzDN,KAAA,CAAA2B,YAAA;MAAArB,QAAA,GACGI,KAAK,EACNZ,IAAA,CAACP,MAAM;QACLoB,SAAS,EAAEA,SAAU;QACrBiB,KAAK,EAAC,EAAE;QACRC,OAAO,EAAErB,OAAQ;QACjBsB,IAAI,EAAC,OAAO;QACZC,SAAS,EAAEjC,IAAA,CAACN,SAAS,IAAE,CAAE;QACzBwC,OAAO,EAAC;MAAU,CACnB,CAAC;IAAA,CACS,CAAC,EACdlC,IAAA,CAAAmC,cAAA;MACEC,QAAQ,EAAEtB,mBAAoB;MAC9BuB,GAAG,EAAErB,gBAAiB;MAAA,IACjBF,mBAAmB,IAAI;QAC1BwB,QAAQ,EAAE;MACZ,CAAC;MAAA9B,QAAA,EAEAiB;IAAO,CACK,CAAC,EAEf,CAACpB,0BAA0B,IAC1BC,2BAA2B,IAC3BC,yBAAyB,KACzBL,KAAA,CAAAqC,cAAA;MAAA/B,QAAA,GACGD,yBAAyB,EACzBD,2BAA2B,EAC3BD,0BAA0B;IAAA,CACd,CAChB;EAAA,CACQ,CAAC;AAEhB,CAAC;AAED,MAAMmC,cAAc,GAAG7C,IAAI,CAACQ,MAAM,CAAC;AACnCqC,cAAc,CAACC,WAAW,GAAG,QAAQ;AAErC,SAASD,cAAc,IAAIrC,MAAM"}

package/dist/Field.js

@@ -41,9 +41,9 @@ const Field = _ref => {
   } = useTranslation();
   const id = useUniqueId(idOverride);
   const hintId = hint ? `${id}-hint` : undefined;
-  const errorId = errorMessage ? `${id}-error` : undefined;
-  const labelId = `${id}-label`;
-  const ariaDescribedBy = useMemo(() => [hintId, errorId].join(" ").trim() || undefined, [errorId, hintId]);
+  const errorMessageElementId = errorMessage ? `${id}-error` : undefined;
+  const labelElementId = `${id}-label`;
+  const ariaDescribedBy = useMemo(() => [hintId, errorMessageElementId].join(" ").trim() || undefined, [errorMessageElementId, hintId]);
   const {
     isDisabled: isFieldsetDisabled
   } = useFieldset();
@@ -62,7 +62,7 @@ const Field = _ref => {
       })]
     }) : _jsx(FieldLabel, {
       hasVisibleLabel: hasVisibleLabel,
-      id: labelId,
+      id: labelElementId,
       inputId: id,
       isOptional: isOptional,
       text: label
@@ -71,9 +71,11 @@ const Field = _ref => {
       text: hint
     }), renderFieldComponent({
       ariaDescribedBy,
-      id
+      errorMessageElementId,
+      id,
+      labelElementId
     }), errorMessage && _jsx(FieldError, {
-      id: errorId,
+      id: errorMessageElementId,
       text: errorMessage
     })]
   });

package/dist/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","names":["memo","useMemo","FieldError","FieldHint","FieldLabel","Typography","useFieldset","useTranslation","useUniqueId","jsxs","_jsxs","jsx","_jsx","fieldTypeValues","Field","_ref","errorMessage","fieldType","hasVisibleLabel","hint","id","idOverride","isDisabled","isDisabledProp","isRadioGroup","isOptional","label","renderFieldComponent","t","hintId","undefined","errorId","labelId","ariaDescribedBy","join","trim","isFieldsetDisabled","_FormControl","component","disabled","error","Boolean","role","children","_FormLabel","color","inputId","text","MemoizedField","displayName"],"sources":["../src/Field.tsx"],"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 { memo, ReactElement, useMemo } from \"react\";\n\nimport {\n  FormControl as MuiFormControl,\n  FormLabel as MuiFormLabel,\n} from \"@mui/material\";\nimport { FieldError } from \"./FieldError\";\nimport { FieldHint } from \"./FieldHint\";\nimport { FieldLabel } from \"./FieldLabel\";\nimport { Typography } from \"./Typography\";\nimport { useFieldset } from \"./FieldsetContext\";\nimport { useTranslation } from \"react-i18next\";\nimport { useUniqueId } from \"./useUniqueId\";\n\nexport const fieldTypeValues = [\"single\", \"group\"] as const;\n\nexport type FieldProps = {\n  /**\n   * If `error` is not undefined, the `input` will indicate an error.\n   */\n  errorMessage?: string;\n  /**\n   * The field type determines how ARIA components are setup. It's important to use this to denote if you expect only one component (like a text field) or multiple (like a radio group).\n   */\n  fieldType: (typeof fieldTypeValues)[number];\n  /**\n   * If `true`, the Field label will be shown\n   */\n  hasVisibleLabel: boolean;\n  /**\n   * The helper text content.\n   */\n  hint?: string;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * Important for narrowing down the `fieldset` role to \"radiogroup\".\n   */\n  isRadioGroup?: boolean;\n  /**\n   * Important for determining if children inherit error state\n   */\n  isCheckboxGroup?: boolean;\n  /**\n   * If `true`, the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, the `input` element is not required.\n   */\n  isOptional?: boolean;\n  /**\n   * The label for the `input` element.\n   */\n  label: string;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n  /**\n   * Render-props function that sends back ARIA props to your field component.\n   */\n  renderFieldComponent: ({\n    ariaDescribedBy,\n    dataSe,\n    id,\n  }: {\n    ariaDescribedBy?: string;\n    dataSe?: string;\n    id: string;\n  }) => ReactElement;\n};\n\nconst Field = ({\n  errorMessage,\n  fieldType,\n  hasVisibleLabel,\n  hint,\n  id: idOverride,\n  isDisabled: isDisabledProp = false,\n  isRadioGroup = false,\n  isOptional = false,\n  label,\n  renderFieldComponent,\n}: FieldProps) => {\n  const { t } = useTranslation();\n\n  const id = useUniqueId(idOverride);\n  const hintId = hint ? `${id}-hint` : undefined;\n  const errorId = errorMessage ? `${id}-error` : undefined;\n  const labelId = `${id}-label`;\n\n  const ariaDescribedBy = useMemo(\n    () => [hintId, errorId].join(\" \").trim() || undefined,\n    [errorId, hintId]\n  );\n\n  const { isDisabled: isFieldsetDisabled } = useFieldset();\n\n  const isDisabled = useMemo(\n    () => isDisabledProp || isFieldsetDisabled,\n    [isDisabledProp, isFieldsetDisabled]\n  );\n\n  return (\n    <MuiFormControl\n      component={fieldType === \"group\" ? \"fieldset\" : \"div\"}\n      disabled={isDisabled}\n      error={Boolean(errorMessage)}\n      role={isRadioGroup ? \"radiogroup\" : undefined}\n    >\n      {fieldType === \"group\" ? (\n        <MuiFormLabel component=\"legend\">\n          {label}{\" \"}\n          {isOptional && label && (\n            <Typography component=\"span\" color=\"textSecondary\">\n              ({t(\"fieldlabel.optional.text\")})\n            </Typography>\n          )}\n        </MuiFormLabel>\n      ) : (\n        <FieldLabel\n          hasVisibleLabel={hasVisibleLabel}\n          id={labelId}\n          inputId={id}\n          isOptional={isOptional}\n          text={label}\n        />\n      )}\n\n      {hint && <FieldHint id={hintId} text={hint} />}\n\n      {renderFieldComponent({\n        ariaDescribedBy,\n        id,\n      })}\n\n      {errorMessage && <FieldError id={errorId} text={errorMessage} />}\n    </MuiFormControl>\n  );\n};\n\nconst MemoizedField = memo(Field);\nMemoizedField.displayName = \"Field\";\n\nexport { MemoizedField as Field };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAgBC,OAAO,QAAQ,OAAO;AAAC,SAM3CC,UAAU;AAAA,SACVC,SAAS;AAAA,SACTC,UAAU;AAAA,SACVC,UAAU;AAAA,SACVC,WAAW;AACpB,SAASC,cAAc,QAAQ,eAAe;AAAC,SACtCC,WAAW;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAEpB,OAAO,MAAMC,eAAe,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU;AA6D3D,MAAMC,KAAK,GAAGC,IAAA,IAWI;EAAA,IAXH;IACbC,YAAY;IACZC,SAAS;IACTC,eAAe;IACfC,IAAI;IACJC,EAAE,EAAEC,UAAU;IACdC,UAAU,EAAEC,cAAc,GAAG,KAAK;IAClCC,YAAY,GAAG,KAAK;IACpBC,UAAU,GAAG,KAAK;IAClBC,KAAK;IACLC;EACU,CAAC,GAAAZ,IAAA;EACX,MAAM;IAAEa;EAAE,CAAC,GAAGrB,cAAc,CAAC,CAAC;EAE9B,MAAMa,EAAE,GAAGZ,WAAW,CAACa,UAAU,CAAC;EAClC,MAAMQ,MAAM,GAAGV,IAAI,GAAI,GAAEC,EAAG,OAAM,GAAGU,SAAS;EAC9C,MAAMC,OAAO,GAAGf,YAAY,GAAI,GAAEI,EAAG,QAAO,GAAGU,SAAS;EACxD,MAAME,OAAO,GAAI,GAAEZ,EAAG,QAAO;EAE7B,MAAMa,eAAe,GAAGhC,OAAO,CAC7B,MAAM,CAAC4B,MAAM,EAAEE,OAAO,CAAC,CAACG,IAAI,CAAC,GAAG,CAAC,CAACC,IAAI,CAAC,CAAC,IAAIL,SAAS,EACrD,CAACC,OAAO,EAAEF,MAAM,CAClB,CAAC;EAED,MAAM;IAAEP,UAAU,EAAEc;EAAmB,CAAC,GAAG9B,WAAW,CAAC,CAAC;EAExD,MAAMgB,UAAU,GAAGrB,OAAO,CACxB,MAAMsB,cAAc,IAAIa,kBAAkB,EAC1C,CAACb,cAAc,EAAEa,kBAAkB,CACrC,CAAC;EAED,OACE1B,KAAA,CAAA2B,YAAA;IACEC,SAAS,EAAErB,SAAS,KAAK,OAAO,GAAG,UAAU,GAAG,KAAM;IACtDsB,QAAQ,EAAEjB,UAAW;IACrBkB,KAAK,EAAEC,OAAO,CAACzB,YAAY,CAAE;IAC7B0B,IAAI,EAAElB,YAAY,GAAG,YAAY,GAAGM,SAAU;IAAAa,QAAA,GAE7C1B,SAAS,KAAK,OAAO,GACpBP,KAAA,CAAAkC,UAAA;MAAcN,SAAS,EAAC,QAAQ;MAAAK,QAAA,GAC7BjB,KAAK,EAAE,GAAG,EACVD,UAAU,IAAIC,KAAK,IAClBhB,KAAA,CAACL,UAAU;QAACiC,SAAS,EAAC,MAAM;QAACO,KAAK,EAAC,eAAe;QAAAF,QAAA,GAAC,GAChD,EAACf,CAAC,CAAC,0BAA0B,CAAC,EAAC,GAClC;MAAA,CAAY,CACb;IAAA,CACW,CAAC,GAEfhB,IAAA,CAACR,UAAU;MACTc,eAAe,EAAEA,eAAgB;MACjCE,EAAE,EAAEY,OAAQ;MACZc,OAAO,EAAE1B,EAAG;MACZK,UAAU,EAAEA,UAAW;MACvBsB,IAAI,EAAErB;IAAM,CACb,CACF,EAEAP,IAAI,IAAIP,IAAA,CAACT,SAAS;MAACiB,EAAE,EAAES,MAAO;MAACkB,IAAI,EAAE5B;IAAK,CAAE,CAAC,EAE7CQ,oBAAoB,CAAC;MACpBM,eAAe;MACfb;IACF,CAAC,CAAC,EAEDJ,YAAY,IAAIJ,IAAA,CAACV,UAAU;MAACkB,EAAE,EAAEW,OAAQ;MAACgB,IAAI,EAAE/B;IAAa,CAAE,CAAC;EAAA,CAClD,CAAC;AAErB,CAAC;AAED,MAAMgC,aAAa,GAAGhD,IAAI,CAACc,KAAK,CAAC;AACjCkC,aAAa,CAACC,WAAW,GAAG,OAAO;AAEnC,SAASD,aAAa,IAAIlC,KAAK"}
+{"version":3,"file":"Field.js","names":["memo","useMemo","FieldError","FieldHint","FieldLabel","Typography","useFieldset","useTranslation","useUniqueId","jsxs","_jsxs","jsx","_jsx","fieldTypeValues","Field","_ref","errorMessage","fieldType","hasVisibleLabel","hint","id","idOverride","isDisabled","isDisabledProp","isRadioGroup","isOptional","label","renderFieldComponent","t","hintId","undefined","errorMessageElementId","labelElementId","ariaDescribedBy","join","trim","isFieldsetDisabled","_FormControl","component","disabled","error","Boolean","role","children","_FormLabel","color","inputId","text","MemoizedField","displayName"],"sources":["../src/Field.tsx"],"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 { memo, ReactElement, useMemo } from \"react\";\n\nimport {\n  FormControl as MuiFormControl,\n  FormLabel as MuiFormLabel,\n} from \"@mui/material\";\nimport { FieldError } from \"./FieldError\";\nimport { FieldHint } from \"./FieldHint\";\nimport { FieldLabel } from \"./FieldLabel\";\nimport { Typography } from \"./Typography\";\nimport { useFieldset } from \"./FieldsetContext\";\nimport { useTranslation } from \"react-i18next\";\nimport { useUniqueId } from \"./useUniqueId\";\n\nexport const fieldTypeValues = [\"single\", \"group\"] as const;\n\nexport type FieldProps = {\n  /**\n   * If `error` is not undefined, the `input` will indicate an error.\n   */\n  errorMessage?: string;\n  /**\n   * The field type determines how ARIA components are setup. It's important to use this to denote if you expect only one component (like a text field) or multiple (like a radio group).\n   */\n  fieldType: (typeof fieldTypeValues)[number];\n  /**\n   * If `true`, the Field label will be shown\n   */\n  hasVisibleLabel: boolean;\n  /**\n   * The helper text content.\n   */\n  hint?: string;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * Important for narrowing down the `fieldset` role to \"radiogroup\".\n   */\n  isRadioGroup?: boolean;\n  /**\n   * Important for determining if children inherit error state\n   */\n  isCheckboxGroup?: boolean;\n  /**\n   * If `true`, the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, the `input` element is not required.\n   */\n  isOptional?: boolean;\n  /**\n   * The label for the `input` element.\n   */\n  label: string;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n  /**\n   * Render-props function that sends back ARIA props to your field component.\n   */\n  renderFieldComponent: ({\n    ariaDescribedBy,\n    dataSe,\n    errorMessageElementId,\n    id,\n    labelElementId,\n  }: {\n    ariaDescribedBy?: string;\n    dataSe?: string;\n    errorMessageElementId?: string;\n    id: string;\n    labelElementId: string;\n  }) => ReactElement;\n};\n\nconst Field = ({\n  errorMessage,\n  fieldType,\n  hasVisibleLabel,\n  hint,\n  id: idOverride,\n  isDisabled: isDisabledProp = false,\n  isRadioGroup = false,\n  isOptional = false,\n  label,\n  renderFieldComponent,\n}: FieldProps) => {\n  const { t } = useTranslation();\n\n  const id = useUniqueId(idOverride);\n  const hintId = hint ? `${id}-hint` : undefined;\n  const errorMessageElementId = errorMessage ? `${id}-error` : undefined;\n  const labelElementId = `${id}-label`;\n\n  const ariaDescribedBy = useMemo(\n    () => [hintId, errorMessageElementId].join(\" \").trim() || undefined,\n    [errorMessageElementId, hintId]\n  );\n\n  const { isDisabled: isFieldsetDisabled } = useFieldset();\n\n  const isDisabled = useMemo(\n    () => isDisabledProp || isFieldsetDisabled,\n    [isDisabledProp, isFieldsetDisabled]\n  );\n\n  return (\n    <MuiFormControl\n      component={fieldType === \"group\" ? \"fieldset\" : \"div\"}\n      disabled={isDisabled}\n      error={Boolean(errorMessage)}\n      role={isRadioGroup ? \"radiogroup\" : undefined}\n    >\n      {fieldType === \"group\" ? (\n        <MuiFormLabel component=\"legend\">\n          {label}{\" \"}\n          {isOptional && label && (\n            <Typography component=\"span\" color=\"textSecondary\">\n              ({t(\"fieldlabel.optional.text\")})\n            </Typography>\n          )}\n        </MuiFormLabel>\n      ) : (\n        <FieldLabel\n          hasVisibleLabel={hasVisibleLabel}\n          id={labelElementId}\n          inputId={id}\n          isOptional={isOptional}\n          text={label}\n        />\n      )}\n\n      {hint && <FieldHint id={hintId} text={hint} />}\n\n      {renderFieldComponent({\n        ariaDescribedBy,\n        errorMessageElementId,\n        id,\n        labelElementId,\n      })}\n\n      {errorMessage && (\n        <FieldError id={errorMessageElementId} text={errorMessage} />\n      )}\n    </MuiFormControl>\n  );\n};\n\nconst MemoizedField = memo(Field);\nMemoizedField.displayName = \"Field\";\n\nexport { MemoizedField as Field };\n"],"mappings":"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"}

package/dist/NativeSelect.js

@@ -31,20 +31,32 @@ const NativeSelect = forwardRef((_ref, ref) => {
     value,
     children
   } = _ref;
-  const renderFieldComponent = useCallback(() => _jsx(_Select, {
-    "data-se": testId,
-    defaultValue: defaultValue,
-    id: idOverride,
-    name: idOverride,
-    multiple: isMultiSelect,
-    native: true,
-    onBlur: onBlur,
-    onChange: onChange,
-    onFocus: onFocus,
-    ref: ref,
-    value: value,
-    children: children
-  }), [children, defaultValue, idOverride, isMultiSelect, onBlur, onChange, onFocus, ref, testId, value]);
+  const renderFieldComponent = useCallback(_ref2 => {
+    let {
+      ariaDescribedBy,
+      errorMessageElementId,
+      labelElementId
+    } = _ref2;
+    return _jsx(_Select, {
+      "aria-describedby": ariaDescribedBy,
+      children: children,
+      "data-se": testId,
+      defaultValue: defaultValue,
+      id: idOverride,
+      inputProps: {
+        "aria-errormessage": errorMessageElementId,
+        "aria-labelledby": labelElementId
+      },
+      name: idOverride,
+      multiple: isMultiSelect,
+      native: true,
+      onBlur: onBlur,
+      onChange: onChange,
+      onFocus: onFocus,
+      ref: ref,
+      value: value
+    });
+  }, [children, defaultValue, idOverride, isMultiSelect, onBlur, onChange, onFocus, ref, testId, value]);
   return _jsx(Field, {
     errorMessage: errorMessage,
     fieldType: "single",

package/dist/NativeSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"NativeSelect.js","names":["forwardRef","memo","useCallback","Field","jsx","_jsx","NativeSelect","_ref","ref","defaultValue","errorMessage","hint","id","idOverride","isDisabled","isMultiSelect","isOptional","label","onBlur","onChange","onFocus","testId","value","children","renderFieldComponent","_Select","name","multiple","native","fieldType","hasVisibleLabel","MemoizedNativeSelect","displayName"],"sources":["../src/NativeSelect.tsx"],"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 { ReactElement, forwardRef, memo, useCallback } from \"react\";\nimport { Select as MuiSelect } from \"@mui/material\";\nimport { SelectProps as MuiSelectProps } from \"@mui/material\";\nimport { Field } from \"./Field\";\n\nimport type { SeleniumProps } from \"./SeleniumProps\";\n\nexport type NativeSelectOption = {\n  text: string;\n  value?: string;\n  type?: \"heading\" | \"option\";\n};\n\nexport type NativeSelectProps = {\n  /**\n   * The options or optgroup elements within the NativeSelect\n   */\n  children?: ReactElement<\"option\"> | ReactElement<\"optgroup\">;\n  /**\n   * The default value of the NativeSelect. Only applicable if `value` is not provided\n   */\n  defaultValue?: string;\n  /**\n   * The error message for the NativeSelect\n   */\n  errorMessage?: string;\n  /**\n   * The hint text for the NativeSelect\n   */\n  hint?: string;\n  /**\n   * The id attribute of the NativeSelect\n   */\n  id?: string;\n  /**\n   * If `true`, the NativeSelect is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, the NativeSelect allows multiple selections\n   */\n  isMultiSelect?: boolean;\n  /**\n   * If `true`, the NativeSelect is optional\n   */\n  isOptional?: boolean;\n  /**\n   * The label text for the NativeSelect\n   */\n  label: string;\n  /**\n   * Callback fired when the NativeSelect loses focus\n   */\n  onBlur?: MuiSelectProps[\"onBlur\"];\n  /**\n   * Callback fired when the value of the NativeSelect changes\n   */\n  onChange?: MuiSelectProps[\"onChange\"];\n  /**\n   * Callback fired when the NativeSelect gains focus\n   */\n  onFocus?: MuiSelectProps[\"onFocus\"];\n  /**\n   * The value or values selected in the NativeSelect\n   */\n  value?: string | string[];\n} & SeleniumProps;\n\nconst NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(\n  (\n    {\n      defaultValue,\n      errorMessage,\n      hint,\n      id: idOverride,\n      isDisabled = false,\n      isMultiSelect = false,\n      isOptional = false,\n      label,\n      onBlur,\n      onChange,\n      onFocus,\n      testId,\n      value,\n      children,\n    },\n    ref\n  ) => {\n    const renderFieldComponent = useCallback(\n      () => (\n        <MuiSelect\n          data-se={testId}\n          defaultValue={defaultValue}\n          id={idOverride}\n          name={idOverride}\n          multiple={isMultiSelect}\n          native={true}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          ref={ref}\n          value={value}\n          children={children}\n        />\n      ),\n      [\n        children,\n        defaultValue,\n        idOverride,\n        isMultiSelect,\n        onBlur,\n        onChange,\n        onFocus,\n        ref,\n        testId,\n        value,\n      ]\n    );\n\n    return (\n      <Field\n        errorMessage={errorMessage}\n        fieldType=\"single\"\n        hasVisibleLabel\n        hint={hint}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isOptional={isOptional}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedNativeSelect = memo(NativeSelect);\nMemoizedNativeSelect.displayName = \"NativeSelect\";\n\nexport { MemoizedNativeSelect as NativeSelect };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAAuBA,UAAU,EAAEC,IAAI,EAAEC,WAAW,QAAQ,OAAO;AAAC,SAG3DC,KAAK;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAiEd,MAAMC,YAAY,GAAGN,UAAU,CAC7B,CAAAO,IAAA,EAiBEC,GAAG,KACA;EAAA,IAjBH;IACEC,YAAY;IACZC,YAAY;IACZC,IAAI;IACJC,EAAE,EAAEC,UAAU;IACdC,UAAU,GAAG,KAAK;IAClBC,aAAa,GAAG,KAAK;IACrBC,UAAU,GAAG,KAAK;IAClBC,KAAK;IACLC,MAAM;IACNC,QAAQ;IACRC,OAAO;IACPC,MAAM;IACNC,KAAK;IACLC;EACF,CAAC,GAAAhB,IAAA;EAGD,MAAMiB,oBAAoB,GAAGtB,WAAW,CACtC,MACEG,IAAA,CAAAoB,OAAA;IACE,WAASJ,MAAO;IAChBZ,YAAY,EAAEA,YAAa;IAC3BG,EAAE,EAAEC,UAAW;IACfa,IAAI,EAAEb,UAAW;IACjBc,QAAQ,EAAEZ,aAAc;IACxBa,MAAM,EAAE,IAAK;IACbV,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAEA,OAAQ;IACjBZ,GAAG,EAAEA,GAAI;IACTc,KAAK,EAAEA,KAAM;IACbC,QAAQ,EAAEA;EAAS,CACpB,CACF,EACD,CACEA,QAAQ,EACRd,YAAY,EACZI,UAAU,EACVE,aAAa,EACbG,MAAM,EACNC,QAAQ,EACRC,OAAO,EACPZ,GAAG,EACHa,MAAM,EACNC,KAAK,CAET,CAAC;EAED,OACEjB,IAAA,CAACF,KAAK;IACJO,YAAY,EAAEA,YAAa;IAC3BmB,SAAS,EAAC,QAAQ;IAClBC,eAAe;IACfnB,IAAI,EAAEA,IAAK;IACXC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBE,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbO,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CACF,CAAC;AAED,MAAMO,oBAAoB,GAAG9B,IAAI,CAACK,YAAY,CAAC;AAC/CyB,oBAAoB,CAACC,WAAW,GAAG,cAAc;AAEjD,SAASD,oBAAoB,IAAIzB,YAAY"}
+{"version":3,"file":"NativeSelect.js","names":["forwardRef","memo","useCallback","Field","jsx","_jsx","NativeSelect","_ref","ref","defaultValue","errorMessage","hint","id","idOverride","isDisabled","isMultiSelect","isOptional","label","onBlur","onChange","onFocus","testId","value","children","renderFieldComponent","_ref2","ariaDescribedBy","errorMessageElementId","labelElementId","_Select","inputProps","name","multiple","native","fieldType","hasVisibleLabel","MemoizedNativeSelect","displayName"],"sources":["../src/NativeSelect.tsx"],"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 { ReactElement, forwardRef, memo, useCallback } from \"react\";\nimport { Select as MuiSelect } from \"@mui/material\";\nimport { SelectProps as MuiSelectProps } from \"@mui/material\";\nimport { Field } from \"./Field\";\n\nimport type { SeleniumProps } from \"./SeleniumProps\";\n\nexport type NativeSelectOption = {\n  text: string;\n  value?: string;\n  type?: \"heading\" | \"option\";\n};\n\nexport type NativeSelectProps = {\n  /**\n   * The options or optgroup elements within the NativeSelect\n   */\n  children?: ReactElement<\"option\"> | ReactElement<\"optgroup\">;\n  /**\n   * The default value of the NativeSelect. Only applicable if `value` is not provided\n   */\n  defaultValue?: string;\n  /**\n   * The error message for the NativeSelect\n   */\n  errorMessage?: string;\n  /**\n   * The hint text for the NativeSelect\n   */\n  hint?: string;\n  /**\n   * The id attribute of the NativeSelect\n   */\n  id?: string;\n  /**\n   * If `true`, the NativeSelect is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, the NativeSelect allows multiple selections\n   */\n  isMultiSelect?: boolean;\n  /**\n   * If `true`, the NativeSelect is optional\n   */\n  isOptional?: boolean;\n  /**\n   * The label text for the NativeSelect\n   */\n  label: string;\n  /**\n   * Callback fired when the NativeSelect loses focus\n   */\n  onBlur?: MuiSelectProps[\"onBlur\"];\n  /**\n   * Callback fired when the value of the NativeSelect changes\n   */\n  onChange?: MuiSelectProps[\"onChange\"];\n  /**\n   * Callback fired when the NativeSelect gains focus\n   */\n  onFocus?: MuiSelectProps[\"onFocus\"];\n  /**\n   * The value or values selected in the NativeSelect\n   */\n  value?: string | string[];\n} & SeleniumProps;\n\nconst NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(\n  (\n    {\n      defaultValue,\n      errorMessage,\n      hint,\n      id: idOverride,\n      isDisabled = false,\n      isMultiSelect = false,\n      isOptional = false,\n      label,\n      onBlur,\n      onChange,\n      onFocus,\n      testId,\n      value,\n      children,\n    },\n    ref\n  ) => {\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, errorMessageElementId, labelElementId }) => (\n        <MuiSelect\n          aria-describedby={ariaDescribedBy}\n          children={children}\n          data-se={testId}\n          defaultValue={defaultValue}\n          id={idOverride}\n          inputProps={{\n            \"aria-errormessage\": errorMessageElementId,\n            \"aria-labelledby\": labelElementId,\n          }}\n          name={idOverride}\n          multiple={isMultiSelect}\n          native={true}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          ref={ref}\n          value={value}\n        />\n      ),\n      [\n        children,\n        defaultValue,\n        idOverride,\n        isMultiSelect,\n        onBlur,\n        onChange,\n        onFocus,\n        ref,\n        testId,\n        value,\n      ]\n    );\n\n    return (\n      <Field\n        errorMessage={errorMessage}\n        fieldType=\"single\"\n        hasVisibleLabel\n        hint={hint}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isOptional={isOptional}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedNativeSelect = memo(NativeSelect);\nMemoizedNativeSelect.displayName = \"NativeSelect\";\n\nexport { MemoizedNativeSelect as NativeSelect };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAAuBA,UAAU,EAAEC,IAAI,EAAEC,WAAW,QAAQ,OAAO;AAAC,SAG3DC,KAAK;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAiEd,MAAMC,YAAY,GAAGN,UAAU,CAC7B,CAAAO,IAAA,EAiBEC,GAAG,KACA;EAAA,IAjBH;IACEC,YAAY;IACZC,YAAY;IACZC,IAAI;IACJC,EAAE,EAAEC,UAAU;IACdC,UAAU,GAAG,KAAK;IAClBC,aAAa,GAAG,KAAK;IACrBC,UAAU,GAAG,KAAK;IAClBC,KAAK;IACLC,MAAM;IACNC,QAAQ;IACRC,OAAO;IACPC,MAAM;IACNC,KAAK;IACLC;EACF,CAAC,GAAAhB,IAAA;EAGD,MAAMiB,oBAAoB,GAAGtB,WAAW,CACtCuB,KAAA;IAAA,IAAC;MAAEC,eAAe;MAAEC,qBAAqB;MAAEC;IAAe,CAAC,GAAAH,KAAA;IAAA,OACzDpB,IAAA,CAAAwB,OAAA;MACE,oBAAkBH,eAAgB;MAClCH,QAAQ,EAAEA,QAAS;MACnB,WAASF,MAAO;MAChBZ,YAAY,EAAEA,YAAa;MAC3BG,EAAE,EAAEC,UAAW;MACfiB,UAAU,EAAE;QACV,mBAAmB,EAAEH,qBAAqB;QAC1C,iBAAiB,EAAEC;MACrB,CAAE;MACFG,IAAI,EAAElB,UAAW;MACjBmB,QAAQ,EAAEjB,aAAc;MACxBkB,MAAM,EAAE,IAAK;MACbf,MAAM,EAAEA,MAAO;MACfC,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEA,OAAQ;MACjBZ,GAAG,EAAEA,GAAI;MACTc,KAAK,EAAEA;IAAM,CACd,CAAC;EAAA,CACH,EACD,CACEC,QAAQ,EACRd,YAAY,EACZI,UAAU,EACVE,aAAa,EACbG,MAAM,EACNC,QAAQ,EACRC,OAAO,EACPZ,GAAG,EACHa,MAAM,EACNC,KAAK,CAET,CAAC;EAED,OACEjB,IAAA,CAACF,KAAK;IACJO,YAAY,EAAEA,YAAa;IAC3BwB,SAAS,EAAC,QAAQ;IAClBC,eAAe;IACfxB,IAAI,EAAEA,IAAK;IACXC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBE,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbO,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CACF,CAAC;AAED,MAAMY,oBAAoB,GAAGnC,IAAI,CAACK,YAAY,CAAC;AAC/C8B,oBAAoB,CAACC,WAAW,GAAG,cAAc;AAEjD,SAASD,oBAAoB,IAAI9B,YAAY"}

package/dist/PasswordField.js

@@ -47,11 +47,13 @@ const PasswordField = forwardRef((_ref, ref) => {
   const renderFieldComponent = useCallback(_ref2 => {
     let {
       ariaDescribedBy,
-      id
+      errorMessageElementId,
+      id,
+      labelElementId
     } = _ref2;
     return _jsx(_InputBase, {
       "aria-describedby": ariaDescribedBy,
-      autoComplete: autoCompleteType,
+      autoComplete: inputType === "password" ? autoCompleteType : "off",
       autoFocus: hasInitialFocus,
       "data-se": testId,
       endAdornment: hasShowPassword && _jsx(_InputAdornment, {
@@ -64,6 +66,8 @@ const PasswordField = forwardRef((_ref, ref) => {
       }),
       id: id,
       inputProps: {
+        "aria-errormessage": errorMessageElementId,
+        "aria-labelledby": labelElementId,
         role: "textbox"
       },
       name: nameOverride ?? id,