@okta/odyssey-react-mui 1.15.9 → 1.21.0

package/CHANGELOG.md

@@ -3,6 +3,84 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.21.0](https://github.com/okta/odyssey/compare/v1.15.9...v1.21.0) (2024-08-07)
+
+### Features
+
+- add backwards compatible empty state export ([#2266](https://github.com/okta/odyssey/issues/2266)) ([0fe3203](https://github.com/okta/odyssey/commit/0fe3203629dc85f7c91c58e3ff078c9a89360407))
+- add initial search prop to DataTable ([#2265](https://github.com/okta/odyssey/issues/2265)) ([5829534](https://github.com/okta/odyssey/commit/582953472b9a4e9946a57c852b78cd890a6ab674))
+- adds a generic top nav component ([#2296](https://github.com/okta/odyssey/issues/2296)) ([6f3165f](https://github.com/okta/odyssey/commit/6f3165f9fd4a1d1743c975b72132d4ec186d09bb))
+- adds new side navigation component for unified nav design ([#2269](https://github.com/okta/odyssey/issues/2269)) ([e54a470](https://github.com/okta/odyssey/commit/e54a470aaa71eec4fd85f19ac8519425f1d64e8f))
+- EmptyState component ([#2175](https://github.com/okta/odyssey/issues/2175)) ([8c86845](https://github.com/okta/odyssey/commit/8c868450b6e1b8c63775afe1f38219507e9bacc7))
+- move Pagination to its own component ([#2166](https://github.com/okta/odyssey/issues/2166)) ([61eda40](https://github.com/okta/odyssey/commit/61eda40aaf1a5dc5477799694594ea5625715fe0))
+- Test Selectors ([#2209](https://github.com/okta/odyssey/issues/2209)) ([dfa8451](https://github.com/okta/odyssey/commit/dfa8451d0cb6ed63cbd3ac1ce740203b638348f7))
+
+### Bug Fixes
+
+- add changes back, remove required label ([cccce45](https://github.com/okta/odyssey/commit/cccce454c33588369786b2dc8cc6e39bbace4678))
+- add comment ([9af7d11](https://github.com/okta/odyssey/commit/9af7d11f2964fa1b17be673c4e84a0bbb1a47ab9))
+- add floating action button variant ([a32110d](https://github.com/okta/odyssey/commit/a32110d5aa71efd7fcbf3f1606eae613a639c721))
+- add hint text to Radio and RadioGroup ([6518de5](https://github.com/okta/odyssey/commit/6518de5b38e54ec6aa3146a310c7c02a3b7d8a4e))
+- add optional href prop to button ([f46123b](https://github.com/okta/odyssey/commit/f46123b538947aa0040b29832dafaf6df9da332e))
+- add secondary danger button variant ([170e6e0](https://github.com/okta/odyssey/commit/170e6e03476d3a7fdef9bdca9f94a8d7e0d6f00a))
+- alphabetize props ([988bd74](https://github.com/okta/odyssey/commit/988bd74e98794f2f48589e6be3e37f608f87a07a))
+- alphabetize props in imports ([ca56f0a](https://github.com/okta/odyssey/commit/ca56f0a3ad5b3a4902bf38111bc6c229ad1533f6))
+- bump version to 1.17 ([0e32aba](https://github.com/okta/odyssey/commit/0e32aba973ef00d5a872dbd408a84fb54c8a7408))
+- make return implicit in label ([e2a26df](https://github.com/okta/odyssey/commit/e2a26df5082bfb5e7573c83a9ab53b364941713b))
+- move Drawer from labs to Odyssey OKTA-700393 ([247b30a](https://github.com/okta/odyssey/commit/247b30af6e598119b78d97c971f490c48cd1dfca))
+- prevent mixing old and new button props ([7aed65b](https://github.com/okta/odyssey/commit/7aed65be175c12525c9aee5fca18af0251dd2fec))
+- re-add support for "callToAction" button usage ([0eb6ec7](https://github.com/okta/odyssey/commit/0eb6ec704ba6a0a9da12dcd6d864a6d1d1421915))
+- remove invalid pseudo element from theme overrides ([#2310](https://github.com/okta/odyssey/issues/2310)) ([fea0793](https://github.com/okta/odyssey/commit/fea0793acf0800494270a87e4e5d65129942b99e))
+- rename new variant ([28466a4](https://github.com/okta/odyssey/commit/28466a46c8a254f543f595d2abf26115eff7b66b))
+- resolve eslint error ([6be8bd0](https://github.com/okta/odyssey/commit/6be8bd0ca6f333949d80cbe59e28fac48528388b))
+- revert type change ([9d9e16b](https://github.com/okta/odyssey/commit/9d9e16b83cc3047b7dd6c5eb7e8027b2dd0898cb))
+
+## [1.20.0](https://github.com/okta/odyssey/compare/v1.19.0...v1.20.0) (2024-07-25)
+
+### Features
+
+- pageTemplate and Layout component ([#2219](https://github.com/okta/odyssey/issues/2219)) ([a04eb1d](https://github.com/okta/odyssey/commit/a04eb1df24702ef23b436d0df58e0571974b0454))
+
+### Bug Fixes
+
+- data Table legacy improvements ([#2294](https://github.com/okta/odyssey/issues/2294)) ([3146cd1](https://github.com/okta/odyssey/commit/3146cd1edeb145aa727682659eaba422533ba0f1))
+- english leak for "Close" in Autocomplete ([#2291](https://github.com/okta/odyssey/issues/2291)) ([0959c71](https://github.com/okta/odyssey/commit/0959c71f7c2dc6ddc1cde3281534f19222f4df6d))
+
+## [1.19.0](https://github.com/okta/odyssey/compare/v1.18.0...v1.19.0) (2024-07-15)
+
+### Features
+
+- adds new side navigation component for unified nav design ([#2269](https://github.com/okta/odyssey/issues/2269)) ([e54a470](https://github.com/okta/odyssey/commit/e54a470aaa71eec4fd85f19ac8519425f1d64e8f))
+
+## [1.18.0](https://github.com/okta/odyssey/compare/v1.15.9...v1.18.0) (2024-06-26)
+
+### Features
+
+- add backwards compatible empty state export ([#2266](https://github.com/okta/odyssey/issues/2266)) ([0fe3203](https://github.com/okta/odyssey/commit/0fe3203629dc85f7c91c58e3ff078c9a89360407))
+- add initial search prop to DataTable ([#2265](https://github.com/okta/odyssey/issues/2265)) ([5829534](https://github.com/okta/odyssey/commit/582953472b9a4e9946a57c852b78cd890a6ab674))
+- EmptyState component ([#2175](https://github.com/okta/odyssey/issues/2175)) ([8c86845](https://github.com/okta/odyssey/commit/8c868450b6e1b8c63775afe1f38219507e9bacc7))
+- move Pagination to its own component ([#2166](https://github.com/okta/odyssey/issues/2166)) ([61eda40](https://github.com/okta/odyssey/commit/61eda40aaf1a5dc5477799694594ea5625715fe0))
+- Test Selectors ([#2209](https://github.com/okta/odyssey/issues/2209)) ([dfa8451](https://github.com/okta/odyssey/commit/dfa8451d0cb6ed63cbd3ac1ce740203b638348f7))
+
+### Bug Fixes
+
+- add changes back, remove required label ([cccce45](https://github.com/okta/odyssey/commit/cccce454c33588369786b2dc8cc6e39bbace4678))
+- add comment ([9af7d11](https://github.com/okta/odyssey/commit/9af7d11f2964fa1b17be673c4e84a0bbb1a47ab9))
+- add floating action button variant ([a32110d](https://github.com/okta/odyssey/commit/a32110d5aa71efd7fcbf3f1606eae613a639c721))
+- add hint text to Radio and RadioGroup ([6518de5](https://github.com/okta/odyssey/commit/6518de5b38e54ec6aa3146a310c7c02a3b7d8a4e))
+- add optional href prop to button ([f46123b](https://github.com/okta/odyssey/commit/f46123b538947aa0040b29832dafaf6df9da332e))
+- add secondary danger button variant ([170e6e0](https://github.com/okta/odyssey/commit/170e6e03476d3a7fdef9bdca9f94a8d7e0d6f00a))
+- alphabetize props ([988bd74](https://github.com/okta/odyssey/commit/988bd74e98794f2f48589e6be3e37f608f87a07a))
+- alphabetize props in imports ([ca56f0a](https://github.com/okta/odyssey/commit/ca56f0a3ad5b3a4902bf38111bc6c229ad1533f6))
+- bump version to 1.17 ([0e32aba](https://github.com/okta/odyssey/commit/0e32aba973ef00d5a872dbd408a84fb54c8a7408))
+- make return implicit in label ([e2a26df](https://github.com/okta/odyssey/commit/e2a26df5082bfb5e7573c83a9ab53b364941713b))
+- move Drawer from labs to Odyssey OKTA-700393 ([247b30a](https://github.com/okta/odyssey/commit/247b30af6e598119b78d97c971f490c48cd1dfca))
+- prevent mixing old and new button props ([7aed65b](https://github.com/okta/odyssey/commit/7aed65be175c12525c9aee5fca18af0251dd2fec))
+- re-add support for "callToAction" button usage ([0eb6ec7](https://github.com/okta/odyssey/commit/0eb6ec704ba6a0a9da12dcd6d864a6d1d1421915))
+- rename new variant ([28466a4](https://github.com/okta/odyssey/commit/28466a46c8a254f543f595d2abf26115eff7b66b))
+- resolve eslint error ([6be8bd0](https://github.com/okta/odyssey/commit/6be8bd0ca6f333949d80cbe59e28fac48528388b))
+- revert type change ([9d9e16b](https://github.com/okta/odyssey/commit/9d9e16b83cc3047b7dd6c5eb7e8027b2dd0898cb))
+
 ## [1.15.9](https://github.com/okta/odyssey/compare/v1.15.8...v1.15.9) (2024-03-26)
 
 **Note:** Version bump only for package @okta/odyssey-react-mui

package/dist/Accordion.js

@@ -27,12 +27,14 @@ const Accordion = ({
   isDisabled,
   isExpanded,
   onChange,
+  testId,
   translate
 }) => {
   const id = useUniqueId(idOverride);
   const headerId = `${id}-header`;
   const contentId = `${id}-content`;
   return _jsxs(_Accordion, {
+    "data-se": testId,
     defaultExpanded: isDefaultExpanded,
     disabled: isDisabled,
     disableGutters: true,

package/dist/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","names":["memo","ChevronDownIcon","Support","useUniqueId","jsx","_jsx","jsxs","_jsxs","Accordion","children","label","id","idOverride","isDefaultExpanded","isDisabled","isExpanded","onChange","translate","headerId","contentId","_Accordion","defaultExpanded","disabled","disableGutters","expanded","_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 { HtmlProps } from \"./HtmlProps\";\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\";\nimport { useUniqueId } from \"./useUniqueId\";\n\nexport type AccordionProps = {\n  /**\n   * The content of the Accordion itself\n   */\n  children: ReactNode;\n  /**\n   * Defines IDs for the header and the content of the Accordion\n   */\n  id?: string;\n  /**\n   * The label text for the AccordionSummary\n   */\n  label: string;\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  Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst Accordion = ({\n  children,\n  label,\n  id: idOverride,\n  isDefaultExpanded,\n  isDisabled,\n  isExpanded,\n  onChange,\n  translate,\n}: AccordionProps) => {\n  const id = useUniqueId(idOverride);\n  const headerId = `${id}-header`;\n  const contentId = `${id}-content`;\n  return (\n    <MuiAccordion\n      defaultExpanded={isDefaultExpanded}\n      disabled={isDisabled}\n      disableGutters\n      expanded={isExpanded}\n      onChange={onChange}\n    >\n      <MuiAccordionSummary\n        aria-controls={contentId}\n        expandIcon={<ChevronDownIcon />}\n        id={headerId}\n      >\n        <Support component=\"div\" translate={translate}>\n          {label}\n        </Support>\n      </MuiAccordionSummary>\n      <MuiAccordionDetails aria-labelledby={headerId}>\n        {children}\n      </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,SACPC,WAAW;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AA2CpB,MAAMC,SAAS,GAAGA,CAAC;EACjBC,QAAQ;EACRC,KAAK;EACLC,EAAE,EAAEC,UAAU;EACdC,iBAAiB;EACjBC,UAAU;EACVC,UAAU;EACVC,QAAQ;EACRC;AACc,CAAC,KAAK;EACpB,MAAMN,EAAE,GAAGR,WAAW,CAACS,UAAU,CAAC;EAClC,MAAMM,QAAQ,GAAI,GAAEP,EAAG,SAAQ;EAC/B,MAAMQ,SAAS,GAAI,GAAER,EAAG,UAAS;EACjC,OACEJ,KAAA,CAAAa,UAAA;IACEC,eAAe,EAAER,iBAAkB;IACnCS,QAAQ,EAAER,UAAW;IACrBS,cAAc;IACdC,QAAQ,EAAET,UAAW;IACrBC,QAAQ,EAAEA,QAAS;IAAAP,QAAA,GAEnBJ,IAAA,CAAAoB,iBAAA;MACE,iBAAeN,SAAU;MACzBO,UAAU,EAAErB,IAAA,CAACJ,eAAe,IAAE,CAAE;MAChCU,EAAE,EAAEO,QAAS;MAAAT,QAAA,EAEbJ,IAAA,CAACH,OAAO;QAACyB,SAAS,EAAC,KAAK;QAACV,SAAS,EAAEA,SAAU;QAAAR,QAAA,EAC3CC;MAAK,CACC;IAAC,CACS,CAAC,EACtBL,IAAA,CAAAuB,iBAAA;MAAqB,mBAAiBV,QAAS;MAAAT,QAAA,EAC5CA;IAAQ,CACU,CAAC;EAAA,CACV,CAAC;AAEnB,CAAC;AAED,MAAMoB,iBAAiB,GAAG7B,IAAI,CAACQ,SAAS,CAAC;AACzCqB,iBAAiB,CAACC,WAAW,GAAG,WAAW;AAE3C,SAASD,iBAAiB,IAAIrB,SAAS"}
+{"version":3,"file":"Accordion.js","names":["memo","ChevronDownIcon","Support","useUniqueId","jsx","_jsx","jsxs","_jsxs","Accordion","children","label","id","idOverride","isDefaultExpanded","isDisabled","isExpanded","onChange","testId","translate","headerId","contentId","_Accordion","defaultExpanded","disabled","disableGutters","expanded","_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 { HtmlProps } from \"./HtmlProps\";\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\";\nimport { useUniqueId } from \"./useUniqueId\";\n\nexport type AccordionProps = {\n  /**\n   * The content of the Accordion itself\n   */\n  children: ReactNode;\n  /**\n   * Defines IDs for the header and the content of the Accordion\n   */\n  id?: string;\n  /**\n   * The label text for the AccordionSummary\n   */\n  label: string;\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  Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst Accordion = ({\n  children,\n  label,\n  id: idOverride,\n  isDefaultExpanded,\n  isDisabled,\n  isExpanded,\n  onChange,\n  testId,\n  translate,\n}: AccordionProps) => {\n  const id = useUniqueId(idOverride);\n  const headerId = `${id}-header`;\n  const contentId = `${id}-content`;\n\n  return (\n    <MuiAccordion\n      data-se={testId}\n      defaultExpanded={isDefaultExpanded}\n      disabled={isDisabled}\n      disableGutters\n      expanded={isExpanded}\n      onChange={onChange}\n    >\n      <MuiAccordionSummary\n        aria-controls={contentId}\n        expandIcon={<ChevronDownIcon />}\n        id={headerId}\n      >\n        <Support component=\"div\" translate={translate}>\n          {label}\n        </Support>\n      </MuiAccordionSummary>\n      <MuiAccordionDetails aria-labelledby={headerId}>\n        {children}\n      </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,SACPC,WAAW;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AA2CpB,MAAMC,SAAS,GAAGA,CAAC;EACjBC,QAAQ;EACRC,KAAK;EACLC,EAAE,EAAEC,UAAU;EACdC,iBAAiB;EACjBC,UAAU;EACVC,UAAU;EACVC,QAAQ;EACRC,MAAM;EACNC;AACc,CAAC,KAAK;EACpB,MAAMP,EAAE,GAAGR,WAAW,CAACS,UAAU,CAAC;EAClC,MAAMO,QAAQ,GAAI,GAAER,EAAG,SAAQ;EAC/B,MAAMS,SAAS,GAAI,GAAET,EAAG,UAAS;EAEjC,OACEJ,KAAA,CAAAc,UAAA;IACE,WAASJ,MAAO;IAChBK,eAAe,EAAET,iBAAkB;IACnCU,QAAQ,EAAET,UAAW;IACrBU,cAAc;IACdC,QAAQ,EAAEV,UAAW;IACrBC,QAAQ,EAAEA,QAAS;IAAAP,QAAA,GAEnBJ,IAAA,CAAAqB,iBAAA;MACE,iBAAeN,SAAU;MACzBO,UAAU,EAAEtB,IAAA,CAACJ,eAAe,IAAE,CAAE;MAChCU,EAAE,EAAEQ,QAAS;MAAAV,QAAA,EAEbJ,IAAA,CAACH,OAAO;QAAC0B,SAAS,EAAC,KAAK;QAACV,SAAS,EAAEA,SAAU;QAAAT,QAAA,EAC3CC;MAAK,CACC;IAAC,CACS,CAAC,EACtBL,IAAA,CAAAwB,iBAAA;MAAqB,mBAAiBV,QAAS;MAAAV,QAAA,EAC5CA;IAAQ,CACU,CAAC;EAAA,CACV,CAAC;AAEnB,CAAC;AAED,MAAMqB,iBAAiB,GAAG9B,IAAI,CAACQ,SAAS,CAAC;AACzCsB,iBAAiB,CAACC,WAAW,GAAG,WAAW;AAE3C,SAASD,iBAAiB,IAAItB,SAAS"}

package/dist/Autocomplete.js

@@ -15,6 +15,7 @@ import { createContext, forwardRef, memo, useCallback, useContext, useEffect, us
 import styled from "@emotion/styled";
 import { VariableSizeList } from "react-window";
 import _AutoSizer from "react-virtualized-auto-sizer";
+import { useTranslation } from "react-i18next";
 const AutoSizer = _AutoSizer;
 import { Field } from "./Field.js";
 import { ComponentControlledState, useInputValues, getControlState } from "./inputUtils.js";
@@ -42,6 +43,7 @@ const Autocomplete = ({
   HintLinkComponent,
   label,
   name: nameOverride,
+  noOptionsText,
   onBlur,
   onChange: onChangeProp,
   onInputChange: onInputChangeProp,
@@ -52,6 +54,9 @@ const Autocomplete = ({
   testId,
   translate
 }) => {
+  const {
+    t
+  } = useTranslation();
   const controlledStateRef = useRef(getControlState({
     controlledValue: value,
     uncontrolledValue: defaultValue
@@ -196,6 +201,8 @@ const Autocomplete = ({
       ListboxComponent
     }),
     "aria-disabled": isDisabled,
+    clearText: t("clear.text"),
+    closeText: t("close.text"),
     disableCloseOnSelect: hasMultipleChoices,
     disabled: isDisabled,
     freeSolo: isCustomValueAllowed,
@@ -204,10 +211,12 @@ const Autocomplete = ({
     fullWidth: isFullWidth,
     loading: isLoading,
     multiple: hasMultipleChoices,
+    noOptionsText: noOptionsText,
     onBlur: onBlur,
     onChange: onChange,
     onInputChange: onInputChange,
     onFocus: onFocus,
+    openText: t("open.text"),
     options: options,
     readOnly: isReadOnly,
     renderInput: renderInput,

package/dist/Autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.js","names":["createContext","forwardRef","memo","useCallback","useContext","useEffect","useMemo","useRef","styled","VariableSizeList","_AutoSizer","AutoSizer","Field","ComponentControlledState","useInputValues","getControlState","jsx","_jsx","ListboxContainer","div","Autocomplete","ariaDescribedBy","defaultValue","errorMessage","errorMessageList","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","isVirtualized","isVirtualizedProp","hint","HintLinkComponent","label","name","nameOverride","onBlur","onChange","onChangeProp","onInputChange","onInputChangeProp","onFocus","options","value","getIsOptionEqualToValue","testId","translate","controlledStateRef","controlledValue","uncontrolledValue","Boolean","defaultValueProp","undefined","valueProps","controlState","current","inputValueProp","CONTROLLED","renderInput","InputLabelProps","InputProps","params","fieldType","hasVisibleLabel","htmlFor","renderFieldComponent","errorMessageElementId","labelElementId","_InputBase","inputProps","required","renderVirtualizedRow","data","index","style","baseOption","optionItem","props","OuterListboxContext","OuterListboxElementType","ref","outerProps","useResetCache","length","resetAfterIndex","ListboxComponent","children","other","itemData","flatMap","item","concat","optionHeight","overscanRowCount","itemSize","gridRef","renderWindow","height","width","innerElementType","itemCount","outerElementType","overscanCount","Provider","event","reason","details","_Autocomplete","disableCloseOnSelect","disabled","freeSolo","filterSelectedOptions","fullWidth","loading","multiple","readOnly","isOptionEqualToValue","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  UseAutocompleteProps,\n  AutocompleteValue,\n  AutocompleteRenderInputParams,\n} from \"@mui/material\";\nimport {\n  createContext,\n  FC,\n  forwardRef,\n  HTMLAttributes,\n  memo,\n  ReactElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport styled from \"@emotion/styled\";\nimport { VariableSizeList, ListChildComponentProps } from \"react-window\";\nimport _AutoSizer, {\n  Props as AutoSizerProps,\n  Size as AutoSizerSize,\n} from \"react-virtualized-auto-sizer\";\n\n// This is required to get around a react-types issue for \"AutoSizer is not a valid JSX element.\"\n// @see https://github.com/bvaughn/react-virtualized/issues/1739#issuecomment-1291444246\nconst AutoSizer = _AutoSizer as unknown as FC<AutoSizerProps>;\n\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport {\n  ComponentControlledState,\n  useInputValues,\n  getControlState,\n} from \"./inputUtils\";\n\nexport type AutocompleteProps<\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n> = {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"defaultValue\"];\n  /**\n   * Enables multiple choice selection\n   */\n  hasMultipleChoices?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"multiple\"];\n  /**\n   * The value for the input\n   */\n  inputValue?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"inputValue\"];\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   * 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   * 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?: UseAutocompleteProps<\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: ReadonlyArray<OptionType>;\n  /**\n   * The value of the Autocomplete input\n   */\n  value?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"value\"];\n\n  /**\n   * Used to determine if the option represents the given value. Uses strict equality by default if none provided.\n   * Both arguments need to be handled, an option can only match with one value.\n   * option: the option to test\n   * value: the value to test against\n   *\n   * You will need to implement this function if your `option` items are objects.\n   */\n  getIsOptionEqualToValue?: (option: OptionType, value: OptionType) => boolean;\n\n  /**\n   * If this component is required to display a virtualized list of options,\n   * then this value needs to be set to true.\n   * It is recommended if you're options are on the order of 10's of hundreds or more.\n   */\n  isVirtualized?: boolean;\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n  | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\nconst ListboxContainer = styled.div`\n  width: 100%;\n  height: 100%;\n`;\n\nconst Autocomplete = <\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n>({\n  ariaDescribedBy,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hasMultipleChoices,\n  id: idOverride,\n  inputValue,\n  isCustomValueAllowed,\n  isDisabled,\n  isFullWidth = false,\n  isLoading,\n  isOptional = false,\n  isReadOnly,\n  isVirtualized: isVirtualizedProp = false,\n  hint,\n  HintLinkComponent,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange: onChangeProp,\n  onInputChange: onInputChangeProp,\n  onFocus,\n  options,\n  value,\n  getIsOptionEqualToValue,\n  testId,\n  translate,\n}: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n\n  const isVirtualized = useRef(Boolean(isVirtualizedProp));\n  const defaultValueProp = useMemo<\n    | AutocompleteValue<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >\n    | undefined\n  >(() => {\n    if (hasMultipleChoices) {\n      if (value === undefined) {\n        return defaultValue;\n      }\n      return [] as AutocompleteValue<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >;\n    }\n    return value === undefined ? defaultValue : undefined;\n  }, [defaultValue, hasMultipleChoices, value]);\n\n  const valueProps = useInputValues({\n    defaultValue: defaultValueProp,\n    value: value,\n    controlState: controlledStateRef.current,\n  });\n\n  const inputValueProp = useMemo(() => {\n    if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {\n      return { inputValue };\n    }\n    return undefined;\n  }, [inputValue]);\n\n  const renderInput = useCallback(\n    ({\n      InputLabelProps,\n      InputProps,\n      ...params\n    }: AutocompleteRenderInputParams) => (\n      <Field\n        ariaDescribedBy={ariaDescribedBy}\n        errorMessage={errorMessage}\n        errorMessageList={errorMessageList}\n        fieldType=\"single\"\n        hasVisibleLabel\n        //@ts-expect-error htmlFor does not exist ont he InputLabelProps for autocomplete\n        id={InputLabelProps.htmlFor}\n        isFullWidth={isFullWidth}\n        hint={hint}\n        HintLinkComponent={HintLinkComponent}\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              \"data-se\": testId,\n            }}\n            aria-describedby={ariaDescribedBy}\n            id={id}\n            name={nameOverride ?? id}\n            required={!isOptional}\n          />\n        )}\n      />\n    ),\n    [\n      ariaDescribedBy,\n      errorMessage,\n      errorMessageList,\n      hint,\n      HintLinkComponent,\n      isFullWidth,\n      isOptional,\n      label,\n      nameOverride,\n      testId,\n    ],\n  );\n\n  const renderVirtualizedRow = ({\n    data,\n    index,\n    style,\n  }: ListChildComponentProps) => {\n    const baseOption = data[index];\n    /**\n     * react-window calculates the absolute positions of the list items, via an inline style, so\n     * we need to add it to each list item that is being rendered in the viewable list window.\n     * See here if you need to know more: https://github.com/bvaughn/react-window?tab=readme-ov-file#why-is-my-list-blank-when-i-scroll\n     */\n    const optionItem = { ...baseOption, props: { ...baseOption.props, style } };\n    return optionItem;\n  };\n\n  const OuterListboxContext = createContext({});\n\n  const OuterListboxElementType = forwardRef<HTMLDivElement>((props, ref) => {\n    const outerProps = useContext(OuterListboxContext);\n    return <div ref={ref} {...props} {...outerProps} />;\n  });\n\n  function useResetCache(length: number) {\n    const ref = useRef<VariableSizeList>(null);\n    useEffect(() => {\n      if (ref.current) {\n        ref.current.resetAfterIndex(0, true);\n      }\n    }, [length]);\n    return ref;\n  }\n\n  const ListboxComponent = forwardRef<\n    HTMLDivElement,\n    HTMLAttributes<HTMLElement>\n  >(function (props, ref) {\n    const { children, ...other } = props;\n    const itemData: ReactElement[] = (children as ReactElement[]).flatMap(\n      (item: ReactElement & { children?: ReactElement[] }) =>\n        [item].concat(item.children || []),\n    );\n\n    // the height of an Odyssey autocomplete option item that is used to calculate height of window\n    const optionHeight = 45; //px\n\n    // The number of items (rows or columns) to render outside of the visible area for performance and scrolling reasons\n    const overscanRowCount = 8;\n\n    const itemSize = useCallback(() => optionHeight, []);\n\n    const gridRef = useResetCache(itemData.length);\n\n    const renderWindow = useCallback(\n      ({ height, width }: AutoSizerSize) => (\n        <VariableSizeList\n          innerElementType=\"ul\"\n          itemData={itemData}\n          itemCount={itemData.length}\n          // eslint-disable-next-line @typescript-eslint/no-unused-vars\n          itemSize={itemSize}\n          height={height}\n          width={width}\n          ref={gridRef}\n          outerElementType={OuterListboxElementType}\n          overscanCount={overscanRowCount}\n        >\n          {renderVirtualizedRow}\n        </VariableSizeList>\n      ),\n      [itemData, gridRef, itemSize],\n    );\n\n    return (\n      <ListboxContainer ref={ref}>\n        <OuterListboxContext.Provider value={other}>\n          <AutoSizer>{renderWindow}</AutoSizer>\n        </OuterListboxContext.Provider>\n      </ListboxContainer>\n    );\n  });\n\n  const onChange = useCallback<\n    NonNullable<\n      UseAutocompleteProps<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >[\"onChange\"]\n    >\n  >(\n    (event, value, reason, details) => {\n      onChangeProp?.(event, value, reason, details);\n    },\n    [onChangeProp],\n  );\n\n  const onInputChange = useCallback<\n    NonNullable<\n      UseAutocompleteProps<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >[\"onInputChange\"]\n    >\n  >(\n    (event, value, reason) => {\n      onInputChangeProp?.(event, value, reason);\n    },\n    [onInputChangeProp],\n  );\n\n  return (\n    <MuiAutocomplete\n      {...valueProps}\n      {...inputValueProp}\n      // conditionally provide the ListboxComponent if this needs to be virtualized\n      {...(isVirtualized.current && { ListboxComponent })}\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      disableCloseOnSelect={hasMultipleChoices}\n      disabled={isDisabled}\n      freeSolo={isCustomValueAllowed}\n      filterSelectedOptions={true}\n      id={idOverride}\n      fullWidth={isFullWidth}\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      isOptionEqualToValue={getIsOptionEqualToValue}\n      translate={translate}\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":"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"}
+{"version":3,"file":"Autocomplete.js","names":["createContext","forwardRef","memo","useCallback","useContext","useEffect","useMemo","useRef","styled","VariableSizeList","_AutoSizer","useTranslation","AutoSizer","Field","ComponentControlledState","useInputValues","getControlState","jsx","_jsx","ListboxContainer","div","Autocomplete","ariaDescribedBy","defaultValue","errorMessage","errorMessageList","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","isVirtualized","isVirtualizedProp","hint","HintLinkComponent","label","name","nameOverride","noOptionsText","onBlur","onChange","onChangeProp","onInputChange","onInputChangeProp","onFocus","options","value","getIsOptionEqualToValue","testId","translate","t","controlledStateRef","controlledValue","uncontrolledValue","Boolean","defaultValueProp","undefined","valueProps","controlState","current","inputValueProp","CONTROLLED","renderInput","InputLabelProps","InputProps","params","fieldType","hasVisibleLabel","htmlFor","renderFieldComponent","errorMessageElementId","labelElementId","_InputBase","inputProps","required","renderVirtualizedRow","data","index","style","baseOption","optionItem","props","OuterListboxContext","OuterListboxElementType","ref","outerProps","useResetCache","length","resetAfterIndex","ListboxComponent","children","other","itemData","flatMap","item","concat","optionHeight","overscanRowCount","itemSize","gridRef","renderWindow","height","width","innerElementType","itemCount","outerElementType","overscanCount","Provider","event","reason","details","_Autocomplete","clearText","closeText","disableCloseOnSelect","disabled","freeSolo","filterSelectedOptions","fullWidth","loading","multiple","openText","readOnly","isOptionEqualToValue","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  UseAutocompleteProps,\n  AutocompleteValue,\n  AutocompleteRenderInputParams,\n} from \"@mui/material\";\nimport {\n  createContext,\n  FC,\n  forwardRef,\n  HTMLAttributes,\n  memo,\n  ReactElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport styled from \"@emotion/styled\";\nimport { VariableSizeList, ListChildComponentProps } from \"react-window\";\nimport _AutoSizer, {\n  Props as AutoSizerProps,\n  Size as AutoSizerSize,\n} from \"react-virtualized-auto-sizer\";\nimport { useTranslation } from \"react-i18next\";\n\n// This is required to get around a react-types issue for \"AutoSizer is not a valid JSX element.\"\n// @see https://github.com/bvaughn/react-virtualized/issues/1739#issuecomment-1291444246\nconst AutoSizer = _AutoSizer as unknown as FC<AutoSizerProps>;\n\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport {\n  ComponentControlledState,\n  useInputValues,\n  getControlState,\n} from \"./inputUtils\";\n\nexport type AutocompleteProps<\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n> = {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"defaultValue\"];\n  /**\n   * Enables multiple choice selection\n   */\n  hasMultipleChoices?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"multiple\"];\n  /**\n   * The value for the input\n   */\n  inputValue?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"inputValue\"];\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   * 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 text to display when no options are available\n   *\n   * default: \"No Options\"\n   */\n  noOptionsText?: 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?: UseAutocompleteProps<\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: ReadonlyArray<OptionType>;\n  /**\n   * The value of the Autocomplete input\n   */\n  value?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"value\"];\n\n  /**\n   * Used to determine if the option represents the given value. Uses strict equality by default if none provided.\n   * Both arguments need to be handled, an option can only match with one value.\n   * option: the option to test\n   * value: the value to test against\n   *\n   * You will need to implement this function if your `option` items are objects.\n   */\n  getIsOptionEqualToValue?: (option: OptionType, value: OptionType) => boolean;\n\n  /**\n   * If this component is required to display a virtualized list of options,\n   * then this value needs to be set to true.\n   * It is recommended if you're options are on the order of 10's of hundreds or more.\n   */\n  isVirtualized?: boolean;\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n  | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\nconst ListboxContainer = styled.div`\n  width: 100%;\n  height: 100%;\n`;\n\nconst Autocomplete = <\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n>({\n  ariaDescribedBy,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hasMultipleChoices,\n  id: idOverride,\n  inputValue,\n  isCustomValueAllowed,\n  isDisabled,\n  isFullWidth = false,\n  isLoading,\n  isOptional = false,\n  isReadOnly,\n  isVirtualized: isVirtualizedProp = false,\n  hint,\n  HintLinkComponent,\n  label,\n  name: nameOverride,\n  noOptionsText,\n  onBlur,\n  onChange: onChangeProp,\n  onInputChange: onInputChangeProp,\n  onFocus,\n  options,\n  value,\n  getIsOptionEqualToValue,\n  testId,\n  translate,\n}: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n  const { t } = useTranslation();\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n\n  const isVirtualized = useRef(Boolean(isVirtualizedProp));\n  const defaultValueProp = useMemo<\n    | AutocompleteValue<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >\n    | undefined\n  >(() => {\n    if (hasMultipleChoices) {\n      if (value === undefined) {\n        return defaultValue;\n      }\n      return [] as AutocompleteValue<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >;\n    }\n    return value === undefined ? defaultValue : undefined;\n  }, [defaultValue, hasMultipleChoices, value]);\n\n  const valueProps = useInputValues({\n    defaultValue: defaultValueProp,\n    value: value,\n    controlState: controlledStateRef.current,\n  });\n\n  const inputValueProp = useMemo(() => {\n    if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {\n      return { inputValue };\n    }\n    return undefined;\n  }, [inputValue]);\n\n  const renderInput = useCallback(\n    ({\n      InputLabelProps,\n      InputProps,\n      ...params\n    }: AutocompleteRenderInputParams) => (\n      <Field\n        ariaDescribedBy={ariaDescribedBy}\n        errorMessage={errorMessage}\n        errorMessageList={errorMessageList}\n        fieldType=\"single\"\n        hasVisibleLabel\n        //@ts-expect-error htmlFor does not exist ont he InputLabelProps for autocomplete\n        id={InputLabelProps.htmlFor}\n        isFullWidth={isFullWidth}\n        hint={hint}\n        HintLinkComponent={HintLinkComponent}\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              \"data-se\": testId,\n            }}\n            aria-describedby={ariaDescribedBy}\n            id={id}\n            name={nameOverride ?? id}\n            required={!isOptional}\n          />\n        )}\n      />\n    ),\n    [\n      ariaDescribedBy,\n      errorMessage,\n      errorMessageList,\n      hint,\n      HintLinkComponent,\n      isFullWidth,\n      isOptional,\n      label,\n      nameOverride,\n      testId,\n    ],\n  );\n\n  const renderVirtualizedRow = ({\n    data,\n    index,\n    style,\n  }: ListChildComponentProps) => {\n    const baseOption = data[index];\n    /**\n     * react-window calculates the absolute positions of the list items, via an inline style, so\n     * we need to add it to each list item that is being rendered in the viewable list window.\n     * See here if you need to know more: https://github.com/bvaughn/react-window?tab=readme-ov-file#why-is-my-list-blank-when-i-scroll\n     */\n    const optionItem = { ...baseOption, props: { ...baseOption.props, style } };\n    return optionItem;\n  };\n\n  const OuterListboxContext = createContext({});\n\n  const OuterListboxElementType = forwardRef<HTMLDivElement>((props, ref) => {\n    const outerProps = useContext(OuterListboxContext);\n    return <div ref={ref} {...props} {...outerProps} />;\n  });\n\n  function useResetCache(length: number) {\n    const ref = useRef<VariableSizeList>(null);\n    useEffect(() => {\n      if (ref.current) {\n        ref.current.resetAfterIndex(0, true);\n      }\n    }, [length]);\n    return ref;\n  }\n\n  const ListboxComponent = forwardRef<\n    HTMLDivElement,\n    HTMLAttributes<HTMLElement>\n  >(function (props, ref) {\n    const { children, ...other } = props;\n    const itemData: ReactElement[] = (children as ReactElement[]).flatMap(\n      (item: ReactElement & { children?: ReactElement[] }) =>\n        [item].concat(item.children || []),\n    );\n\n    // the height of an Odyssey autocomplete option item that is used to calculate height of window\n    const optionHeight = 45; //px\n\n    // The number of items (rows or columns) to render outside of the visible area for performance and scrolling reasons\n    const overscanRowCount = 8;\n\n    const itemSize = useCallback(() => optionHeight, []);\n\n    const gridRef = useResetCache(itemData.length);\n\n    const renderWindow = useCallback(\n      ({ height, width }: AutoSizerSize) => (\n        <VariableSizeList\n          innerElementType=\"ul\"\n          itemData={itemData}\n          itemCount={itemData.length}\n          // eslint-disable-next-line @typescript-eslint/no-unused-vars\n          itemSize={itemSize}\n          height={height}\n          width={width}\n          ref={gridRef}\n          outerElementType={OuterListboxElementType}\n          overscanCount={overscanRowCount}\n        >\n          {renderVirtualizedRow}\n        </VariableSizeList>\n      ),\n      [itemData, gridRef, itemSize],\n    );\n\n    return (\n      <ListboxContainer ref={ref}>\n        <OuterListboxContext.Provider value={other}>\n          <AutoSizer>{renderWindow}</AutoSizer>\n        </OuterListboxContext.Provider>\n      </ListboxContainer>\n    );\n  });\n\n  const onChange = useCallback<\n    NonNullable<\n      UseAutocompleteProps<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >[\"onChange\"]\n    >\n  >(\n    (event, value, reason, details) => {\n      onChangeProp?.(event, value, reason, details);\n    },\n    [onChangeProp],\n  );\n\n  const onInputChange = useCallback<\n    NonNullable<\n      UseAutocompleteProps<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >[\"onInputChange\"]\n    >\n  >(\n    (event, value, reason) => {\n      onInputChangeProp?.(event, value, reason);\n    },\n    [onInputChangeProp],\n  );\n\n  return (\n    <MuiAutocomplete\n      {...valueProps}\n      {...inputValueProp}\n      // conditionally provide the ListboxComponent if this needs to be virtualized\n      {...(isVirtualized.current && { ListboxComponent })}\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      clearText={t(\"clear.text\")}\n      closeText={t(\"close.text\")}\n      disableCloseOnSelect={hasMultipleChoices}\n      disabled={isDisabled}\n      freeSolo={isCustomValueAllowed}\n      filterSelectedOptions={true}\n      id={idOverride}\n      fullWidth={isFullWidth}\n      loading={isLoading}\n      multiple={hasMultipleChoices}\n      noOptionsText={noOptionsText}\n      onBlur={onBlur}\n      onChange={onChange}\n      onInputChange={onInputChange}\n      onFocus={onFocus}\n      openText={t(\"open.text\")}\n      options={options}\n      readOnly={isReadOnly}\n      renderInput={renderInput}\n      isOptionEqualToValue={getIsOptionEqualToValue}\n      translate={translate}\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":"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"}

package/dist/Badge.js

@@ -14,6 +14,7 @@ import { memo, useMemo } from "react";
 import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
 import { Box } from "./Box.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+export const badgeContentMaxValues = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
 export const badgeTypeValues = ["default", "attention", "danger"];
 const badgeTypeColors = odysseyTokens => ({
   default: {

package/dist/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","names":["memo","useMemo","useOdysseyDesignTokens","Box","jsx","_jsx","badgeTypeValues","badgeTypeColors","odysseyTokens","default","background","HueNeutral200","font","TypographyColorBody","attention","PalettePrimaryMain","TypographyColorInverse","danger","PaletteDangerMain","Badge","badgeContent","badgeContentMax","testId","translate","type","odysseyDesignTokens","renderBadge","greaterThanZeroContentMax","threeDigitLimitedMax","isOverContentMax","overContentMaxMessage","formattedContent","toString","badgeStyles","display","alignItems","justifyContent","minWidth","Spacing4","Spacing1","height","minHeight","padding","backgroundColor","color","borderRadius","length","BorderRadiusOuter","fontSize","TypographyScale0","fontFamily","TypographyFamilyMono","fontWeight","TypographyWeightBodyBold","lineHeight","transitionDuration","TransitionDurationMain","transitionProperty","hasNotificationCount","sx","children","MemoizedBadge","displayName"],"sources":["../src/Badge.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 { CSSProperties, memo, useMemo } from \"react\";\n\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"./OdysseyDesignTokensContext\";\nimport { Box } from \"./Box\";\nimport type { HtmlProps } from \"./HtmlProps\";\n\nexport type BadgeContentMax = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100;\n\nexport const badgeTypeValues = [\"default\", \"attention\", \"danger\"] as const;\n\nexport type BadgeProps = {\n  badgeContent: number;\n  badgeContentMax?: BadgeContentMax;\n  type?: (typeof badgeTypeValues)[number];\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst badgeTypeColors = (odysseyTokens: DesignTokens) => ({\n  default: {\n    background: odysseyTokens.HueNeutral200,\n    font: odysseyTokens.TypographyColorBody,\n  },\n  attention: {\n    background: odysseyTokens.PalettePrimaryMain,\n    font: odysseyTokens.TypographyColorInverse,\n  },\n  danger: {\n    background: odysseyTokens.PaletteDangerMain,\n    font: odysseyTokens.TypographyColorInverse,\n  },\n});\n\nconst Badge = ({\n  badgeContent,\n  badgeContentMax = 100,\n  testId,\n  translate,\n  type = \"default\",\n}: BadgeProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const renderBadge = useMemo(() => {\n    const greaterThanZeroContentMax = badgeContentMax > 0 ? badgeContentMax : 1;\n    const threeDigitLimitedMax =\n      greaterThanZeroContentMax > 999 ? 999 : greaterThanZeroContentMax;\n    const isOverContentMax = badgeContent > threeDigitLimitedMax;\n    const overContentMaxMessage = `${greaterThanZeroContentMax}+`;\n    const formattedContent = isOverContentMax\n      ? overContentMaxMessage\n      : badgeContent.toString();\n\n    const badgeStyles: CSSProperties = {\n      display: \"inline-flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      minWidth: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,\n      height: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,\n      minHeight: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,\n      // 6px horizontal padding per design requirements\n      padding: \"0 6px\",\n      backgroundColor: badgeTypeColors(odysseyDesignTokens)[type].background,\n      color: badgeTypeColors(odysseyDesignTokens)[type].font,\n      borderRadius:\n        formattedContent.length > 1\n          ? `${odysseyDesignTokens.BorderRadiusOuter}`\n          : \"50%\",\n      fontSize: `${odysseyDesignTokens.TypographyScale0}`,\n      fontFamily: `${odysseyDesignTokens.TypographyFamilyMono}`,\n      fontWeight: `${odysseyDesignTokens.TypographyWeightBodyBold}`,\n      lineHeight: 1,\n      transitionDuration: `${odysseyDesignTokens.TransitionDurationMain}`,\n      transitionProperty: `background-color, color`,\n    };\n\n    const hasNotificationCount = badgeContent && badgeContent > 0;\n\n    return hasNotificationCount ? (\n      <Box sx={badgeStyles} testId={testId} translate={translate}>\n        {formattedContent}\n      </Box>\n    ) : null;\n  }, [\n    badgeContent,\n    badgeContentMax,\n    odysseyDesignTokens,\n    testId,\n    translate,\n    type,\n  ]);\n\n  return renderBadge;\n};\n\nconst MemoizedBadge = memo(Badge);\nMemoizedBadge.displayName = \"Badge\";\n\nexport { MemoizedBadge as Badge };\n"],"mappings":"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"}
+{"version":3,"file":"Badge.js","names":["memo","useMemo","useOdysseyDesignTokens","Box","jsx","_jsx","badgeContentMaxValues","badgeTypeValues","badgeTypeColors","odysseyTokens","default","background","HueNeutral200","font","TypographyColorBody","attention","PalettePrimaryMain","TypographyColorInverse","danger","PaletteDangerMain","Badge","badgeContent","badgeContentMax","testId","translate","type","odysseyDesignTokens","renderBadge","greaterThanZeroContentMax","threeDigitLimitedMax","isOverContentMax","overContentMaxMessage","formattedContent","toString","badgeStyles","display","alignItems","justifyContent","minWidth","Spacing4","Spacing1","height","minHeight","padding","backgroundColor","color","borderRadius","length","BorderRadiusOuter","fontSize","TypographyScale0","fontFamily","TypographyFamilyMono","fontWeight","TypographyWeightBodyBold","lineHeight","transitionDuration","TransitionDurationMain","transitionProperty","hasNotificationCount","sx","children","MemoizedBadge","displayName"],"sources":["../src/Badge.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 { CSSProperties, memo, useMemo } from \"react\";\n\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"./OdysseyDesignTokensContext\";\nimport { Box } from \"./Box\";\nimport type { HtmlProps } from \"./HtmlProps\";\n\nexport const badgeContentMaxValues = [\n  10, 20, 30, 40, 50, 60, 70, 80, 90, 100,\n] as const;\nexport const badgeTypeValues = [\"default\", \"attention\", \"danger\"] as const;\n\nexport type BadgeProps = {\n  badgeContent: number;\n  badgeContentMax?: (typeof badgeContentMaxValues)[number];\n  type?: (typeof badgeTypeValues)[number];\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst badgeTypeColors = (odysseyTokens: DesignTokens) => ({\n  default: {\n    background: odysseyTokens.HueNeutral200,\n    font: odysseyTokens.TypographyColorBody,\n  },\n  attention: {\n    background: odysseyTokens.PalettePrimaryMain,\n    font: odysseyTokens.TypographyColorInverse,\n  },\n  danger: {\n    background: odysseyTokens.PaletteDangerMain,\n    font: odysseyTokens.TypographyColorInverse,\n  },\n});\n\nconst Badge = ({\n  badgeContent,\n  badgeContentMax = 100,\n  testId,\n  translate,\n  type = \"default\",\n}: BadgeProps) => {\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  const renderBadge = useMemo(() => {\n    const greaterThanZeroContentMax = badgeContentMax > 0 ? badgeContentMax : 1;\n    const threeDigitLimitedMax =\n      greaterThanZeroContentMax > 999 ? 999 : greaterThanZeroContentMax;\n    const isOverContentMax = badgeContent > threeDigitLimitedMax;\n    const overContentMaxMessage = `${greaterThanZeroContentMax}+`;\n    const formattedContent = isOverContentMax\n      ? overContentMaxMessage\n      : badgeContent.toString();\n\n    const badgeStyles: CSSProperties = {\n      display: \"inline-flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      minWidth: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,\n      height: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,\n      minHeight: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,\n      // 6px horizontal padding per design requirements\n      padding: \"0 6px\",\n      backgroundColor: badgeTypeColors(odysseyDesignTokens)[type].background,\n      color: badgeTypeColors(odysseyDesignTokens)[type].font,\n      borderRadius:\n        formattedContent.length > 1\n          ? `${odysseyDesignTokens.BorderRadiusOuter}`\n          : \"50%\",\n      fontSize: `${odysseyDesignTokens.TypographyScale0}`,\n      fontFamily: `${odysseyDesignTokens.TypographyFamilyMono}`,\n      fontWeight: `${odysseyDesignTokens.TypographyWeightBodyBold}`,\n      lineHeight: 1,\n      transitionDuration: `${odysseyDesignTokens.TransitionDurationMain}`,\n      transitionProperty: `background-color, color`,\n    };\n\n    const hasNotificationCount = badgeContent && badgeContent > 0;\n\n    return hasNotificationCount ? (\n      <Box sx={badgeStyles} testId={testId} translate={translate}>\n        {formattedContent}\n      </Box>\n    ) : null;\n  }, [\n    badgeContent,\n    badgeContentMax,\n    odysseyDesignTokens,\n    testId,\n    translate,\n    type,\n  ]);\n\n  return renderBadge;\n};\n\nconst MemoizedBadge = memo(Badge);\nMemoizedBadge.displayName = \"Badge\";\n\nexport { MemoizedBadge as Badge };\n"],"mappings":"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"}

package/dist/Banner.js

@@ -11,12 +11,13 @@ import _AlertTitle from "@mui/material/AlertTitle";
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-import { Link } from "./Link.js";
-import { ScreenReaderText } from "./ScreenReaderText.js";
+
 import { memo } from "react";
 import { useTranslation } from "react-i18next";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Link } from "./Link.js";
+import { ScreenReaderText } from "./ScreenReaderText.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export const bannerRoleValues = ["status", "alert"];
 export const bannerSeverityValues = ["success", "info", "warning", "error"];
 const Banner = ({
@@ -38,9 +39,9 @@ const Banner = ({
     role: role,
     severity: severity,
     variant: "banner",
-    children: [_jsxs(ScreenReaderText, {
+    children: [_jsx(ScreenReaderText, {
       translate: translate,
-      children: [t(`severity.${severity}`), ":"]
+      children: t(`severity.${severity}`)
     }), _jsx(_AlertTitle, {
       translate: translate,
       children: text

package/dist/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","names":["Link","ScreenReaderText","memo","useTranslation","jsxs","_jsxs","jsx","_jsx","bannerRoleValues","bannerSeverityValues","Banner","linkUrl","linkText","onClose","role","severity","text","testId","translate","t","_Alert","variant","children","_AlertTitle","href","MemoizedBanner","displayName"],"sources":["../src/Banner.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 { Alert, AlertColor, AlertTitle, AlertProps } from \"@mui/material\";\nimport { Link } from \"./Link\";\nimport { ScreenReaderText } from \"./ScreenReaderText\";\nimport { memo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport type { HtmlProps } from \"./HtmlProps\";\n\nexport const bannerRoleValues = [\"status\", \"alert\"] as const;\nexport const bannerSeverityValues: AlertColor[] = [\n  \"success\",\n  \"info\",\n  \"warning\",\n  \"error\",\n];\n\nexport type BannerProps = {\n  /**\n   * If linkUrl is not undefined, this is the text of the link.\n   * If left blank, it defaults to \"Learn more\".\n   * Note that linkText does nothing if linkUrl is not defined\n   */\n  linkText?: string;\n  /**\n   * If defined, the alert will include a link to the URL\n   */\n  linkUrl?: string;\n  /**\n   * The function that's fired when the user clicks the close button. If undefined,\n   * the close button will not be shown.\n   */\n  onClose?: AlertProps[\"onClose\"];\n  /**\n   * Sets the ARIA role of the alert\n   * (\"status\" for something that dynamically updates, \"alert\" for errors, null for something\n   * unchanging)\n   */\n  role?: (typeof bannerRoleValues)[number];\n  /**\n   * Determine the color and icon of the alert\n   */\n  severity: (typeof bannerSeverityValues)[number];\n  /**\n   * The text content of the alert\n   */\n  text: string;\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst Banner = ({\n  linkUrl,\n  linkText,\n  onClose,\n  role,\n  severity,\n  text,\n  testId,\n  translate,\n}: BannerProps) => {\n  const { t } = useTranslation();\n\n  return (\n    <Alert\n      data-se={testId}\n      onClose={onClose}\n      role={role}\n      severity={severity}\n      variant=\"banner\"\n    >\n      <ScreenReaderText translate={translate}>\n        {t(`severity.${severity}`)}:\n      </ScreenReaderText>\n      <AlertTitle translate={translate}>{text}</AlertTitle>\n      {linkUrl && (\n        <Link href={linkUrl} variant=\"monochrome\" translate={translate}>\n          {linkText}\n        </Link>\n      )}\n    </Alert>\n  );\n};\n\nconst MemoizedBanner = memo(Banner);\nMemoizedBanner.displayName = \"Banner\";\n\nexport { MemoizedBanner as Banner };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAaSA,IAAI;AAAA,SACJC,gBAAgB;AACzB,SAASC,IAAI,QAAQ,OAAO;AAC5B,SAASC,cAAc,QAAQ,eAAe;AAAC,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAI/C,OAAO,MAAMC,gBAAgB,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU;AAC5D,OAAO,MAAMC,oBAAkC,GAAG,CAChD,SAAS,EACT,MAAM,EACN,SAAS,EACT,OAAO,CACR;AAkCD,MAAMC,MAAM,GAAGA,CAAC;EACdC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC;AACW,CAAC,KAAK;EACjB,MAAM;IAAEC;EAAE,CAAC,GAAGhB,cAAc,CAAC,CAAC;EAE9B,OACEE,KAAA,CAAAe,MAAA;IACE,WAASH,MAAO;IAChBJ,OAAO,EAAEA,OAAQ;IACjBC,IAAI,EAAEA,IAAK;IACXC,QAAQ,EAAEA,QAAS;IACnBM,OAAO,EAAC,QAAQ;IAAAC,QAAA,GAEhBjB,KAAA,CAACJ,gBAAgB;MAACiB,SAAS,EAAEA,SAAU;MAAAI,QAAA,GACpCH,CAAC,CAAE,YAAWJ,QAAS,EAAC,CAAC,EAAC,GAC7B;IAAA,CAAkB,CAAC,EACnBR,IAAA,CAAAgB,WAAA;MAAYL,SAAS,EAAEA,SAAU;MAAAI,QAAA,EAAEN;IAAI,CAAa,CAAC,EACpDL,OAAO,IACNJ,IAAA,CAACP,IAAI;MAACwB,IAAI,EAAEb,OAAQ;MAACU,OAAO,EAAC,YAAY;MAACH,SAAS,EAAEA,SAAU;MAAAI,QAAA,EAC5DV;IAAQ,CACL,CACP;EAAA,CACI,CAAC;AAEZ,CAAC;AAED,MAAMa,cAAc,GAAGvB,IAAI,CAACQ,MAAM,CAAC;AACnCe,cAAc,CAACC,WAAW,GAAG,QAAQ;AAErC,SAASD,cAAc,IAAIf,MAAM"}
+{"version":3,"file":"Banner.js","names":["memo","useTranslation","Link","ScreenReaderText","jsx","_jsx","jsxs","_jsxs","bannerRoleValues","bannerSeverityValues","Banner","linkUrl","linkText","onClose","role","severity","text","testId","translate","t","_Alert","variant","children","_AlertTitle","href","MemoizedBanner","displayName"],"sources":["../src/Banner.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 } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Alert, AlertColor, AlertTitle, AlertProps } from \"@mui/material\";\n\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { Link } from \"./Link\";\nimport { ScreenReaderText } from \"./ScreenReaderText\";\n\nexport const bannerRoleValues = [\"status\", \"alert\"] as const;\nexport const bannerSeverityValues: AlertColor[] = [\n  \"success\",\n  \"info\",\n  \"warning\",\n  \"error\",\n];\n\nexport type BannerProps = {\n  /**\n   * If linkUrl is not undefined, this is the text of the link.\n   * If left blank, it defaults to \"Learn more\".\n   * Note that linkText does nothing if linkUrl is not defined\n   */\n  linkText?: string;\n  /**\n   * If defined, the alert will include a link to the URL\n   */\n  linkUrl?: string;\n  /**\n   * The function that's fired when the user clicks the close button. If undefined,\n   * the close button will not be shown.\n   */\n  onClose?: AlertProps[\"onClose\"];\n  /**\n   * Sets the ARIA role of the alert\n   * (\"status\" for something that dynamically updates, \"alert\" for errors, null for something\n   * unchanging)\n   */\n  role?: (typeof bannerRoleValues)[number];\n  /**\n   * Determine the color and icon of the alert\n   */\n  severity: (typeof bannerSeverityValues)[number];\n  /**\n   * The text content of the alert\n   */\n  text: string;\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst Banner = ({\n  linkUrl,\n  linkText,\n  onClose,\n  role,\n  severity,\n  text,\n  testId,\n  translate,\n}: BannerProps) => {\n  const { t } = useTranslation();\n\n  return (\n    <Alert\n      data-se={testId}\n      onClose={onClose}\n      role={role}\n      severity={severity}\n      variant=\"banner\"\n    >\n      <ScreenReaderText translate={translate}>\n        {t(`severity.${severity}`)}\n      </ScreenReaderText>\n      <AlertTitle translate={translate}>{text}</AlertTitle>\n      {linkUrl && (\n        <Link href={linkUrl} variant=\"monochrome\" translate={translate}>\n          {linkText}\n        </Link>\n      )}\n    </Alert>\n  );\n};\n\nconst MemoizedBanner = memo(Banner);\nMemoizedBanner.displayName = \"Banner\";\n\nexport { MemoizedBanner as Banner };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAC5B,SAASC,cAAc,QAAQ,eAAe;AAAC,SAItCC,IAAI;AAAA,SACJC,gBAAgB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEzB,OAAO,MAAMC,gBAAgB,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU;AAC5D,OAAO,MAAMC,oBAAkC,GAAG,CAChD,SAAS,EACT,MAAM,EACN,SAAS,EACT,OAAO,CACR;AAkCD,MAAMC,MAAM,GAAGA,CAAC;EACdC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC;AACW,CAAC,KAAK;EACjB,MAAM;IAAEC;EAAE,CAAC,GAAGlB,cAAc,CAAC,CAAC;EAE9B,OACEM,KAAA,CAAAa,MAAA;IACE,WAASH,MAAO;IAChBJ,OAAO,EAAEA,OAAQ;IACjBC,IAAI,EAAEA,IAAK;IACXC,QAAQ,EAAEA,QAAS;IACnBM,OAAO,EAAC,QAAQ;IAAAC,QAAA,GAEhBjB,IAAA,CAACF,gBAAgB;MAACe,SAAS,EAAEA,SAAU;MAAAI,QAAA,EACpCH,CAAC,CAAE,YAAWJ,QAAS,EAAC;IAAC,CACV,CAAC,EACnBV,IAAA,CAAAkB,WAAA;MAAYL,SAAS,EAAEA,SAAU;MAAAI,QAAA,EAAEN;IAAI,CAAa,CAAC,EACpDL,OAAO,IACNN,IAAA,CAACH,IAAI;MAACsB,IAAI,EAAEb,OAAQ;MAACU,OAAO,EAAC,YAAY;MAACH,SAAS,EAAEA,SAAU;MAAAI,QAAA,EAC5DV;IAAQ,CACL,CACP;EAAA,CACI,CAAC;AAEZ,CAAC;AAED,MAAMa,cAAc,GAAGzB,IAAI,CAACU,MAAM,CAAC;AACnCe,cAAc,CAACC,WAAW,GAAG,QAAQ;AAErC,SAASD,cAAc,IAAIf,MAAM"}

package/dist/Button.js

@@ -17,7 +17,7 @@ import { Tooltip } from "./Tooltip.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const buttonSizeValues = ["small", "medium", "large"];
 export const buttonTypeValues = ["button", "submit", "reset"];
-export const buttonVariantValues = ["primary", "secondary", "danger", "floating"];
+export const buttonVariantValues = ["primary", "secondary", "danger", "dangerSecondary", "floating", "floatingAction"];
 const Button = ({
   ariaControls,
   ariaDescribedBy,
@@ -27,6 +27,7 @@ const Button = ({
   ariaLabelledBy,
   buttonRef,
   endIcon,
+  href,
   id,
   isDisabled,
   isFullWidth: isFullWidthProp,
@@ -46,15 +47,12 @@ const Button = ({
   const localButtonRef = useRef(null);
   const buttonContext = useButton();
   const isFullWidth = useMemo(() => buttonContext.isFullWidth ? buttonContext.isFullWidth : isFullWidthProp, [buttonContext, isFullWidthProp]);
-  useImperativeHandle(buttonRef, () => {
-    return {
-      focus: () => {
-        localButtonRef.current?.focus();
-      }
-    };
-  }, []);
+  useImperativeHandle(buttonRef, () => ({
+    focus: () => {
+      localButtonRef.current?.focus();
+    }
+  }), []);
   const renderButton = useCallback(muiProps => {
-    muiProps?.ref?.(localButtonRef.current);
     return _jsx(_Button, {
       ...muiProps,
       "aria-controls": ariaControls,
@@ -67,9 +65,15 @@ const Button = ({
       disabled: isDisabled,
       endIcon: endIcon,
       fullWidth: isFullWidth,
+      href: href,
       id: id,
       onClick: onClick,
-      ref: localButtonRef,
+      ref: element => {
+        if (element) {
+          localButtonRef.current = element;
+          muiProps?.ref?.(element);
+        }
+      },
       size: size,
       startIcon: startIcon,
       tabIndex: tabIndex,
@@ -78,7 +82,7 @@ const Button = ({
       variant: variant,
       children: label
     });
-  }, [ariaControls, ariaDescribedBy, ariaExpanded, ariaHasPopup, ariaLabel, ariaLabelledBy, endIcon, id, isDisabled, isFullWidth, label, onClick, size, startIcon, tabIndex, testId, translate, type, variant]);
+  }, [ariaControls, ariaDescribedBy, ariaExpanded, ariaHasPopup, ariaLabel, ariaLabelledBy, endIcon, href, id, isDisabled, isFullWidth, label, onClick, size, startIcon, tabIndex, testId, translate, type, variant]);
   if (tooltipText) {
     return _jsx(Tooltip, {
       ariaType: "description",

package/dist/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["memo","useCallback","useImperativeHandle","useMemo","useRef","useButton","MuiPropsContext","useMuiProps","Tooltip","jsx","_jsx","buttonSizeValues","buttonTypeValues","buttonVariantValues","Button","ariaControls","ariaDescribedBy","ariaExpanded","ariaHasPopup","ariaLabel","ariaLabelledBy","buttonRef","endIcon","id","isDisabled","isFullWidth","isFullWidthProp","label","onClick","size","startIcon","tabIndex","testId","tooltipText","translate","type","variant","variantProp","muiProps","localButtonRef","buttonContext","focus","current","renderButton","ref","_Button","disabled","fullWidth","children","ariaType","placement","text","Consumer","MemoizedButton","displayName"],"sources":["../src/Button.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 { Button as MuiButton } from \"@mui/material\";\nimport type { ButtonProps as MuiButtonProps } from \"@mui/material\";\nimport {\n  HTMLAttributes,\n  memo,\n  ReactElement,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from \"react\";\n\nimport { useButton } from \"./ButtonContext\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { FocusHandle } from \"./inputUtils\";\nimport {\n  MuiPropsContext,\n  MuiPropsContextType,\n  useMuiProps,\n} from \"./MuiPropsContext\";\nimport { Tooltip } from \"./Tooltip\";\n\nexport const buttonSizeValues = [\"small\", \"medium\", \"large\"] as const;\nexport const buttonTypeValues = [\"button\", \"submit\", \"reset\"] as const;\nexport const buttonVariantValues = [\n  \"primary\",\n  \"secondary\",\n  \"danger\",\n  \"floating\",\n] as const;\n\nexport type ButtonProps = {\n  /**\n   * The ref forwarded to the Button\n   */\n  buttonRef?: React.RefObject<FocusHandle>;\n  /**\n   * The ID of the Button\n   */\n  id?: string;\n  /**\n   * Determines whether the Button is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * Determines whether the Button should take up the full available width\n   */\n  isFullWidth?: boolean;\n  /**\n   * The click event handler for the Button\n   */\n  onClick?: MuiButtonProps[\"onClick\"];\n  /**\n   * The size of the button\n   */\n  size?: (typeof buttonSizeValues)[number];\n  tabIndex?: HTMLAttributes<HTMLElement>[\"tabIndex\"];\n  /**\n   * The tooltip text for the Button if it's icon-only\n   */\n  tooltipText?: string;\n  /**\n   * The type of the HTML button element\n   */\n  type?: (typeof buttonTypeValues)[number];\n  /**\n   * The variant of the Button\n   */\n  variant: (typeof buttonVariantValues)[number] | \"tertiary\";\n} & (\n  | {\n      /**\n       * The icon element to display at the end of the Button\n       */\n      endIcon?: ReactElement;\n      /**\n       * The text content of the Button\n       */\n      label: string;\n      /**\n       * The icon element to display at the start of the Button\n       */\n      startIcon?: ReactElement;\n    }\n  | {\n      /**\n       * The icon element to display at the end of the Button\n       */\n      endIcon?: ReactElement;\n      /**\n       * The text content of the Button\n       */\n      label?: string | \"\" | undefined;\n      /**\n       * The icon element to display at the start of the Button\n       */\n      startIcon: ReactElement;\n    }\n  | {\n      /**\n       * The icon element to display at the end of the Button\n       */\n      endIcon: ReactElement;\n      /**\n       * The text content of the Button\n       */\n      label?: never;\n      /**\n       * The icon element to display at the start of the Button\n       */\n      startIcon?: ReactElement;\n    }\n) &\n  Pick<\n    HtmlProps,\n    | \"ariaControls\"\n    | \"ariaDescribedBy\"\n    | \"ariaExpanded\"\n    | \"ariaHasPopup\"\n    | \"ariaLabel\"\n    | \"ariaLabelledBy\"\n    | \"tabIndex\"\n    | \"testId\"\n    | \"translate\"\n  >;\n\nconst Button = ({\n  ariaControls,\n  ariaDescribedBy,\n  ariaExpanded,\n  ariaHasPopup,\n  ariaLabel,\n  ariaLabelledBy,\n  buttonRef,\n  endIcon,\n  id,\n  isDisabled,\n  isFullWidth: isFullWidthProp,\n  label = \"\",\n  onClick,\n  size = \"medium\",\n  startIcon,\n  tabIndex,\n  testId,\n  tooltipText,\n  translate,\n  type = \"button\",\n  variant: variantProp,\n}: ButtonProps) => {\n  const muiProps = useMuiProps();\n\n  // We're deprecating the \"tertiary\" variant, so map it to\n  // \"secondary\" in lieu of making a breaking change\n  const variant = variantProp === \"tertiary\" ? \"secondary\" : variantProp;\n  const localButtonRef = useRef<HTMLButtonElement>(null);\n  const buttonContext = useButton();\n  const isFullWidth = useMemo(\n    () =>\n      buttonContext.isFullWidth ? buttonContext.isFullWidth : isFullWidthProp,\n    [buttonContext, isFullWidthProp],\n  );\n\n  useImperativeHandle(\n    buttonRef,\n    () => {\n      return {\n        focus: () => {\n          localButtonRef.current?.focus();\n        },\n      };\n    },\n    [],\n  );\n\n  const renderButton = useCallback(\n    (muiProps: MuiPropsContextType) => {\n      //@ts-expect-error ref is not an optional prop on the props context type\n      muiProps?.ref?.(localButtonRef.current);\n\n      return (\n        <MuiButton\n          {...muiProps}\n          aria-controls={ariaControls}\n          aria-describedby={ariaDescribedBy}\n          aria-expanded={ariaExpanded}\n          aria-haspopup={ariaHasPopup}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          data-se={testId}\n          disabled={isDisabled}\n          endIcon={endIcon}\n          fullWidth={isFullWidth}\n          id={id}\n          onClick={onClick}\n          ref={localButtonRef}\n          size={size}\n          startIcon={startIcon}\n          tabIndex={tabIndex}\n          translate={translate}\n          type={type}\n          variant={variant}\n        >\n          {label}\n        </MuiButton>\n      );\n    },\n    [\n      ariaControls,\n      ariaDescribedBy,\n      ariaExpanded,\n      ariaHasPopup,\n      ariaLabel,\n      ariaLabelledBy,\n      endIcon,\n      id,\n      isDisabled,\n      isFullWidth,\n      label,\n      onClick,\n      size,\n      startIcon,\n      tabIndex,\n      testId,\n      translate,\n      type,\n      variant,\n    ],\n  );\n\n  if (tooltipText) {\n    return (\n      <Tooltip ariaType=\"description\" placement=\"top\" text={tooltipText}>\n        <MuiPropsContext.Consumer>{renderButton}</MuiPropsContext.Consumer>\n      </Tooltip>\n    );\n  }\n\n  return renderButton(muiProps);\n};\n\nconst MemoizedButton = memo(Button);\nMemoizedButton.displayName = \"Button\";\n\nexport { MemoizedButton as Button };\n"],"mappings":"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"}
+{"version":3,"file":"Button.js","names":["memo","useCallback","useImperativeHandle","useMemo","useRef","useButton","MuiPropsContext","useMuiProps","Tooltip","jsx","_jsx","buttonSizeValues","buttonTypeValues","buttonVariantValues","Button","ariaControls","ariaDescribedBy","ariaExpanded","ariaHasPopup","ariaLabel","ariaLabelledBy","buttonRef","endIcon","href","id","isDisabled","isFullWidth","isFullWidthProp","label","onClick","size","startIcon","tabIndex","testId","tooltipText","translate","type","variant","variantProp","muiProps","localButtonRef","buttonContext","focus","current","renderButton","_Button","disabled","fullWidth","ref","element","children","ariaType","placement","text","Consumer","MemoizedButton","displayName"],"sources":["../src/Button.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 { Button as MuiButton } from \"@mui/material\";\nimport type { ButtonProps as MuiButtonProps } from \"@mui/material\";\nimport {\n  HTMLAttributes,\n  memo,\n  ReactElement,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from \"react\";\n\nimport { useButton } from \"./ButtonContext\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { FocusHandle } from \"./inputUtils\";\nimport {\n  MuiPropsContext,\n  MuiPropsContextType,\n  useMuiProps,\n} from \"./MuiPropsContext\";\nimport { Tooltip } from \"./Tooltip\";\n\nexport const buttonSizeValues = [\"small\", \"medium\", \"large\"] as const;\nexport const buttonTypeValues = [\"button\", \"submit\", \"reset\"] as const;\nexport const buttonVariantValues = [\n  \"primary\",\n  \"secondary\",\n  \"danger\",\n  \"dangerSecondary\",\n  \"floating\",\n  \"floatingAction\",\n] as const;\n\nexport type ButtonProps = {\n  /**\n   * The ref forwarded to the Button\n   */\n  buttonRef?: React.RefObject<FocusHandle>;\n  /**\n   * Optional href to render the button as a link\n   */\n  href?: string;\n  /**\n   * The ID of the Button\n   */\n  id?: string;\n  /**\n   * Determines whether the Button is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * Determines whether the Button should take up the full available width\n   */\n  isFullWidth?: boolean;\n  /**\n   * The size of the button\n   */\n  size?: (typeof buttonSizeValues)[number];\n  tabIndex?: HTMLAttributes<HTMLElement>[\"tabIndex\"];\n  /**\n   * The tooltip text for the Button if it's icon-only\n   */\n  tooltipText?: string;\n  /**\n   * The type of the HTML button element\n   */\n  type?: (typeof buttonTypeValues)[number];\n  /**\n   * The variant of the Button\n   */\n  variant: (typeof buttonVariantValues)[number] | \"tertiary\";\n  /**\n   * The click event handler for the Button\n   */\n  onClick?: MuiButtonProps[\"onClick\"];\n} & (\n  | {\n      /**\n       * The icon element to display at the end of the Button\n       */\n      endIcon?: ReactElement;\n      /**\n       * The text content of the Button\n       */\n      label: string;\n      /**\n       * The icon element to display at the start of the Button\n       */\n      startIcon?: ReactElement;\n    }\n  | {\n      /**\n       * The icon element to display at the end of the Button\n       */\n      endIcon?: ReactElement;\n      /**\n       * The text content of the Button\n       */\n      label?: string | \"\" | undefined;\n      /**\n       * The icon element to display at the start of the Button\n       */\n      startIcon: ReactElement;\n    }\n  | {\n      /**\n       * The icon element to display at the end of the Button\n       */\n      endIcon: ReactElement;\n      /**\n       * The text content of the Button\n       */\n      label?: never;\n      /**\n       * The icon element to display at the start of the Button\n       */\n      startIcon?: ReactElement;\n    }\n) &\n  Pick<\n    HtmlProps,\n    | \"ariaControls\"\n    | \"ariaDescribedBy\"\n    | \"ariaExpanded\"\n    | \"ariaHasPopup\"\n    | \"ariaLabel\"\n    | \"ariaLabelledBy\"\n    | \"tabIndex\"\n    | \"testId\"\n    | \"translate\"\n  >;\n\nconst Button = ({\n  ariaControls,\n  ariaDescribedBy,\n  ariaExpanded,\n  ariaHasPopup,\n  ariaLabel,\n  ariaLabelledBy,\n  buttonRef,\n  endIcon,\n  href,\n  id,\n  isDisabled,\n  isFullWidth: isFullWidthProp,\n  label = \"\",\n  onClick,\n  size = \"medium\",\n  startIcon,\n  tabIndex,\n  testId,\n  tooltipText,\n  translate,\n  type = \"button\",\n  variant: variantProp,\n}: ButtonProps) => {\n  const muiProps = useMuiProps();\n\n  // We're deprecating the \"tertiary\" variant, so map it to\n  // \"secondary\" in lieu of making a breaking change\n  const variant = variantProp === \"tertiary\" ? \"secondary\" : variantProp;\n  const localButtonRef = useRef<HTMLButtonElement | HTMLAnchorElement>(null);\n  const buttonContext = useButton();\n  const isFullWidth = useMemo(\n    () =>\n      buttonContext.isFullWidth ? buttonContext.isFullWidth : isFullWidthProp,\n    [buttonContext, isFullWidthProp],\n  );\n\n  useImperativeHandle(\n    buttonRef,\n    () => ({\n      focus: () => {\n        localButtonRef.current?.focus();\n      },\n    }),\n    [],\n  );\n\n  const renderButton = useCallback(\n    (muiProps: MuiPropsContextType) => {\n      return (\n        <MuiButton\n          {...muiProps}\n          aria-controls={ariaControls}\n          aria-describedby={ariaDescribedBy}\n          aria-expanded={ariaExpanded}\n          aria-haspopup={ariaHasPopup}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          data-se={testId}\n          disabled={isDisabled}\n          endIcon={endIcon}\n          fullWidth={isFullWidth}\n          href={href}\n          id={id}\n          onClick={onClick}\n          ref={(element) => {\n            if (element) {\n              (\n                localButtonRef as React.MutableRefObject<\n                  HTMLButtonElement | HTMLAnchorElement\n                >\n              ).current = element;\n              //@ts-expect-error ref is not an optional prop on the props context type\n              muiProps?.ref?.(element);\n            }\n          }}\n          size={size}\n          startIcon={startIcon}\n          tabIndex={tabIndex}\n          translate={translate}\n          type={type}\n          variant={variant}\n        >\n          {label}\n        </MuiButton>\n      );\n    },\n    [\n      ariaControls,\n      ariaDescribedBy,\n      ariaExpanded,\n      ariaHasPopup,\n      ariaLabel,\n      ariaLabelledBy,\n      endIcon,\n      href,\n      id,\n      isDisabled,\n      isFullWidth,\n      label,\n      onClick,\n      size,\n      startIcon,\n      tabIndex,\n      testId,\n      translate,\n      type,\n      variant,\n    ],\n  );\n\n  if (tooltipText) {\n    return (\n      <Tooltip ariaType=\"description\" placement=\"top\" text={tooltipText}>\n        <MuiPropsContext.Consumer>{renderButton}</MuiPropsContext.Consumer>\n      </Tooltip>\n    );\n  }\n\n  return renderButton(muiProps);\n};\n\nconst MemoizedButton = memo(Button);\nMemoizedButton.displayName = \"Button\";\n\nexport { MemoizedButton as Button };\n"],"mappings":"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"}

package/dist/Callout.js

@@ -14,14 +14,50 @@ import _AlertTitle from "@mui/material/AlertTitle";
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+import styled from "@emotion/styled";
 import { memo } from "react";
-import { ScreenReaderText } from "./ScreenReaderText.js";
 import { useTranslation } from "react-i18next";
-import { Paragraph } from "./Typography.js";
 import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
-import styled from "@emotion/styled";
+import { Paragraph } from "./Typography.js";
+import { useUniqueId } from "./useUniqueId.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export const CalloutTestSelectors = {
+  feature: {
+    link: {
+      selector: {
+        method: "ByRole",
+        options: {
+          name: "${linkText}"
+        },
+        role: "link",
+        templateVariableNames: ["linkText"]
+      }
+    },
+    text: {
+      selector: {
+        method: "ByText",
+        templateVariableNames: ["text"],
+        text: "${text}"
+      }
+    },
+    title: {
+      selector: {
+        method: "ByText",
+        templateVariableNames: ["title"],
+        text: "${title}"
+      }
+    }
+  },
+  selector: {
+    method: "ByRole",
+    options: {
+      name: "${title}"
+    },
+    role: "${role}",
+    templateVariableNames: ["role", "title"]
+  }
+};
 export const calloutRoleValues = ["status", "alert"];
 export const calloutSeverityValues = ["success", "info", "warning", "error"];
 const ContentContainer = styled("div", {
@@ -48,15 +84,17 @@ const Callout = ({
     t
   } = useTranslation();
   const odysseyDesignTokens = useOdysseyDesignTokens();
+  const titleId = useUniqueId();
   return _jsxs(_Alert, {
+    "aria-label": t(`severity.${severity}`),
+    "aria-labelledby": titleId,
     "data-se": testId,
     role: role,
     severity: severity,
     variant: "callout",
-    children: [_jsx(ScreenReaderText, {
-      translate: translate,
-      children: t(`severity.${severity}`)
-    }), title && _jsx(_AlertTitle, {
+    children: [title && _jsx(_AlertTitle, {
+      "aria-hidden": true,
+      id: titleId,
       translate: translate,
       children: title
     }), _jsxs(ContentContainer, {