npm - @okta/odyssey-react-mui - Versions diffs - 1.43.0 → 1.44.0 - Mend

@okta/odyssey-react-mui 1.43.0 → 1.44.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1311) hide show

package/dist/esm/ui-shell/SideNav/SideNavFooterContent.js CHANGED Viewed

@@ -10,12 +10,12 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
-import { memo, useMemo } from "react";
 import styled from "@emotion/styled";
-import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { memo, useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import { Box } from "../../Box.js";
 import { Link } from "../../Link.js";
-import { useTranslation } from "react-i18next";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
 import { useUiShellContext } from "../../ui-shell/UiShellProvider.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledFooterNav = styled("nav")({
@@ -56,8 +56,8 @@ const SideNavFooterContent = ({
     }, item.id));
   }, [footerItems, odysseyDesignTokens, shellColors]);
   return _jsx(StyledFooterNav, {
-    role: "menubar",
     "aria-label": t("navigation.footer"),
+    role: "menubar",
     children: memoizedFooterContent
   });
 };

package/dist/esm/ui-shell/SideNav/SideNavFooterContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SideNavFooterContent.js","names":["~~memo~~","~~useMemo~~","~~styled~~","~~useOdysseyDesignTokens~~","Box","Link","~~useTranslation~~","useUiShellContext","jsx","_jsx","StyledFooterNav","display","StyledFooterItemContainer","shouldForwardProp","prop","borderColor","odysseyDesignTokens","marginInlineStart","Spacing4","paddingInlineStart","borderInlineStart","HueNeutral300","SideNavFooterContent","footerItems","t","shellColors","memoizedFooterContent","map","item","sideNavContrastColors","fontColor","role","children","href","label","component","id","MemoizedSideNavFooterContent","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavFooterContent.tsx"],"sourcesContent":["/!\n Copyright (c) 2024-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, useMemo } from \"react\";\nimport ~~styled~~ ~~from~~ ~~\"@emotion/styled\";\n\nimport {\n useOdysseyDesignTokens,\n DesignTokens,\n~~} from \"~~../../OdysseyDesignTokensContext.js~~\";\nimport type { SideNavFooterItem } from \"./types.js\";\nimport { Box } from \"../../Box.js\";\nimport { ~~Link~~ } from \"../../~~Link~~.js\";\nimport { ~~useTranslation~~ } from \"~~react-i18next~~\";\nimport { ~~useUiShellContext~~ } from \"../../~~ui-shell/UiShellProvider~~.js\";\nimport { ~~ContrastColors~~ } from \"../../~~createContrastColors~~.js\";\n\nconst StyledFooterNav = styled(\"nav\")({\n display: \"flex\",\n});\n\nconst StyledFooterItemContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" && prop !== \"borderColor\",\n})(\n ({\n borderColor,\n odysseyDesignTokens,\n }: {\n borderColor: ContrastColors[\"fontColor\"];\n odysseyDesignTokens: DesignTokens;\n }) => ({\n \"& + &\": {\n marginInlineStart: odysseyDesignTokens.Spacing4,\n paddingInlineStart: odysseyDesignTokens.Spacing4,\n borderInlineStart: `1px solid ${borderColor \|\| odysseyDesignTokens.HueNeutral300}`,\n },\n }),\n);\n\nconst SideNavFooterContent = ({\n footerItems,\n}: {\n footerItems: SideNavFooterItem[];\n}) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n const { t } = useTranslation();\n const shellColors = useUiShellContext();\n\n const memoizedFooterContent = useMemo(() => {\n return footerItems?.map((item) => (\n <StyledFooterItemContainer\n borderColor={shellColors?.sideNavContrastColors?.fontColor}\n key={item.id}\n odysseyDesignTokens={odysseyDesignTokens}\n role=\"menuitem\"\n >\n {item.href ? (\n <Link href={item.href}>{item.label}</Link>\n ) : (\n <Box component=\"span\">{item.label}</Box>\n )}\n </StyledFooterItemContainer>\n ));\n }, [footerItems, odysseyDesignTokens, shellColors]);\n\n return (\n <StyledFooterNav ~~role=\"menubar\"~~ aria-label={t(\"navigation.footer\")}>\n {memoizedFooterContent}\n </StyledFooterNav>\n );\n};\nconst MemoizedSideNavFooterContent = memo(SideNavFooterContent);\nMemoizedSideNavFooterContent.displayName = \"SideNavFooterContent\";\n\nexport { MemoizedSideNavFooterContent as SideNavFooterContent };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,~~SAASA~~,IAAI,EAAEC,OAAO,QAAQ,OAAO;AACrC,~~OAAOC~~,~~MAAM~~,~~MAAM~~,~~iBAAiB~~;~~AAEpC~~,~~SACEC,sBAAsB,QAEjB,qCAAqC;AAE5C,~~SAASC,GAAG,QAAQ,cAAc;~~AAClC~~,SAASC,IAAI,QAAQ,eAAe;AACpC,~~SAASC~~,~~cAAc~~,~~QAAQ~~,~~eAAe~~;~~AAC9C~~,SAASC,iBAAiB,QAAQ,mCAAmC;AAAC,SAAAC,GAAA,IAAAC,IAAA;~~AAGtE~~,MAAMC,eAAe,~~GAAGR~~,MAAM,CAAC,KAAK,CAAC,CAAC;~~EACpCS~~,OAAO,EAAE;AACX,CAAC,CAAC;AAEF,MAAMC,yBAAyB,~~GAAGV~~,MAAM,CAAC,KAAK,EAAE;~~EAC9CW~~,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,qBAAqB,IAAIA,IAAI,KAAK;AAC/C,CAAC,CAAC,CACA,CAAC;EACCC,WAAW;EACXC;AAIF,CAAC,MAAM;EACL,OAAO,EAAE;IACPC,iBAAiB,EAAED,mBAAmB,CAACE,QAAQ;IAC/CC,kBAAkB,EAAEH,mBAAmB,CAACE,QAAQ;IAChDE,iBAAiB,EAAE,aAAaL,WAAW,IAAIC,mBAAmB,CAACK,aAAa;EAClF;AACF,CAAC,CACH,CAAC;AAED,MAAMC,oBAAoB,GAAGA,CAAC;EAC5BC;AAGF,CAAC,KAAK;EACJ,MAAMP,mBAAmB,~~GAAGb~~,sBAAsB,CAAC,CAAC;EACpD,MAAM;~~IAAEqB~~;EAAE,CAAC,~~GAAGlB~~,cAAc,CAAC,CAAC;EAC9B,~~MAAMmB~~,WAAW,GAAGlB,iBAAiB,CAAC,CAAC;EAEvC,MAAMmB,qBAAqB,~~GAAGzB~~,OAAO,CAAC,MAAM;IAC1C,~~OAAOsB~~,WAAW,EAAEI,GAAG,CAAEC,IAAI,IAC3BnB,IAAA,CAACG,yBAAyB;MACxBG,WAAW,EAAEU,WAAW,EAAEI,qBAAqB,EAAEC,SAAU;MAE3Dd,mBAAmB,EAAEA,mBAAoB;MACzCe,IAAI,EAAC,UAAU;MAAAC,QAAA,EAEdJ,IAAI,CAACK,IAAI,GACRxB,IAAA,CAACJ,IAAI;QAAC4B,IAAI,EAAEL,IAAI,CAACK,IAAK;QAAAD,QAAA,EAAEJ,IAAI,CAACM;MAAK,CAAO,CAAC,GAE1CzB,IAAA,CAACL,GAAG;QAAC+B,SAAS,EAAC,MAAM;QAAAH,QAAA,EAAEJ,IAAI,CAACM;MAAK,CAAM;IACxC,GARIN,IAAI,CAACQ,EASe,CAC5B,CAAC;EACJ,CAAC,EAAE,CAACb,WAAW,EAAEP,mBAAmB,EAAES,WAAW,CAAC,CAAC;EAEnD,OACEhB,IAAA,CAACC,eAAe;~~IAACqB,IAAI,EAAC,SAAS;~~IAAC,~~cAAYP~~,CAAC,CAAC,mBAAmB,CAAE;~~IAAAQ~~,QAAA,EAChEN;EAAqB,CACP,CAAC;AAEtB,CAAC;AACD,MAAMW,4BAA4B,~~GAAGrC~~,IAAI,~~CAACsB~~,oBAAoB,CAAC;AAC/De,4BAA4B,CAACC,WAAW,GAAG,sBAAsB;AAEjE,SAASD,4BAA4B,IAAIf,oBAAoB","ignoreList":[]}
1	+ {"version":3,"file":"SideNavFooterContent.js","names":["styled","memo","useMemo","useTranslation","Box","Link","useOdysseyDesignTokens","useUiShellContext","jsx","_jsx","StyledFooterNav","display","StyledFooterItemContainer","shouldForwardProp","prop","borderColor","odysseyDesignTokens","marginInlineStart","Spacing4","paddingInlineStart","borderInlineStart","HueNeutral300","SideNavFooterContent","footerItems","t","shellColors","memoizedFooterContent","map","item","sideNavContrastColors","fontColor","role","children","href","label","component","id","MemoizedSideNavFooterContent","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavFooterContent.tsx"],"sourcesContent":["/!\n Copyright (c) 2024-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 styled from \"@emotion/styled\";\nimport { memo, useMemo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport type { SideNavFooterItem } from \"./types.js\";\n\nimport { Box } from \"../../Box.js\";\nimport { ContrastColors } from \"../../createContrastColors.js\";\nimport { Link } from \"../../Link.js\";\nimport {\n DesignTokens,\n useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { useUiShellContext } from \"../../ui-shell/UiShellProvider.js\";\n\nconst StyledFooterNav = styled(\"nav\")({\n display: \"flex\",\n});\n\nconst StyledFooterItemContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" && prop !== \"borderColor\",\n})(\n ({\n borderColor,\n odysseyDesignTokens,\n }: {\n borderColor: ContrastColors[\"fontColor\"];\n odysseyDesignTokens: DesignTokens;\n }) => ({\n \"& + &\": {\n marginInlineStart: odysseyDesignTokens.Spacing4,\n paddingInlineStart: odysseyDesignTokens.Spacing4,\n borderInlineStart: `1px solid ${borderColor \|\| odysseyDesignTokens.HueNeutral300}`,\n },\n }),\n);\n\nconst SideNavFooterContent = ({\n footerItems,\n}: {\n footerItems: SideNavFooterItem[];\n}) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n const { t } = useTranslation();\n const shellColors = useUiShellContext();\n\n const memoizedFooterContent = useMemo(() => {\n return footerItems?.map((item) => (\n <StyledFooterItemContainer\n borderColor={shellColors?.sideNavContrastColors?.fontColor}\n key={item.id}\n odysseyDesignTokens={odysseyDesignTokens}\n role=\"menuitem\"\n >\n {item.href ? (\n <Link href={item.href}>{item.label}</Link>\n ) : (\n <Box component=\"span\">{item.label}</Box>\n )}\n </StyledFooterItemContainer>\n ));\n }, [footerItems, odysseyDesignTokens, shellColors]);\n\n return (\n <StyledFooterNav aria-label={t(\"navigation.footer\")} role=\"menubar\">\n {memoizedFooterContent}\n </StyledFooterNav>\n );\n};\nconst MemoizedSideNavFooterContent = memo(SideNavFooterContent);\nMemoizedSideNavFooterContent.displayName = \"SideNavFooterContent\";\n\nexport { MemoizedSideNavFooterContent as SideNavFooterContent };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,IAAI,EAAEC,OAAO,QAAQ,OAAO;AACrC,SAASC,cAAc,QAAQ,eAAe;AAI9C,SAASC,GAAG,QAAQ,cAAc;AAElC,SAASC,IAAI,QAAQ,eAAe;AACpC,SAEEC,sBAAsB,QACjB,qCAAqC;AAC5C,SAASC,iBAAiB,QAAQ,mCAAmC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEtE,MAAMC,eAAe,GAAGV,MAAM,CAAC,KAAK,CAAC,CAAC;EACpCW,OAAO,EAAE;AACX,CAAC,CAAC;AAEF,MAAMC,yBAAyB,GAAGZ,MAAM,CAAC,KAAK,EAAE;EAC9Ca,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,qBAAqB,IAAIA,IAAI,KAAK;AAC/C,CAAC,CAAC,CACA,CAAC;EACCC,WAAW;EACXC;AAIF,CAAC,MAAM;EACL,OAAO,EAAE;IACPC,iBAAiB,EAAED,mBAAmB,CAACE,QAAQ;IAC/CC,kBAAkB,EAAEH,mBAAmB,CAACE,QAAQ;IAChDE,iBAAiB,EAAE,aAAaL,WAAW,IAAIC,mBAAmB,CAACK,aAAa;EAClF;AACF,CAAC,CACH,CAAC;AAED,MAAMC,oBAAoB,GAAGA,CAAC;EAC5BC;AAGF,CAAC,KAAK;EACJ,MAAMP,mBAAmB,GAAGV,sBAAsB,CAAC,CAAC;EACpD,MAAM;IAAEkB;EAAE,CAAC,GAAGrB,cAAc,CAAC,CAAC;EAC9B,MAAMsB,WAAW,GAAGlB,iBAAiB,CAAC,CAAC;EAEvC,MAAMmB,qBAAqB,GAAGxB,OAAO,CAAC,MAAM;IAC1C,OAAOqB,WAAW,EAAEI,GAAG,CAAEC,IAAI,IAC3BnB,IAAA,CAACG,yBAAyB;MACxBG,WAAW,EAAEU,WAAW,EAAEI,qBAAqB,EAAEC,SAAU;MAE3Dd,mBAAmB,EAAEA,mBAAoB;MACzCe,IAAI,EAAC,UAAU;MAAAC,QAAA,EAEdJ,IAAI,CAACK,IAAI,GACRxB,IAAA,CAACJ,IAAI;QAAC4B,IAAI,EAAEL,IAAI,CAACK,IAAK;QAAAD,QAAA,EAAEJ,IAAI,CAACM;MAAK,CAAO,CAAC,GAE1CzB,IAAA,CAACL,GAAG;QAAC+B,SAAS,EAAC,MAAM;QAAAH,QAAA,EAAEJ,IAAI,CAACM;MAAK,CAAM;IACxC,GARIN,IAAI,CAACQ,EASe,CAC5B,CAAC;EACJ,CAAC,EAAE,CAACb,WAAW,EAAEP,mBAAmB,EAAES,WAAW,CAAC,CAAC;EAEnD,OACEhB,IAAA,CAACC,eAAe;IAAC,cAAYc,CAAC,CAAC,mBAAmB,CAAE;IAACO,IAAI,EAAC,SAAS;IAAAC,QAAA,EAChEN;EAAqB,CACP,CAAC;AAEtB,CAAC;AACD,MAAMW,4BAA4B,GAAGpC,IAAI,CAACqB,oBAAoB,CAAC;AAC/De,4BAA4B,CAACC,WAAW,GAAG,sBAAsB;AAEjE,SAASD,4BAA4B,IAAIf,oBAAoB","ignoreList":[]}

package/dist/esm/ui-shell/SideNav/SideNavHeader.js CHANGED Viewed

@@ -14,10 +14,10 @@ import _Skeleton from "@mui/material/Skeleton";
 import styled from "@emotion/styled";
 import { memo } from "react";
 import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
-import { SideNavLogo } from "./SideNavLogo.js";
 import { Heading5 } from "../../Typography.js";
 import { useUiShellContext } from "../../ui-shell/UiShellProvider.js";
 import { TOP_NAV_HEIGHT, UI_SHELL_BASE_Z_INDEX } from "../uiShellSharedConstants.js";
+import { SideNavLogo } from "./SideNavLogo.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SideNavHeaderContainer = styled("div")({
   position: "relative",
@@ -71,13 +71,13 @@ const SideNavHeader = ({
   const uiShellContext = useUiShellContext();
   return _jsxs(SideNavHeaderContainer, {
     children: [_jsx(SideNavLogoContainer, {
-      isSameBackgroundAsMain: logoProps?.isSameBackgroundAsMain,
+      "data-se": "sidenav-header-logo-container",
       headerBackgroundColor: uiShellContext?.sideNavBackgroundColor,
+      isSameBackgroundAsMain: logoProps?.isSameBackgroundAsMain,
       odysseyDesignTokens: odysseyDesignTokens,
-      "data-se": "sidenav-header-logo-container",
       children: isLoading ? _jsx(_Skeleton, {
-        variant: "rounded",
         height: 24,
+        variant: "rounded",
         width: 67
       }) : _jsx(SideNavLogo, {
         ...logoProps

package/dist/esm/ui-shell/SideNav/SideNavHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SideNavHeader.js","names":["styled","memo","useOdysseyDesignTokens","~~SideNavLogo","~~Heading5","useUiShellContext","TOP_NAV_HEIGHT","UI_SHELL_BASE_Z_INDEX","jsx","_jsx","jsxs","_jsxs","SideNavHeaderContainer","position","display","flexDirection","zIndex","SideNavLogoContainer","shouldForwardProp","prop","headerBackgroundColor","isSameBackgroundAsMain","odysseyDesignTokens","alignItems","height","paddingBlock","Spacing4","paddingInline","Spacing5","backgroundColor","HueNeutralWhite","maxHeight","width","maxWidth","SideNavHeadingContainer","contrastFontColor","justifyContent","margin","color","SideNavHeader","appName","isLoading","logoProps","uiShellContext","children","sideNavBackgroundColor","_Skeleton","variant","sideNavContrastColors","fontColor","component","MemoizedSideNavHeader","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavHeader.tsx"],"sourcesContent":["/!\n Copyright (c) 2024-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 styled from \"@emotion/styled\";\nimport { ~~memo } from \"react\";\nimport {~~ Skeleton } from \"@mui/material\";\n\nimport {~~\n type~~ ~~DesignTokens,\n useOdysseyDesignTokens,\n~~} from \"~~../../OdysseyDesignTokensContext.js~~\";\nimport { ~~SideNavLogo~~ } from \"~~./SideNavLogo~~.js\";\nimport { ~~SideNavLogoProps, SideNavProps~~ } from \"~~./types~~.js\";\nimport { Heading5 } from \"../../Typography.js\";\nimport { ~~ContrastColors } from~~ \~~"../../createContrastColors.js\";\nimport {\~~n UiShellColors,\n useUiShellContext,\n} from \"../../ui-shell/UiShellProvider.js\";\nimport {\n TOP_NAV_HEIGHT,\n UI_SHELL_BASE_Z_INDEX,\n} from \"../uiShellSharedConstants.js\";\n\nconst SideNavHeaderContainer = styled(\"div\")({\n position: \"relative\",\n display: \"flex\",\n flexDirection: \"column\",\n zIndex: UI_SHELL_BASE_Z_INDEX,\n});\n\nconst SideNavLogoContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"headerBackgroundColor\" &&\n prop !== \"isSameBackgroundAsMain\" &&\n prop !== \"odysseyDesignTokens\",\n})<{\n headerBackgroundColor?: UiShellColors[\"sideNavBackgroundColor\"];\n isSameBackgroundAsMain: SideNavLogoProps[\"isSameBackgroundAsMain\"];\n odysseyDesignTokens: DesignTokens;\n}>(\n ({ headerBackgroundColor, isSameBackgroundAsMain, odysseyDesignTokens }) => ({\n display: \"flex\",\n alignItems: \"center\",\n height: TOP_NAV_HEIGHT,\n paddingBlock: odysseyDesignTokens.Spacing4,\n paddingInline: odysseyDesignTokens.Spacing5,\n backgroundColor: isSameBackgroundAsMain\n ? headerBackgroundColor\n : odysseyDesignTokens.HueNeutralWhite,\n\n \"svg, img\": {\n maxHeight: \"100%\",\n width: \"auto\",\n maxWidth: \"100%\",\n },\n }),\n);\n\nconst SideNavHeadingContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" && prop !== \"contrastFontColor\",\n})(\n ({\n contrastFontColor,\n odysseyDesignTokens,\n }: {\n contrastFontColor: ContrastColors[\"fontColor\"];\n odysseyDesignTokens: DesignTokens;\n }) => ({\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n paddingBlock: odysseyDesignTokens.Spacing4,\n paddingInline: odysseyDesignTokens.Spacing5,\n width: \"100%\",\n\n [\"& .MuiTypography-root\"]: {\n margin: 0,\n width: \"100%\",\n color: contrastFontColor \|\| \"inherit\",\n },\n }),\n);\n\nexport type SideNavHeaderProps = {\n /\n The app's name.\n /\n appName?: string;\n /\n If the side nav currently has no items, it will be loading.\n */\n isLoading?: boolean;\n} & Pick<SideNavProps, \"logoProps\">;\n\nconst SideNavHeader = ({\n appName,\n isLoading,\n logoProps,\n}: SideNavHeaderProps) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n const uiShellContext = useUiShellContext();\n\n return (\n <SideNavHeaderContainer>\n <SideNavLogoContainer\n ~~isSameBackgroundAsMain~~={~~logoProps~~?.~~isSameBackgroundAsMain~~}\n ~~headerBackgroundColor~~={~~uiShellContext~~?.~~sideNavBackgroundColor~~}\n odysseyDesignTokens={odysseyDesignTokens}\n ~~data-se=\"sidenav-header-logo-container\"\n~~ >\n {isLoading ? (\n // The skeleton takes the hardcoded dimensions of the Okta logo\n <Skeleton variant=\"rounded\" ~~height={24}~~ width={67} />\n ) : (\n <SideNavLogo {...logoProps} />\n )}\n </SideNavLogoContainer>\n\n {appName && (\n <SideNavHeadingContainer\n contrastFontColor={uiShellContext?.sideNavContrastColors?.fontColor}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n <Heading5 component=\"h2\">\n {isLoading ? <Skeleton /> : appName}\n </Heading5>\n </SideNavHeadingContainer>\n )}\n </SideNavHeaderContainer>\n );\n};\n\nconst MemoizedSideNavHeader = memo(SideNavHeader);\nMemoizedSideNavHeader.displayName = \"SideNavHeader\";\n\nexport { MemoizedSideNavHeader as SideNavHeader };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;~~AACpC~~,SAASC,IAAI,QAAQ,OAAO;AAG5B,SAEEC,sBAAsB,QACjB,qCAAqC;AAC5C,SAASC,~~WAAW,~~QAAQ,~~kBAAkB;AAE9C,SAASC,~~QAAQ,~~QAAQ,~~qBAAqB;~~AAE9C~~,SAEEC,iBAAiB,QACZ,mCAAmC;AAC1C,SACEC,cAAc,EACdC,qBAAqB,QAChB,8BAA8B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;~~AAEtC~~,MAAMC,sBAAsB,GAAGZ,MAAM,CAAC,KAAK,CAAC,CAAC;EAC3Ca,QAAQ,EAAE,UAAU;EACpBC,OAAO,EAAE,MAAM;EACfC,aAAa,EAAE,QAAQ;EACvBC,MAAM,~~EAAET~~;AACV,CAAC,CAAC;AAEF,~~MAAMU~~,oBAAoB,GAAGjB,MAAM,CAAC,KAAK,EAAE;EACzCkB,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,uBAAuB,IAChCA,IAAI,KAAK,wBAAwB,IACjCA,IAAI,KAAK;AACb,CAAC,CAAC,CAKA,CAAC;EAAEC,qBAAqB;EAAEC,sBAAsB;EAAEC;AAAoB,CAAC,MAAM;EAC3ER,OAAO,EAAE,MAAM;EACfS,UAAU,EAAE,QAAQ;EACpBC,MAAM,~~EAAElB~~,cAAc;~~EACtBmB~~,YAAY,EAAEH,mBAAmB,CAACI,QAAQ;EAC1CC,aAAa,EAAEL,mBAAmB,CAACM,QAAQ;EAC3CC,eAAe,EAAER,sBAAsB,GACnCD,qBAAqB,GACrBE,mBAAmB,CAACQ,eAAe;EAEvC,UAAU,EAAE;IACVC,SAAS,EAAE,MAAM;IACjBC,KAAK,EAAE,MAAM;IACbC,QAAQ,EAAE;EACZ;AACF,CAAC,CACH,CAAC;AAED,MAAMC,uBAAuB,GAAGlC,MAAM,CAAC,KAAK,EAAE;EAC5CkB,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,qBAAqB,IAAIA,IAAI,KAAK;AAC/C,CAAC,CAAC,CACA,CAAC;EACCgB,iBAAiB;EACjBb;AAIF,CAAC,MAAM;EACLR,OAAO,EAAE,MAAM;EACfsB,cAAc,EAAE,eAAe;EAC/Bb,UAAU,EAAE,QAAQ;EACpBE,YAAY,EAAEH,mBAAmB,CAACI,QAAQ;EAC1CC,aAAa,EAAEL,mBAAmB,CAACM,QAAQ;EAC3CI,KAAK,EAAE,MAAM;EAEb,CAAC,uBAAuB,GAAG;IACzBK,MAAM,EAAE,CAAC;IACTL,KAAK,EAAE,MAAM;IACbM,KAAK,EAAEH,iBAAiB,IAAI;EAC9B;AACF,CAAC,CACH,CAAC;AAaD,MAAMI,aAAa,GAAGA,CAAC;EACrBC,OAAO;EACPC,SAAS;EACTC;AACkB,CAAC,KAAK;EACxB,MAAMpB,mBAAmB,GAAGpB,sBAAsB,CAAC,CAAC;EACpD,MAAMyC,cAAc,~~GAAGtC~~,iBAAiB,CAAC,CAAC;EAE1C,~~OACEM~~,KAAA,CAACC,sBAAsB;IAAAgC,QAAA,GACrBnC,IAAA,CAACQ,oBAAoB;~~MACnBI~~,~~sBAAsB~~,~~EAAEqB~~,~~SAAS~~,~~EAAErB~~,sBAAuB;~~MAC1DD~~,~~qBAAqB~~,~~EAAEuB~~,~~cAAc~~,~~EAAEE~~,sBAAuB;~~MAC9DvB~~,mBAAmB,EAAEA,mBAAoB;~~MACzC,WAAQ,+BAA+B;~~MAAAsB,QAAA,~~EAEtCH~~,SAAS,GAERhC,IAAA,CAAAqC,SAAA;~~QAAUC~~,~~OAAO~~,~~EAAC~~,~~SAAS~~;~~QAACvB~~,~~MAAM~~,~~EAAE~~,~~EAAG~~;~~QAACQ~~,KAAK,EAAE;MAAG,CAAE,CAAC,GAErDvB,IAAA,~~CAACN~~,WAAW;QAAA,~~GAAKuC~~;MAAS,CAAG;IAC9B,CACmB,CAAC,EAEtBF,OAAO,IACN/B,IAAA,CAACyB,uBAAuB;MACtBC,iBAAiB,EAAEQ,cAAc,EAAEK,qBAAqB,EAAEC,SAAU;MACpE3B,mBAAmB,EAAEA,mBAAoB;MAAAsB,QAAA,EAEzCnC,IAAA,~~CAACL~~,QAAQ;~~QAAC8C~~,SAAS,EAAC,IAAI;QAAAN,QAAA,EACrBH,SAAS,GAAGhC,IAAA,CAAAqC,SAAA,IAAW,CAAC,GAAGN;MAAO,CAC3B;IAAC,CACY,CAC1B;EAAA,CACqB,CAAC;AAE7B,CAAC;AAED,MAAMW,qBAAqB,GAAGlD,IAAI,CAACsC,aAAa,CAAC;AACjDY,qBAAqB,CAACC,WAAW,GAAG,eAAe;AAEnD,SAASD,qBAAqB,IAAIZ,aAAa","ignoreList":[]}
1	+ {"version":3,"file":"SideNavHeader.js","names":["styled","memo","useOdysseyDesignTokens","Heading5","useUiShellContext","TOP_NAV_HEIGHT","UI_SHELL_BASE_Z_INDEX","SideNavLogo","jsx","_jsx","jsxs","_jsxs","SideNavHeaderContainer","position","display","flexDirection","zIndex","SideNavLogoContainer","shouldForwardProp","prop","headerBackgroundColor","isSameBackgroundAsMain","odysseyDesignTokens","alignItems","height","paddingBlock","Spacing4","paddingInline","Spacing5","backgroundColor","HueNeutralWhite","maxHeight","width","maxWidth","SideNavHeadingContainer","contrastFontColor","justifyContent","margin","color","SideNavHeader","appName","isLoading","logoProps","uiShellContext","children","sideNavBackgroundColor","_Skeleton","variant","sideNavContrastColors","fontColor","component","MemoizedSideNavHeader","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavHeader.tsx"],"sourcesContent":["/!\n Copyright (c) 2024-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 styled from \"@emotion/styled\";\nimport { Skeleton } from \"@mui/material\";\nimport { memo } from \"react\";\n\nimport { ContrastColors } from \"../../createContrastColors.js\";\nimport {\n type DesignTokens,\n useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { Heading5 } from \"../../Typography.js\";\nimport {\n UiShellColors,\n useUiShellContext,\n} from \"../../ui-shell/UiShellProvider.js\";\nimport {\n TOP_NAV_HEIGHT,\n UI_SHELL_BASE_Z_INDEX,\n} from \"../uiShellSharedConstants.js\";\nimport { SideNavLogo } from \"./SideNavLogo.js\";\nimport { SideNavLogoProps, SideNavProps } from \"./types.js\";\n\nconst SideNavHeaderContainer = styled(\"div\")({\n position: \"relative\",\n display: \"flex\",\n flexDirection: \"column\",\n zIndex: UI_SHELL_BASE_Z_INDEX,\n});\n\nconst SideNavLogoContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"headerBackgroundColor\" &&\n prop !== \"isSameBackgroundAsMain\" &&\n prop !== \"odysseyDesignTokens\",\n})<{\n headerBackgroundColor?: UiShellColors[\"sideNavBackgroundColor\"];\n isSameBackgroundAsMain: SideNavLogoProps[\"isSameBackgroundAsMain\"];\n odysseyDesignTokens: DesignTokens;\n}>(\n ({ headerBackgroundColor, isSameBackgroundAsMain, odysseyDesignTokens }) => ({\n display: \"flex\",\n alignItems: \"center\",\n height: TOP_NAV_HEIGHT,\n paddingBlock: odysseyDesignTokens.Spacing4,\n paddingInline: odysseyDesignTokens.Spacing5,\n backgroundColor: isSameBackgroundAsMain\n ? headerBackgroundColor\n : odysseyDesignTokens.HueNeutralWhite,\n\n \"svg, img\": {\n maxHeight: \"100%\",\n width: \"auto\",\n maxWidth: \"100%\",\n },\n }),\n);\n\nconst SideNavHeadingContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" && prop !== \"contrastFontColor\",\n})(\n ({\n contrastFontColor,\n odysseyDesignTokens,\n }: {\n contrastFontColor: ContrastColors[\"fontColor\"];\n odysseyDesignTokens: DesignTokens;\n }) => ({\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n paddingBlock: odysseyDesignTokens.Spacing4,\n paddingInline: odysseyDesignTokens.Spacing5,\n width: \"100%\",\n\n [\"& .MuiTypography-root\"]: {\n margin: 0,\n width: \"100%\",\n color: contrastFontColor \|\| \"inherit\",\n },\n }),\n);\n\nexport type SideNavHeaderProps = {\n /\n The app's name.\n /\n appName?: string;\n /\n If the side nav currently has no items, it will be loading.\n */\n isLoading?: boolean;\n} & Pick<SideNavProps, \"logoProps\">;\n\nconst SideNavHeader = ({\n appName,\n isLoading,\n logoProps,\n}: SideNavHeaderProps) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n const uiShellContext = useUiShellContext();\n\n return (\n <SideNavHeaderContainer>\n <SideNavLogoContainer\n data-se=\"sidenav-header-logo-container\"\n headerBackgroundColor={uiShellContext?.sideNavBackgroundColor}\n isSameBackgroundAsMain={logoProps?.isSameBackgroundAsMain}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n {isLoading ? (\n // The skeleton takes the hardcoded dimensions of the Okta logo\n <Skeleton height={24} variant=\"rounded\" width={67} />\n ) : (\n <SideNavLogo {...logoProps} />\n )}\n </SideNavLogoContainer>\n\n {appName && (\n <SideNavHeadingContainer\n contrastFontColor={uiShellContext?.sideNavContrastColors?.fontColor}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n <Heading5 component=\"h2\">\n {isLoading ? <Skeleton /> : appName}\n </Heading5>\n </SideNavHeadingContainer>\n )}\n </SideNavHeaderContainer>\n );\n};\n\nconst MemoizedSideNavHeader = memo(SideNavHeader);\nMemoizedSideNavHeader.displayName = \"SideNavHeader\";\n\nexport { MemoizedSideNavHeader as SideNavHeader };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/ui-shell/SideNav/SideNavItemContent.js CHANGED Viewed

@@ -13,11 +13,11 @@ import _Link from "@mui/material/Link";
 import styled from "@emotion/styled";
 import { memo, useCallback, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
-import { SideNavItemLinkContent } from "./SideNavItemLinkContent.js";
-import { useSideNavItemContent } from "./SideNavItemContentContext.js";
 import { ExternalLinkIcon } from "../../icons.generated/index.js";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
 import { useUiShellContext } from "../../ui-shell/UiShellProvider.js";
+import { useSideNavItemContent } from "./SideNavItemContentContext.js";
+import { SideNavItemLinkContent } from "./SideNavItemLinkContent.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const StyledSideNavListItem = styled("li", {
   shouldForwardProp: prop => prop !== "isSelected" && prop !== "odysseyDesignTokens" && prop !== "sideNavContrastColors"
@@ -191,79 +191,79 @@ const SideNavItemContent = ({
     }
   }, [id, onClick, onItemSelected]);
   return _jsx(StyledSideNavListItem, {
-    "aria-disabled": isDisabled,
     "aria-current": isSelected ? "page" : undefined,
+    "aria-disabled": isDisabled,
     disabled: isDisabled,
     id: id,
     isSelected: isSelected,
     odysseyDesignTokens: odysseyDesignTokens,
-    ref: localScrollRef,
-    sideNavContrastColors: uiShellContext?.sideNavContrastColors,
-    onDragOver: () => {
-      setIsActiveDropTarget(true);
-    },
     onDragLeave: () => {
       setIsActiveDropTarget(false);
     },
+    onDragOver: () => {
+      setIsActiveDropTarget(true);
+    },
     onDrop: () => {
       setIsActiveDropTarget(false);
     },
+    ref: localScrollRef,
+    sideNavContrastColors: uiShellContext?.sideNavContrastColors,
     children: isDisabled ? _jsx(NavItemContentContainer, {
       contextValue: contextValue,
+      "data-se": "tb--sidenav-text-container",
+      isActiveDropTarget: false,
       isDisabled: isDisabled,
       isSelected: isSelected,
       odysseyDesignTokens: odysseyDesignTokens,
       sideNavContrastColors: uiShellContext?.sideNavContrastColors,
-      isActiveDropTarget: false,
-      "data-se": "tb--sidenav-text-container",
       children: _jsx(SideNavItemLinkContent, {
         count: count,
+        endIcon: endIcon,
         label: label,
+        severity: severity,
         startIcon: startIcon,
-        endIcon: endIcon,
         statusLabel: statusLabel,
-        severity: severity,
         translate: translate
       })
     }) : !href ? _jsx(NavItemContentContainer, {
       contextValue: contextValue,
+      "data-se": "tb--sidenav-text-container",
+      isActiveDropTarget: isActiveDropTarget,
       isDisabled: isDisabled,
       isSelected: isSelected,
+      odysseyDesignTokens: odysseyDesignTokens,
       onClick: itemClickHandler,
       onKeyDown: sideNavItemContentKeyHandler,
-      odysseyDesignTokens: odysseyDesignTokens,
       role: "button",
       sideNavContrastColors: uiShellContext?.sideNavContrastColors,
       tabIndex: 0,
-      isActiveDropTarget: isActiveDropTarget,
-      "data-se": "tb--sidenav-text-container",
       children: _jsx(SideNavItemLinkContent, {
         count: count,
+        endIcon: endIcon,
         label: label,
+        severity: severity,
         startIcon: startIcon,
-        endIcon: endIcon,
         statusLabel: statusLabel,
-        severity: severity,
         translate: translate
       })
     }) : _jsxs(StyledNavItemLink, {
       contextValue: contextValue,
+      "data-se": "tb--sidenav-text-container",
       href: href,
+      isActiveDropTarget: isActiveDropTarget,
       isDisabled: isDisabled,
       isSelected: isSelected,
       odysseyDesignTokens: odysseyDesignTokens,
       onClick: itemClickHandler,
       sideNavContrastColors: uiShellContext?.sideNavContrastColors,
       target: target,
-      isActiveDropTarget: isActiveDropTarget,
-      "data-se": "tb--sidenav-text-container",
       children: [_jsx(SideNavItemLinkContent, {
         count: count,
+        endIcon: endIcon,
         label: label,
+        severity: severity,
         startIcon: startIcon,
-        endIcon: endIcon,
         statusLabel: statusLabel,
-        severity: severity,
         translate: translate
       }), target === "_blank" && _jsx("span", {
         className: "Link-indicator",

package/dist/esm/ui-shell/SideNav/SideNavItemContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SideNavItemContent.js","names":["styled","memo","useCallback","useImperativeHandle","useMemo","useRef","useState","useOdysseyDesignTokens","SideNavItemLinkContent","useSideNavItemContent","ExternalLinkIcon","useUiShellContext","jsx","_jsx","jsxs","_jsxs","StyledSideNavListItem","shouldForwardProp","prop","isSelected","odysseyDesignTokens","sideNavContrastColors","display","alignItems","backgroundColor","borderRadius","BorderRadiusMain","transition","TransitionDurationMain","color","fontColor","TypographyColorAction","itemSelectedBackgroundColor","HueBlue50","scrollToNode","node","scrollIntoView","behavior","block","inline","getBaseNavItemContentStyles","isDisabled","isActiveDropTarget","width","textDecoration","TypographyColorHeading","minHeight","paddingBlock","Spacing3","paddingInlineEnd","Spacing4","cursor","itemHoverBackgroundColor","HueNeutral50","fontWeight","TypographyWeightBodyBold","TypographyColorDisabled","itemDisabledFontColor","outline","boxShadow","focusRingColor","PalettePrimaryMain","getNavItemContentStyles","contextValue","paddingInlineStart","depth","Spacing6","isCompact","Spacing1","NavItemContentContainer","StyledNavItemLink","_Link","SideNavItemContent","count","id","label","href","target","startIcon","severity","statusLabel","endIcon","onClick","scrollRef","onItemSelected","translate","uiShellContext","sidenavItemContentContext","setIsActiveDropTarget","localScrollRef","current","itemClickHandler","event","sideNavItemContentKeyHandler","key","preventDefault","undefined","disabled","ref","onDragOver","onDragLeave","onDrop","children","onKeyDown","role","tabIndex","className","MemoizedSideNavItemContent","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavItemContent.tsx"],"sourcesContent":["/!\n Copyright (c) 2024-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 styled from \"@emotion/styled\";\nimport {\n KeyboardEventHandler,\n memo,\n MouseEventHandler,\n useCallback,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { Link as NavItemLink } from \"@mui/material\";\nimport {\n type DesignTokens,\n useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { SideNavItemLinkContent } from \"./SideNavItemLinkContent.js\";\nimport type { SideNavItem } from \"./types.js\";\nimport {\n SideNavItemContentContextValue,\n useSideNavItemContent,\n} from \"./SideNavItemContentContext.js\";\nimport { ExternalLinkIcon } from \"../../icons.generated/index.js\";\nimport {\n UiShellColors,\n useUiShellContext,\n} from \"../../ui-shell/UiShellProvider.js\";\n\nexport const StyledSideNavListItem = styled(\"li\", {\n shouldForwardProp: (prop) =>\n prop !== \"isSelected\" &&\n prop !== \"odysseyDesignTokens\" &&\n prop !== \"sideNavContrastColors\",\n})<{\n sideNavContrastColors?: UiShellColors[\"sideNavContrastColors\"];\n odysseyDesignTokens: DesignTokens;\n isSelected?: boolean;\n itemSelectedBackgroundColor?: string;\n disabled?: boolean;\n}>(({ isSelected, odysseyDesignTokens, sideNavContrastColors }) => ({\n display: \"flex\",\n alignItems: \"center\",\n backgroundColor: \"unset\",\n borderRadius: odysseyDesignTokens.BorderRadiusMain,\n transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,\n\n ...(isSelected && {\n color: sideNavContrastColors?.fontColor\n ? `${sideNavContrastColors.fontColor}`\n : `${odysseyDesignTokens.TypographyColorAction}`,\n backgroundColor:\n sideNavContrastColors?.itemSelectedBackgroundColor \|\|\n odysseyDesignTokens.HueBlue50,\n }),\n}));\n\nconst scrollToNode = (node: HTMLElement \| null) => {\n if (node) {\n node?.scrollIntoView({\n behavior: \"instant\",\n block: \"center\",\n inline: \"nearest\",\n });\n }\n};\n\ntype ScrollIntoViewHandle = {\n scrollIntoView: () => void;\n};\n\nexport const getBaseNavItemContentStyles = ({\n isDisabled,\n isSelected,\n odysseyDesignTokens,\n sideNavContrastColors,\n isActiveDropTarget,\n}: {\n isSelected?: boolean;\n isDisabled?: boolean;\n odysseyDesignTokens: DesignTokens;\n sideNavContrastColors: UiShellColors[\"sideNavContrastColors\"];\n isActiveDropTarget: boolean;\n}) => ({\n display: \"flex\",\n alignItems: \"center\",\n width: \"100%\",\n textDecoration: \"none\",\n // !important needed here to override more specific base link styling\n color: sideNavContrastColors?.fontColor\n ? `${sideNavContrastColors?.fontColor} !important`\n : `${odysseyDesignTokens.TypographyColorHeading} !important`,\n minHeight: \"unset\",\n paddingBlock: odysseyDesignTokens.Spacing3,\n paddingInlineEnd: odysseyDesignTokens.Spacing4,\n borderRadius: odysseyDesignTokens.BorderRadiusMain,\n transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,\n cursor: \"pointer\",\n ...(isActiveDropTarget && {\n backgroundColor:\n sideNavContrastColors?.itemHoverBackgroundColor \|\|\n odysseyDesignTokens.HueNeutral50,\n }),\n\n // When hover or focus of the drag handle, apply general hover styles\n \"&:hover, li:has(> button:hover, > button:focus, > button:focus-visible) &\": {\n textDecoration: \"none\",\n backgroundColor:\n sideNavContrastColors?.itemHoverBackgroundColor \|\|\n odysseyDesignTokens.HueNeutral50,\n\n ...(isSelected && {\n backgroundColor:\n sideNavContrastColors?.itemSelectedBackgroundColor \|\|\n odysseyDesignTokens.HueBlue50,\n color:\n sideNavContrastColors?.fontColor \|\|\n odysseyDesignTokens.TypographyColorAction,\n }),\n\n ...(isDisabled && {\n backgroundColor: \"unset\",\n }),\n },\n\n ...(isSelected && {\n color: sideNavContrastColors?.fontColor\n ? `${sideNavContrastColors?.fontColor} !important`\n : `${odysseyDesignTokens.TypographyColorAction} !important`,\n fontWeight: odysseyDesignTokens.TypographyWeightBodyBold,\n }),\n\n ...(isDisabled && {\n cursor: \"default\",\n color: `${odysseyDesignTokens.TypographyColorDisabled} !important`,\n\n ...(sideNavContrastColors?.itemDisabledFontColor && {\n color: `${sideNavContrastColors?.itemDisabledFontColor} !important`,\n }),\n }),\n\n \"&:focus-visible\": {\n outline: \"none\",\n boxShadow: `inset 0 0 0 2px ${sideNavContrastColors?.focusRingColor \|\| odysseyDesignTokens.PalettePrimaryMain}`,\n },\n});\n\nexport const getNavItemContentStyles = ({\n odysseyDesignTokens,\n contextValue,\n}: {\n odysseyDesignTokens: DesignTokens;\n contextValue: SideNavItemContentContextValue;\n}) => ({\n paddingInlineStart: `calc(${odysseyDesignTokens.Spacing4} ${contextValue.depth} + ${odysseyDesignTokens.Spacing6})`,\n\n ...(contextValue.depth === 1 && {\n paddingInlineStart: odysseyDesignTokens.Spacing4,\n }),\n\n ...(contextValue.isCompact && {\n paddingBlock: odysseyDesignTokens.Spacing1,\n }),\n});\n\nconst NavItemContentContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" &&\n prop != \"contextValue\" &&\n prop !== \"isDisabled\" &&\n prop !== \"sideNavContrastColors\" &&\n prop !== \"isSelected\" &&\n prop !== \"isActiveDropTarget\",\n})<{\n contextValue: SideNavItemContentContextValue;\n odysseyDesignTokens: DesignTokens;\n sideNavContrastColors: UiShellColors[\"sideNavContrastColors\"];\n isSelected?: boolean;\n isDisabled?: boolean;\n isActiveDropTarget: boolean;\n}>(\n ({\n isDisabled,\n isSelected,\n contextValue,\n odysseyDesignTokens,\n sideNavContrastColors,\n isActiveDropTarget,\n }) => ({\n ...getBaseNavItemContentStyles({\n isDisabled,\n isSelected,\n odysseyDesignTokens,\n sideNavContrastColors,\n isActiveDropTarget,\n }),\n\n ...getNavItemContentStyles({\n odysseyDesignTokens,\n contextValue,\n }),\n }),\n);\n\nconst StyledNavItemLink = styled(NavItemLink, {\n shouldForwardProp: (prop) =>\n prop != \"contextValue\" &&\n prop !== \"isDisabled\" &&\n prop !== \"isSelected\" &&\n prop !== \"odysseyDesignTokens\" &&\n prop !== \"sideNavContrastColors\" &&\n prop !== \"isActiveDropTarget\",\n})<{\n contextValue: SideNavItemContentContextValue;\n odysseyDesignTokens: DesignTokens;\n sideNavContrastColors: UiShellColors[\"sideNavContrastColors\"];\n isSelected?: boolean;\n isDisabled?: boolean;\n isActiveDropTarget: boolean;\n}>(\n ({\n isDisabled,\n isSelected,\n contextValue,\n odysseyDesignTokens,\n sideNavContrastColors,\n isActiveDropTarget,\n }) => ({\n ...getBaseNavItemContentStyles({\n isDisabled,\n isSelected,\n odysseyDesignTokens,\n sideNavContrastColors,\n isActiveDropTarget,\n }),\n\n ...getNavItemContentStyles({\n odysseyDesignTokens,\n contextValue,\n }),\n }),\n);\n\nconst SideNavItemContent = ({\n count,\n id,\n label,\n href,\n target,\n startIcon,\n severity,\n statusLabel,\n endIcon,\n onClick,\n isDisabled,\n isSelected,\n scrollRef,\n onItemSelected,\n translate,\n}: Pick<\n SideNavItem,\n \| \"count\"\n \| \"id\"\n \| \"label\"\n \| \"href\"\n \| \"target\"\n \| \"startIcon\"\n \| \"severity\"\n \| \"statusLabel\"\n \| \"endIcon\"\n \| \"onClick\"\n \| \"isDisabled\"\n \| \"isSelected\"\n \| \"translate\"\n> & {\n /*\n The ref used to scroll to this item\n */\n scrollRef?: React.RefObject<ScrollIntoViewHandle>;\n onItemSelected?: (selectedItemId: string) => void;\n}) => {\n const uiShellContext = useUiShellContext();\n const sidenavItemContentContext = useSideNavItemContent();\n const contextValue = useMemo(\n () => sidenavItemContentContext,\n [sidenavItemContentContext],\n );\n\n const odysseyDesignTokens = useOdysseyDesignTokens();\n const [isActiveDropTarget, setIsActiveDropTarget] = useState(false);\n\n const localScrollRef = useRef<HTMLLIElement>(null);\n useImperativeHandle(scrollRef, () => {\n return {\n scrollIntoView: () => {\n scrollToNode(localScrollRef.current);\n },\n };\n }, []);\n\n const itemClickHandler = useCallback<\n MouseEventHandler<HTMLDivElement \| HTMLAnchorElement>\n >(\n (event) => {\n onItemSelected?.(id);\n onClick?.(event);\n },\n [id, onClick, onItemSelected],\n );\n\n const sideNavItemContentKeyHandler = useCallback<\n KeyboardEventHandler<HTMLDivElement>\n >(\n (event) => {\n if (event?.key === \"Enter\") {\n event.preventDefault();\n onItemSelected?.(id);\n onClick?.(event);\n }\n },\n [id, onClick, onItemSelected],\n );\n\n return (\n <StyledSideNavListItem\n aria-disabled={isDisabled}\n aria-current={isSelected ? \"page\" : undefined}\n disabled={isDisabled}\n id={id}\n isSelected={isSelected}\n key={id}\n odysseyDesignTokens={odysseyDesignTokens}\n ref={localScrollRef}\n sideNavContrastColors={uiShellContext?.sideNavContrastColors}\n onDragOver={() => {\n setIsActiveDropTarget(true);\n }}\n onDragLeave={() => {\n setIsActiveDropTarget(false);\n }}\n onDrop={() => {\n setIsActiveDropTarget(false);\n }}\n >\n {\n // Use Link for nav items with links and div for disabled or non-link items\n isDisabled ? (\n <NavItemContentContainer\n contextValue={contextValue}\n isDisabled={isDisabled}\n isSelected={isSelected}\n odysseyDesignTokens={odysseyDesignTokens}\n sideNavContrastColors={uiShellContext?.sideNavContrastColors}\n isActiveDropTarget={false}\n data-se=\"tb--sidenav-text-container\"\n >\n <SideNavItemLinkContent\n count={count}\n label={label}\n startIcon={startIcon}\n endIcon={endIcon}\n statusLabel={statusLabel}\n severity={severity}\n translate={translate}\n />\n </NavItemContentContainer>\n ) : !href ? (\n <NavItemContentContainer\n contextValue={contextValue}\n isDisabled={isDisabled}\n isSelected={isSelected}\n onClick={itemClickHandler}\n onKeyDown={sideNavItemContentKeyHandler}\n odysseyDesignTokens={odysseyDesignTokens}\n role=\"button\"\n sideNavContrastColors={uiShellContext?.sideNavContrastColors}\n tabIndex={0}\n isActiveDropTarget={isActiveDropTarget}\n data-se=\"tb--sidenav-text-container\"\n >\n <SideNavItemLinkContent\n count={count}\n label={label}\n startIcon={startIcon}\n endIcon={endIcon}\n statusLabel={statusLabel}\n severity={severity}\n translate={translate}\n />\n </NavItemContentContainer>\n ) : (\n <StyledNavItemLink\n contextValue={contextValue}\n href={href}\n isDisabled={isDisabled}\n isSelected={isSelected}\n odysseyDesignTokens={odysseyDesignTokens}\n onClick={itemClickHandler}\n sideNavContrastColors={uiShellContext?.sideNavContrastColors}\n target={target}\n isActiveDropTarget={isActiveDropTarget}\n data-se=\"tb--sidenav-text-container\"\n >\n <SideNavItemLinkContent\n count={count}\n label={label}\n startIcon={startIcon}\n endIcon={endIcon}\n statusLabel={statusLabel}\n severity={severity}\n translate={translate}\n />\n {target === \"_blank\" && (\n <span className=\"Link-indicator\" role=\"presentation\">\n <ExternalLinkIcon />\n </span>\n )}\n </StyledNavItemLink>\n )\n }\n </StyledSideNavListItem>\n );\n};\n\nconst MemoizedSideNavItemContent = memo(SideNavItemContent);\nMemoizedSideNavItemContent.displayName = \"SideNavItemContent\";\n\nexport { MemoizedSideNavItemContent as SideNavItemContent };\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"SideNavItemContent.js","names":["styled","memo","useCallback","useImperativeHandle","useMemo","useRef","useState","ExternalLinkIcon","useOdysseyDesignTokens","useUiShellContext","useSideNavItemContent","SideNavItemLinkContent","jsx","_jsx","jsxs","_jsxs","StyledSideNavListItem","shouldForwardProp","prop","isSelected","odysseyDesignTokens","sideNavContrastColors","display","alignItems","backgroundColor","borderRadius","BorderRadiusMain","transition","TransitionDurationMain","color","fontColor","TypographyColorAction","itemSelectedBackgroundColor","HueBlue50","scrollToNode","node","scrollIntoView","behavior","block","inline","getBaseNavItemContentStyles","isDisabled","isActiveDropTarget","width","textDecoration","TypographyColorHeading","minHeight","paddingBlock","Spacing3","paddingInlineEnd","Spacing4","cursor","itemHoverBackgroundColor","HueNeutral50","fontWeight","TypographyWeightBodyBold","TypographyColorDisabled","itemDisabledFontColor","outline","boxShadow","focusRingColor","PalettePrimaryMain","getNavItemContentStyles","contextValue","paddingInlineStart","depth","Spacing6","isCompact","Spacing1","NavItemContentContainer","StyledNavItemLink","_Link","SideNavItemContent","count","id","label","href","target","startIcon","severity","statusLabel","endIcon","onClick","scrollRef","onItemSelected","translate","uiShellContext","sidenavItemContentContext","setIsActiveDropTarget","localScrollRef","current","itemClickHandler","event","sideNavItemContentKeyHandler","key","preventDefault","undefined","disabled","onDragLeave","onDragOver","onDrop","ref","children","onKeyDown","role","tabIndex","className","MemoizedSideNavItemContent","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavItemContent.tsx"],"sourcesContent":["/!\n Copyright (c) 2024-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 styled from \"@emotion/styled\";\nimport { Link as NavItemLink } from \"@mui/material\";\nimport {\n KeyboardEventHandler,\n memo,\n MouseEventHandler,\n useCallback,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport type { SideNavItem } from \"./types.js\";\n\nimport { ExternalLinkIcon } from \"../../icons.generated/index.js\";\nimport {\n type DesignTokens,\n useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport {\n UiShellColors,\n useUiShellContext,\n} from \"../../ui-shell/UiShellProvider.js\";\nimport {\n SideNavItemContentContextValue,\n useSideNavItemContent,\n} from \"./SideNavItemContentContext.js\";\nimport { SideNavItemLinkContent } from \"./SideNavItemLinkContent.js\";\n\nexport const StyledSideNavListItem = styled(\"li\", {\n shouldForwardProp: (prop) =>\n prop !== \"isSelected\" &&\n prop !== \"odysseyDesignTokens\" &&\n prop !== \"sideNavContrastColors\",\n})<{\n disabled?: boolean;\n isSelected?: boolean;\n itemSelectedBackgroundColor?: string;\n odysseyDesignTokens: DesignTokens;\n sideNavContrastColors?: UiShellColors[\"sideNavContrastColors\"];\n}>(({ isSelected, odysseyDesignTokens, sideNavContrastColors }) => ({\n display: \"flex\",\n alignItems: \"center\",\n backgroundColor: \"unset\",\n borderRadius: odysseyDesignTokens.BorderRadiusMain,\n transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,\n\n ...(isSelected && {\n color: sideNavContrastColors?.fontColor\n ? `${sideNavContrastColors.fontColor}`\n : `${odysseyDesignTokens.TypographyColorAction}`,\n backgroundColor:\n sideNavContrastColors?.itemSelectedBackgroundColor \|\|\n odysseyDesignTokens.HueBlue50,\n }),\n}));\n\nconst scrollToNode = (node: HTMLElement \| null) => {\n if (node) {\n node?.scrollIntoView({\n behavior: \"instant\",\n block: \"center\",\n inline: \"nearest\",\n });\n }\n};\n\ntype ScrollIntoViewHandle = {\n scrollIntoView: () => void;\n};\n\nexport const getBaseNavItemContentStyles = ({\n isDisabled,\n isSelected,\n odysseyDesignTokens,\n sideNavContrastColors,\n isActiveDropTarget,\n}: {\n isActiveDropTarget: boolean;\n isDisabled?: boolean;\n isSelected?: boolean;\n odysseyDesignTokens: DesignTokens;\n sideNavContrastColors: UiShellColors[\"sideNavContrastColors\"];\n}) => ({\n display: \"flex\",\n alignItems: \"center\",\n width: \"100%\",\n textDecoration: \"none\",\n // !important needed here to override more specific base link styling\n color: sideNavContrastColors?.fontColor\n ? `${sideNavContrastColors?.fontColor} !important`\n : `${odysseyDesignTokens.TypographyColorHeading} !important`,\n minHeight: \"unset\",\n paddingBlock: odysseyDesignTokens.Spacing3,\n paddingInlineEnd: odysseyDesignTokens.Spacing4,\n borderRadius: odysseyDesignTokens.BorderRadiusMain,\n transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,\n cursor: \"pointer\",\n ...(isActiveDropTarget && {\n backgroundColor:\n sideNavContrastColors?.itemHoverBackgroundColor \|\|\n odysseyDesignTokens.HueNeutral50,\n }),\n\n // When hover or focus of the drag handle, apply general hover styles\n \"&:hover, li:has(> button:hover, > button:focus, > button:focus-visible) &\": {\n textDecoration: \"none\",\n backgroundColor:\n sideNavContrastColors?.itemHoverBackgroundColor \|\|\n odysseyDesignTokens.HueNeutral50,\n\n ...(isSelected && {\n backgroundColor:\n sideNavContrastColors?.itemSelectedBackgroundColor \|\|\n odysseyDesignTokens.HueBlue50,\n color:\n sideNavContrastColors?.fontColor \|\|\n odysseyDesignTokens.TypographyColorAction,\n }),\n\n ...(isDisabled && {\n backgroundColor: \"unset\",\n }),\n },\n\n ...(isSelected && {\n color: sideNavContrastColors?.fontColor\n ? `${sideNavContrastColors?.fontColor} !important`\n : `${odysseyDesignTokens.TypographyColorAction} !important`,\n fontWeight: odysseyDesignTokens.TypographyWeightBodyBold,\n }),\n\n ...(isDisabled && {\n cursor: \"default\",\n color: `${odysseyDesignTokens.TypographyColorDisabled} !important`,\n\n ...(sideNavContrastColors?.itemDisabledFontColor && {\n color: `${sideNavContrastColors?.itemDisabledFontColor} !important`,\n }),\n }),\n\n \"&:focus-visible\": {\n outline: \"none\",\n boxShadow: `inset 0 0 0 2px ${sideNavContrastColors?.focusRingColor \|\| odysseyDesignTokens.PalettePrimaryMain}`,\n },\n});\n\nexport const getNavItemContentStyles = ({\n odysseyDesignTokens,\n contextValue,\n}: {\n contextValue: SideNavItemContentContextValue;\n odysseyDesignTokens: DesignTokens;\n}) => ({\n paddingInlineStart: `calc(${odysseyDesignTokens.Spacing4} ${contextValue.depth} + ${odysseyDesignTokens.Spacing6})`,\n\n ...(contextValue.depth === 1 && {\n paddingInlineStart: odysseyDesignTokens.Spacing4,\n }),\n\n ...(contextValue.isCompact && {\n paddingBlock: odysseyDesignTokens.Spacing1,\n }),\n});\n\nconst NavItemContentContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" &&\n prop != \"contextValue\" &&\n prop !== \"isDisabled\" &&\n prop !== \"sideNavContrastColors\" &&\n prop !== \"isSelected\" &&\n prop !== \"isActiveDropTarget\",\n})<{\n contextValue: SideNavItemContentContextValue;\n isActiveDropTarget: boolean;\n isDisabled?: boolean;\n isSelected?: boolean;\n odysseyDesignTokens: DesignTokens;\n sideNavContrastColors: UiShellColors[\"sideNavContrastColors\"];\n}>(\n ({\n isDisabled,\n isSelected,\n contextValue,\n odysseyDesignTokens,\n sideNavContrastColors,\n isActiveDropTarget,\n }) => ({\n ...getBaseNavItemContentStyles({\n isDisabled,\n isSelected,\n odysseyDesignTokens,\n sideNavContrastColors,\n isActiveDropTarget,\n }),\n\n ...getNavItemContentStyles({\n odysseyDesignTokens,\n contextValue,\n }),\n }),\n);\n\nconst StyledNavItemLink = styled(NavItemLink, {\n shouldForwardProp: (prop) =>\n prop != \"contextValue\" &&\n prop !== \"isDisabled\" &&\n prop !== \"isSelected\" &&\n prop !== \"odysseyDesignTokens\" &&\n prop !== \"sideNavContrastColors\" &&\n prop !== \"isActiveDropTarget\",\n})<{\n contextValue: SideNavItemContentContextValue;\n isActiveDropTarget: boolean;\n isDisabled?: boolean;\n isSelected?: boolean;\n odysseyDesignTokens: DesignTokens;\n sideNavContrastColors: UiShellColors[\"sideNavContrastColors\"];\n}>(\n ({\n isDisabled,\n isSelected,\n contextValue,\n odysseyDesignTokens,\n sideNavContrastColors,\n isActiveDropTarget,\n }) => ({\n ...getBaseNavItemContentStyles({\n isDisabled,\n isSelected,\n odysseyDesignTokens,\n sideNavContrastColors,\n isActiveDropTarget,\n }),\n\n ...getNavItemContentStyles({\n odysseyDesignTokens,\n contextValue,\n }),\n }),\n);\n\nconst SideNavItemContent = ({\n count,\n id,\n label,\n href,\n target,\n startIcon,\n severity,\n statusLabel,\n endIcon,\n onClick,\n isDisabled,\n isSelected,\n scrollRef,\n onItemSelected,\n translate,\n}: Pick<\n SideNavItem,\n \| \"count\"\n \| \"id\"\n \| \"label\"\n \| \"href\"\n \| \"target\"\n \| \"startIcon\"\n \| \"severity\"\n \| \"statusLabel\"\n \| \"endIcon\"\n \| \"onClick\"\n \| \"isDisabled\"\n \| \"isSelected\"\n \| \"translate\"\n> & {\n onItemSelected?: (selectedItemId: string) => void;\n /*\n The ref used to scroll to this item\n */\n scrollRef?: React.RefObject<ScrollIntoViewHandle>;\n}) => {\n const uiShellContext = useUiShellContext();\n const sidenavItemContentContext = useSideNavItemContent();\n const contextValue = useMemo(\n () => sidenavItemContentContext,\n [sidenavItemContentContext],\n );\n\n const odysseyDesignTokens = useOdysseyDesignTokens();\n const [isActiveDropTarget, setIsActiveDropTarget] = useState(false);\n\n const localScrollRef = useRef<HTMLLIElement>(null);\n useImperativeHandle(scrollRef, () => {\n return {\n scrollIntoView: () => {\n scrollToNode(localScrollRef.current);\n },\n };\n }, []);\n\n const itemClickHandler = useCallback<\n MouseEventHandler<HTMLDivElement \| HTMLAnchorElement>\n >(\n (event) => {\n onItemSelected?.(id);\n onClick?.(event);\n },\n [id, onClick, onItemSelected],\n );\n\n const sideNavItemContentKeyHandler = useCallback<\n KeyboardEventHandler<HTMLDivElement>\n >(\n (event) => {\n if (event?.key === \"Enter\") {\n event.preventDefault();\n onItemSelected?.(id);\n onClick?.(event);\n }\n },\n [id, onClick, onItemSelected],\n );\n\n return (\n <StyledSideNavListItem\n aria-current={isSelected ? \"page\" : undefined}\n aria-disabled={isDisabled}\n disabled={isDisabled}\n id={id}\n isSelected={isSelected}\n key={id}\n odysseyDesignTokens={odysseyDesignTokens}\n onDragLeave={() => {\n setIsActiveDropTarget(false);\n }}\n onDragOver={() => {\n setIsActiveDropTarget(true);\n }}\n onDrop={() => {\n setIsActiveDropTarget(false);\n }}\n ref={localScrollRef}\n sideNavContrastColors={uiShellContext?.sideNavContrastColors}\n >\n {\n // Use Link for nav items with links and div for disabled or non-link items\n isDisabled ? (\n <NavItemContentContainer\n contextValue={contextValue}\n data-se=\"tb--sidenav-text-container\"\n isActiveDropTarget={false}\n isDisabled={isDisabled}\n isSelected={isSelected}\n odysseyDesignTokens={odysseyDesignTokens}\n sideNavContrastColors={uiShellContext?.sideNavContrastColors}\n >\n <SideNavItemLinkContent\n count={count}\n endIcon={endIcon}\n label={label}\n severity={severity}\n startIcon={startIcon}\n statusLabel={statusLabel}\n translate={translate}\n />\n </NavItemContentContainer>\n ) : !href ? (\n <NavItemContentContainer\n contextValue={contextValue}\n data-se=\"tb--sidenav-text-container\"\n isActiveDropTarget={isActiveDropTarget}\n isDisabled={isDisabled}\n isSelected={isSelected}\n odysseyDesignTokens={odysseyDesignTokens}\n onClick={itemClickHandler}\n onKeyDown={sideNavItemContentKeyHandler}\n role=\"button\"\n sideNavContrastColors={uiShellContext?.sideNavContrastColors}\n tabIndex={0}\n >\n <SideNavItemLinkContent\n count={count}\n endIcon={endIcon}\n label={label}\n severity={severity}\n startIcon={startIcon}\n statusLabel={statusLabel}\n translate={translate}\n />\n </NavItemContentContainer>\n ) : (\n <StyledNavItemLink\n contextValue={contextValue}\n data-se=\"tb--sidenav-text-container\"\n href={href}\n isActiveDropTarget={isActiveDropTarget}\n isDisabled={isDisabled}\n isSelected={isSelected}\n odysseyDesignTokens={odysseyDesignTokens}\n onClick={itemClickHandler}\n sideNavContrastColors={uiShellContext?.sideNavContrastColors}\n target={target}\n >\n <SideNavItemLinkContent\n count={count}\n endIcon={endIcon}\n label={label}\n severity={severity}\n startIcon={startIcon}\n statusLabel={statusLabel}\n translate={translate}\n />\n {target === \"_blank\" && (\n <span className=\"Link-indicator\" role=\"presentation\">\n <ExternalLinkIcon />\n </span>\n )}\n </StyledNavItemLink>\n )\n }\n </StyledSideNavListItem>\n );\n};\n\nconst MemoizedSideNavItemContent = memo(SideNavItemContent);\nMemoizedSideNavItemContent.displayName = \"SideNavItemContent\";\n\nexport { MemoizedSideNavItemContent as SideNavItemContent };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/ui-shell/SideNav/SideNavItemContentContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SideNavItemContentContext.js","names":["createContext","useContext","SideNavItemContentContext","isCompact","isSortable","depth","useSideNavItemContent"],"sources":["../../../../src/ui-shell/SideNav/SideNavItemContentContext.tsx"],"sourcesContent":["/!\n Copyright (c) 2024-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 { createContext, useContext } from \"react\";\n\nexport type SideNavItemContentContextValue = {\n isCompact?: boolean;\n isSortable?: boolean;\n ~~depth: number;\n~~};\n\nexport const SideNavItemContentContext =\n createContext<SideNavItemContentContextValue>({\n isCompact: false,\n isSortable: false,\n depth: 1,\n });\n\nexport const useSideNavItemContent = () =>\n useContext(SideNavItemContentContext);\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAQjD,OAAO,MAAMC,yBAAyB,GACpCF,aAAa,CAAiC;EAC5CG,SAAS,EAAE,KAAK;EAChBC,UAAU,EAAE,KAAK;EACjBC,KAAK,EAAE;AACT,CAAC,CAAC;AAEJ,OAAO,MAAMC,qBAAqB,GAAGA,CAAA,KACnCL,UAAU,CAACC,yBAAyB,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"SideNavItemContentContext.js","names":["createContext","useContext","SideNavItemContentContext","isCompact","isSortable","depth","useSideNavItemContent"],"sources":["../../../../src/ui-shell/SideNav/SideNavItemContentContext.tsx"],"sourcesContent":["/!\n Copyright (c) 2024-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 { createContext, useContext } from \"react\";\n\nexport type SideNavItemContentContextValue = {\n depth: number;\n isCompact?: boolean;\n isSortable?: boolean;\n};\n\nexport const SideNavItemContentContext =\n createContext<SideNavItemContentContextValue>({\n isCompact: false,\n isSortable: false,\n depth: 1,\n });\n\nexport const useSideNavItemContent = () =>\n useContext(SideNavItemContentContext);\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAQjD,OAAO,MAAMC,yBAAyB,GACpCF,aAAa,CAAiC;EAC5CG,SAAS,EAAE,KAAK;EAChBC,UAAU,EAAE,KAAK;EACjBC,KAAK,EAAE;AACT,CAAC,CAAC;AAEJ,OAAO,MAAMC,qBAAqB,GAAGA,CAAA,KACnCL,UAAU,CAACC,yBAAyB,CAAC","ignoreList":[]}

package/dist/esm/ui-shell/SideNav/SideNavItemLinkContent.js CHANGED Viewed

@@ -12,10 +12,10 @@
 import styled from "@emotion/styled";
 import { memo, useMemo } from "react";
-import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { Badge } from "../../Badge.js";
 import { Box } from "../../Box.js";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
 import { Status } from "../../Status.js";
-import { Badge } from "../../Badge.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const SideNavItemLabelContainer = styled("div", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isIconVisible"
@@ -49,14 +49,14 @@ const SideNavItemLinkContent = ({
   }), [odysseyDesignTokens]);
   return _jsxs(_Fragment, {
     children: [startIcon && startIcon, _jsxs(SideNavItemLabelContainer, {
-      odysseyDesignTokens: odysseyDesignTokens,
       isIconVisible: Boolean(startIcon),
+      odysseyDesignTokens: odysseyDesignTokens,
       translate: translate,
       children: [label, !count && severity && _jsx(Box, {
         sx: sideNavItemContentStyles,
         children: severity && _jsx(Status, {
-          severity: severity,
-          label: statusLabel || ""
+          label: statusLabel || "",
+          severity: severity
         })
       }), !severity && count && _jsx(Box, {
         sx: sideNavItemContentStyles,

package/dist/esm/ui-shell/SideNav/SideNavItemLinkContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SideNavItemLinkContent.js","names":["styled","memo","useMemo","~~useOdysseyDesignTokens~~","Box","~~Status~~","~~Badge~~","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","SideNavItemLabelContainer","shouldForwardProp","prop","odysseyDesignTokens","isIconVisible","alignItems","display","flexWrap","fontSize","TypographySizeBody","marginInlineStart","Spacing3","overflowWrap","width","SideNavItemLinkContent","count","label","startIcon","endIcon","severity","statusLabel","translate","sideNavItemContentStyles","gap","Spacing1","Spacing2","children","Boolean","sx","badgeContent","MemoizedSideNavItemLinkContent","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavItemLinkContent.tsx"],"sourcesContent":["/!\n Copyright (c) 2024-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 styled from \"@emotion/styled\";\nimport { memo, ReactNode, useMemo } from \"react\";\nimport ~~{\n~~ type ~~DesignTokens,\n useOdysseyDesignTokens,\n~~} from \"~~../../OdysseyDesignTokensContext~~.js\";\nimport { ~~Box~~ } from \"../../~~Box~~.js\";\nimport { ~~Status~~ } from \"../../~~Status~~.js\";\nimport type ~~{ SideNavItem~~ } from \"~~./types~~.js\";\nimport { ~~Badge~~ } from \"../../~~Badge~~.js\";\n\nconst SideNavItemLabelContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" && prop !== \"isIconVisible\",\n})<{\n ~~odysseyDesignTokens~~: ~~DesignTokens~~;\n ~~isIconVisible~~: ~~boolean~~;\n}>(({ odysseyDesignTokens, isIconVisible }) => ({\n alignItems: \"center\",\n display: \"flex\",\n flexWrap: \"wrap\",\n fontSize: odysseyDesignTokens.TypographySizeBody,\n marginInlineStart: isIconVisible ? odysseyDesignTokens.Spacing3 : 0,\n overflowWrap: \"anywhere\", // New way to do `wordBreak: \"break-word\"`. Source: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word\n width: \"100%\",\n}));\n\nconst SideNavItemLinkContent = ({\n count,\n label,\n startIcon,\n endIcon,\n severity,\n statusLabel,\n translate,\n}: Pick<\n SideNavItem,\n \| \"count\"\n \| \"label\"\n \| \"startIcon\"\n \| \"endIcon\"\n \| \"severity\"\n \| \"statusLabel\"\n \| \"translate\"\n>): ReactNode => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n\n const sideNavItemContentStyles = useMemo(\n () => ({\n alignItems: \"center\",\n display: \"flex\",\n gap: odysseyDesignTokens.Spacing1,\n marginInlineStart: odysseyDesignTokens.Spacing2,\n }),\n [odysseyDesignTokens],\n );\n\n return (\n <>\n {startIcon && startIcon}\n <SideNavItemLabelContainer\n ~~odysseyDesignTokens~~={~~odysseyDesignTokens~~}\n ~~isIconVisible~~={~~Boolean(startIcon)~~}\n translate={translate}\n >\n {label}\n {!count && severity && (\n <Box sx={sideNavItemContentStyles}>\n {severity && (\n <Status ~~severity={severity}~~ label={statusLabel \|\| \"\"} />\n )}\n </Box>\n )}\n {!severity && count && (\n <Box sx={sideNavItemContentStyles}>\n {count && <Badge badgeContent={count} />}\n </Box>\n )}\n </SideNavItemLabelContainer>\n {endIcon && endIcon}\n </>\n );\n};\nconst MemoizedSideNavItemLinkContent = memo(SideNavItemLinkContent);\nMemoizedSideNavItemLinkContent.displayName = \"SideNavItemLinkContent\";\n\nexport { MemoizedSideNavItemLinkContent as SideNavItemLinkContent };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,IAAI,EAAaC,OAAO,QAAQ,OAAO;~~AAChD~~,~~SAEEC~~,~~sBAAsB~~,~~QACjB~~,~~qCAAqC~~;~~AAC5C~~,SAASC,GAAG,QAAQ,cAAc;AAClC,~~SAASC~~,~~MAAM~~,~~QAAQ~~,~~iBAAiB~~;~~AAExC~~,SAASC,~~KAAK~~,QAAQ,~~gBAAgB~~;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;~~AAEvC~~,MAAMC,yBAAyB,GAAGb,MAAM,CAAC,KAAK,EAAE;EAC9Cc,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,qBAAqB,IAAIA,IAAI,KAAK;AAC/C,CAAC,CAAC,CAGC,CAAC;EAAEC,mBAAmB;EAAEC;AAAc,CAAC,MAAM;EAC9CC,UAAU,EAAE,QAAQ;EACpBC,OAAO,EAAE,MAAM;EACfC,QAAQ,EAAE,MAAM;EAChBC,QAAQ,EAAEL,mBAAmB,CAACM,kBAAkB;EAChDC,iBAAiB,EAAEN,aAAa,GAAGD,mBAAmB,CAACQ,QAAQ,GAAG,CAAC;EACnEC,YAAY,EAAE,UAAU;EACxBC,KAAK,EAAE;AACT,CAAC,CAAC,CAAC;AAEH,MAAMC,sBAAsB,GAAGA,CAAC;EAC9BC,KAAK;EACLC,KAAK;EACLC,SAAS;EACTC,OAAO;EACPC,QAAQ;EACRC,WAAW;EACXC;AAUF,CAAC,KAAgB;EACf,MAAMlB,mBAAmB,~~GAAGb~~,sBAAsB,CAAC,CAAC;EAEpD,~~MAAMgC~~,wBAAwB,GAAGjC,OAAO,CACtC,OAAO;IACLgB,UAAU,EAAE,QAAQ;IACpBC,OAAO,EAAE,MAAM;IACfiB,GAAG,EAAEpB,mBAAmB,CAACqB,QAAQ;IACjCd,iBAAiB,EAAEP,mBAAmB,CAACsB;EACzC,CAAC,CAAC,EACF,CAACtB,mBAAmB,CACtB,CAAC;EAED,OACEN,KAAA,CAAAE,SAAA;IAAA2B,QAAA,GACGT,SAAS,IAAIA,SAAS,EACvBpB,KAAA,CAACG,yBAAyB;~~MACxBG~~,~~mBAAmB,EAAEA,mBAAoB;MACzCC,~~aAAa,EAAEuB,OAAO,CAACV,SAAS,CAAE;~~MAClCI~~,SAAS,EAAEA,SAAU;MAAAK,QAAA,GAEpBV,KAAK,EACL,CAACD,KAAK,IAAII,QAAQ,IACjBxB,IAAA,CAACJ,GAAG;QAACqC,EAAE,EAAEN,wBAAyB;QAAAI,QAAA,EAC/BP,QAAQ,IACPxB,IAAA,~~CAACH~~,MAAM;~~UAAC2B~~,~~QAAQ,EAAEA,QAAS;UAACH,~~KAAK,EAAEI,WAAW,IAAI;~~QAAG~~,CAAE;MACxD,CACE,CACN,EACA,~~CAACD~~,QAAQ,IAAIJ,KAAK,IACjBpB,IAAA,CAACJ,GAAG;QAACqC,EAAE,EAAEN,wBAAyB;QAAAI,QAAA,EAC/BX,KAAK,IAAIpB,IAAA,~~CAACF~~,KAAK;~~UAACoC~~,YAAY,EAAEd;QAAM,CAAE;MAAC,CACrC,CACN;IAAA,CACwB,CAAC,EAC3BG,OAAO,IAAIA,OAAO;EAAA,CACnB,CAAC;AAEP,CAAC;AACD,MAAMY,8BAA8B,GAAG1C,IAAI,CAAC0B,sBAAsB,CAAC;AACnEgB,8BAA8B,CAACC,WAAW,GAAG,wBAAwB;AAErE,SAASD,8BAA8B,IAAIhB,sBAAsB","ignoreList":[]}
1	+ {"version":3,"file":"SideNavItemLinkContent.js","names":["styled","memo","useMemo","Badge","Box","useOdysseyDesignTokens","Status","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","SideNavItemLabelContainer","shouldForwardProp","prop","odysseyDesignTokens","isIconVisible","alignItems","display","flexWrap","fontSize","TypographySizeBody","marginInlineStart","Spacing3","overflowWrap","width","SideNavItemLinkContent","count","label","startIcon","endIcon","severity","statusLabel","translate","sideNavItemContentStyles","gap","Spacing1","Spacing2","children","Boolean","sx","badgeContent","MemoizedSideNavItemLinkContent","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavItemLinkContent.tsx"],"sourcesContent":["/!\n Copyright (c) 2024-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 styled from \"@emotion/styled\";\nimport { memo, ReactNode, useMemo } from \"react\";\n\nimport type { SideNavItem } from \"./types.js\";\n\nimport { Badge } from \"../../Badge.js\";\nimport { Box } from \"../../Box.js\";\nimport {\n type DesignTokens,\n useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { Status } from \"../../Status.js\";\n\nconst SideNavItemLabelContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" && prop !== \"isIconVisible\",\n})<{\n isIconVisible: boolean;\n odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens, isIconVisible }) => ({\n alignItems: \"center\",\n display: \"flex\",\n flexWrap: \"wrap\",\n fontSize: odysseyDesignTokens.TypographySizeBody,\n marginInlineStart: isIconVisible ? odysseyDesignTokens.Spacing3 : 0,\n overflowWrap: \"anywhere\", // New way to do `wordBreak: \"break-word\"`. Source: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word\n width: \"100%\",\n}));\n\nconst SideNavItemLinkContent = ({\n count,\n label,\n startIcon,\n endIcon,\n severity,\n statusLabel,\n translate,\n}: Pick<\n SideNavItem,\n \| \"count\"\n \| \"label\"\n \| \"startIcon\"\n \| \"endIcon\"\n \| \"severity\"\n \| \"statusLabel\"\n \| \"translate\"\n>): ReactNode => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n\n const sideNavItemContentStyles = useMemo(\n () => ({\n alignItems: \"center\",\n display: \"flex\",\n gap: odysseyDesignTokens.Spacing1,\n marginInlineStart: odysseyDesignTokens.Spacing2,\n }),\n [odysseyDesignTokens],\n );\n\n return (\n <>\n {startIcon && startIcon}\n <SideNavItemLabelContainer\n isIconVisible={Boolean(startIcon)}\n odysseyDesignTokens={odysseyDesignTokens}\n translate={translate}\n >\n {label}\n {!count && severity && (\n <Box sx={sideNavItemContentStyles}>\n {severity && (\n <Status label={statusLabel \|\| \"\"} severity={severity} />\n )}\n </Box>\n )}\n {!severity && count && (\n <Box sx={sideNavItemContentStyles}>\n {count && <Badge badgeContent={count} />}\n </Box>\n )}\n </SideNavItemLabelContainer>\n {endIcon && endIcon}\n </>\n );\n};\nconst MemoizedSideNavItemLinkContent = memo(SideNavItemLinkContent);\nMemoizedSideNavItemLinkContent.displayName = \"SideNavItemLinkContent\";\n\nexport { MemoizedSideNavItemLinkContent as SideNavItemLinkContent };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,IAAI,EAAaC,OAAO,QAAQ,OAAO;AAIhD,SAASC,KAAK,QAAQ,gBAAgB;AACtC,SAASC,GAAG,QAAQ,cAAc;AAClC,SAEEC,sBAAsB,QACjB,qCAAqC;AAC5C,SAASC,MAAM,QAAQ,iBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAEzC,MAAMC,yBAAyB,GAAGb,MAAM,CAAC,KAAK,EAAE;EAC9Cc,iBAAiB,EAAGC,IAAI,IACtBA,IAAI,KAAK,qBAAqB,IAAIA,IAAI,KAAK;AAC/C,CAAC,CAAC,CAGC,CAAC;EAAEC,mBAAmB;EAAEC;AAAc,CAAC,MAAM;EAC9CC,UAAU,EAAE,QAAQ;EACpBC,OAAO,EAAE,MAAM;EACfC,QAAQ,EAAE,MAAM;EAChBC,QAAQ,EAAEL,mBAAmB,CAACM,kBAAkB;EAChDC,iBAAiB,EAAEN,aAAa,GAAGD,mBAAmB,CAACQ,QAAQ,GAAG,CAAC;EACnEC,YAAY,EAAE,UAAU;EACxBC,KAAK,EAAE;AACT,CAAC,CAAC,CAAC;AAEH,MAAMC,sBAAsB,GAAGA,CAAC;EAC9BC,KAAK;EACLC,KAAK;EACLC,SAAS;EACTC,OAAO;EACPC,QAAQ;EACRC,WAAW;EACXC;AAUF,CAAC,KAAgB;EACf,MAAMlB,mBAAmB,GAAGX,sBAAsB,CAAC,CAAC;EAEpD,MAAM8B,wBAAwB,GAAGjC,OAAO,CACtC,OAAO;IACLgB,UAAU,EAAE,QAAQ;IACpBC,OAAO,EAAE,MAAM;IACfiB,GAAG,EAAEpB,mBAAmB,CAACqB,QAAQ;IACjCd,iBAAiB,EAAEP,mBAAmB,CAACsB;EACzC,CAAC,CAAC,EACF,CAACtB,mBAAmB,CACtB,CAAC;EAED,OACEN,KAAA,CAAAE,SAAA;IAAA2B,QAAA,GACGT,SAAS,IAAIA,SAAS,EACvBpB,KAAA,CAACG,yBAAyB;MACxBI,aAAa,EAAEuB,OAAO,CAACV,SAAS,CAAE;MAClCd,mBAAmB,EAAEA,mBAAoB;MACzCkB,SAAS,EAAEA,SAAU;MAAAK,QAAA,GAEpBV,KAAK,EACL,CAACD,KAAK,IAAII,QAAQ,IACjBxB,IAAA,CAACJ,GAAG;QAACqC,EAAE,EAAEN,wBAAyB;QAAAI,QAAA,EAC/BP,QAAQ,IACPxB,IAAA,CAACF,MAAM;UAACuB,KAAK,EAAEI,WAAW,IAAI,EAAG;UAACD,QAAQ,EAAEA;QAAS,CAAE;MACxD,CACE,CACN,EACA,CAACA,QAAQ,IAAIJ,KAAK,IACjBpB,IAAA,CAACJ,GAAG;QAACqC,EAAE,EAAEN,wBAAyB;QAAAI,QAAA,EAC/BX,KAAK,IAAIpB,IAAA,CAACL,KAAK;UAACuC,YAAY,EAAEd;QAAM,CAAE;MAAC,CACrC,CACN;IAAA,CACwB,CAAC,EAC3BG,OAAO,IAAIA,OAAO;EAAA,CACnB,CAAC;AAEP,CAAC;AACD,MAAMY,8BAA8B,GAAG1C,IAAI,CAAC0B,sBAAsB,CAAC;AACnEgB,8BAA8B,CAACC,WAAW,GAAG,wBAAwB;AAErE,SAASD,8BAA8B,IAAIhB,sBAAsB","ignoreList":[]}

package/dist/esm/ui-shell/SideNav/SideNavLogo.js CHANGED Viewed

@@ -10,8 +10,8 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
-import { memo, useMemo } from "react";
 import styled from "@emotion/styled";
+import { memo, useMemo } from "react";
 import { OktaLogo } from "./OktaLogo.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const StyledLogoContainer = styled("div", {
@@ -43,8 +43,8 @@ const SideNavLogo = ({
     }
     if (imageAltText && imageUrl) {
       return _jsx("img", {
-        src: imageUrl,
-        alt: imageAltText
+        alt: imageAltText,
+        src: imageUrl
       });
     }
     return _jsx(OktaLogo, {});

package/dist/esm/ui-shell/SideNav/SideNavLogo.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SideNavLogo.js","names":["~~memo~~","~~useMemo~~","~~styled~~","OktaLogo","jsx","_jsx","StyledLogoContainer","shouldForwardProp","prop","isLogoInteractive","alignItems","display","height","cursor","StyledLogoLink","SideNavLogo","imageAltText","imageUrl","logoComponent","optionalProps","logo","~~src~~","~~alt~~","ariaLabel","href","onClick","children","Boolean","role","MemoizedSideNavLogo","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavLogo.tsx"],"sourcesContent":["/!\n Copyright (c) 2024-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, useMemo }~~ from \"~~react~~\";\nimport ~~styled~~ from \"~~@emotion/styled~~\";\n\nimport { OktaLogo } from \"./OktaLogo.js\";\nimport { SideNavLogoProps } from \"./types.js\";\n\nconst StyledLogoContainer = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"isLogoInteractive\",\n})<{\n isLogoInteractive?: boolean;\n}>(({ isLogoInteractive }) => ({\n alignItems: \"center\",\n display: \"flex\",\n height: \"100%\",\n\n ...(isLogoInteractive && {\n cursor: \"pointer\",\n }),\n}));\n\nconst StyledLogoLink = styled(\"a\")(() => ({\n alignItems: \"center\",\n display: \"flex\",\n height: \"100%\",\n}));\n\nconst SideNavLogo = ({\n imageAltText,\n imageUrl,\n logoComponent,\n ...optionalProps\n}: SideNavLogoProps) => {\n const logo = useMemo(() => {\n if (logoComponent) {\n return logoComponent;\n }\n\n if (imageAltText && imageUrl) {\n return <img ~~src~~={~~imageUrl~~} ~~alt~~={~~imageAltText~~} />;\n }\n\n return <OktaLogo />;\n }, [imageAltText, logoComponent, imageUrl]);\n\n return \"href\" in optionalProps && \"ariaLabel\" in optionalProps ? (\n <StyledLogoLink\n aria-label={optionalProps.ariaLabel}\n data-se=\"sidenav-header-logo\"\n href={optionalProps.href}\n onClick={optionalProps.onClick}\n >\n {logo}\n </StyledLogoLink>\n ) : (\n <StyledLogoContainer\n aria-label={optionalProps.ariaLabel}\n data-se=\"sidenav-header-logo\"\n isLogoInteractive={Boolean(optionalProps.onClick) \|\| optionalProps.href}\n onClick={optionalProps.onClick}\n role=\"presentation\"\n >\n {logo}\n </StyledLogoContainer>\n );\n};\n\nconst MemoizedSideNavLogo = memo(SideNavLogo);\nMemoizedSideNavLogo.displayName = \"SideNavLogo\";\n\nexport { MemoizedSideNavLogo as SideNavLogo };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,~~SAASA~~,IAAI,EAAEC,OAAO,QAAQ,OAAO;~~AACrC~~,~~OAAOC,MAAM,MAAM,iBAAiB;AAEpC,~~SAASC,QAAQ,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGzC,MAAMC,mBAAmB,~~GAAGJ~~,MAAM,CAAC,KAAK,EAAE;~~EACxCK~~,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAEC,CAAC;EAAEC;AAAkB,CAAC,MAAM;EAC7BC,UAAU,EAAE,QAAQ;EACpBC,OAAO,EAAE,MAAM;EACfC,MAAM,EAAE,MAAM;EAEd,IAAIH,iBAAiB,IAAI;IACvBI,MAAM,EAAE;EACV,CAAC;AACH,CAAC,CAAC,CAAC;AAEH,MAAMC,cAAc,~~GAAGZ~~,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO;~~EACxCQ~~,UAAU,EAAE,QAAQ;EACpBC,OAAO,EAAE,MAAM;EACfC,MAAM,EAAE;AACV,CAAC,CAAC,CAAC;AAEH,MAAMG,WAAW,GAAGA,CAAC;EACnBC,YAAY;EACZC,QAAQ;EACRC,aAAa;EACb,GAAGC;AACa,CAAC,KAAK;EACtB,MAAMC,IAAI,~~GAAGnB~~,OAAO,CAAC,MAAM;IACzB,~~IAAIiB~~,aAAa,EAAE;MACjB,OAAOA,aAAa;IACtB;IAEA,IAAIF,YAAY,IAAIC,QAAQ,EAAE;MAC5B,OAAOZ,IAAA;QAAKgB,GAAG,~~EAAEJ~~,~~QAAS~~;~~QAACK~~,GAAG,~~EAAEN~~;~~MAAa~~,CAAE,CAAC;IAClD;IAEA,~~OAAOX~~,IAAA,CAACF,QAAQ,IAAE,CAAC;EACrB,CAAC,EAAE,CAACa,YAAY,EAAEE,aAAa,EAAED,QAAQ,CAAC,CAAC;EAE3C,OAAO,MAAM,IAAIE,aAAa,IAAI,WAAW,IAAIA,aAAa,GAC5Dd,IAAA,CAACS,cAAc;IACb,cAAYK,aAAa,CAACI,SAAU;IACpC,WAAQ,qBAAqB;IAC7BC,IAAI,EAAEL,aAAa,CAACK,IAAK;IACzBC,OAAO,EAAEN,aAAa,CAACM,OAAQ;IAAAC,QAAA,EAE9BN;EAAI,CACS,CAAC,GAEjBf,IAAA,CAACC,mBAAmB;IAClB,cAAYa,aAAa,CAACI,SAAU;IACpC,WAAQ,qBAAqB;IAC7Bd,iBAAiB,EAAEkB,OAAO,CAACR,aAAa,CAACM,OAAO,CAAC,IAAIN,aAAa,CAACK,IAAK;IACxEC,OAAO,EAAEN,aAAa,CAACM,OAAQ;IAC/BG,IAAI,EAAC,cAAc;IAAAF,QAAA,EAElBN;EAAI,CACc,CACtB;AACH,CAAC;AAED,MAAMS,mBAAmB,~~GAAG7B~~,IAAI,~~CAACe~~,WAAW,CAAC;AAC7Cc,mBAAmB,CAACC,WAAW,GAAG,aAAa;AAE/C,SAASD,mBAAmB,IAAId,WAAW","ignoreList":[]}
1	+ {"version":3,"file":"SideNavLogo.js","names":["styled","memo","useMemo","OktaLogo","jsx","_jsx","StyledLogoContainer","shouldForwardProp","prop","isLogoInteractive","alignItems","display","height","cursor","StyledLogoLink","SideNavLogo","imageAltText","imageUrl","logoComponent","optionalProps","logo","alt","src","ariaLabel","href","onClick","children","Boolean","role","MemoizedSideNavLogo","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavLogo.tsx"],"sourcesContent":["/!\n Copyright (c) 2024-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 styled from \"@emotion/styled\";\nimport { memo, useMemo } from \"react\";\n\nimport { OktaLogo } from \"./OktaLogo.js\";\nimport { SideNavLogoProps } from \"./types.js\";\n\nconst StyledLogoContainer = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"isLogoInteractive\",\n})<{\n isLogoInteractive?: boolean;\n}>(({ isLogoInteractive }) => ({\n alignItems: \"center\",\n display: \"flex\",\n height: \"100%\",\n\n ...(isLogoInteractive && {\n cursor: \"pointer\",\n }),\n}));\n\nconst StyledLogoLink = styled(\"a\")(() => ({\n alignItems: \"center\",\n display: \"flex\",\n height: \"100%\",\n}));\n\nconst SideNavLogo = ({\n imageAltText,\n imageUrl,\n logoComponent,\n ...optionalProps\n}: SideNavLogoProps) => {\n const logo = useMemo(() => {\n if (logoComponent) {\n return logoComponent;\n }\n\n if (imageAltText && imageUrl) {\n return <img alt={imageAltText} src={imageUrl} />;\n }\n\n return <OktaLogo />;\n }, [imageAltText, logoComponent, imageUrl]);\n\n return \"href\" in optionalProps && \"ariaLabel\" in optionalProps ? (\n <StyledLogoLink\n aria-label={optionalProps.ariaLabel}\n data-se=\"sidenav-header-logo\"\n href={optionalProps.href}\n onClick={optionalProps.onClick}\n >\n {logo}\n </StyledLogoLink>\n ) : (\n <StyledLogoContainer\n aria-label={optionalProps.ariaLabel}\n data-se=\"sidenav-header-logo\"\n isLogoInteractive={Boolean(optionalProps.onClick) \|\| optionalProps.href}\n onClick={optionalProps.onClick}\n role=\"presentation\"\n >\n {logo}\n </StyledLogoContainer>\n );\n};\n\nconst MemoizedSideNavLogo = memo(SideNavLogo);\nMemoizedSideNavLogo.displayName = \"SideNavLogo\";\n\nexport { MemoizedSideNavLogo as SideNavLogo };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,IAAI,EAAEC,OAAO,QAAQ,OAAO;AAErC,SAASC,QAAQ,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGzC,MAAMC,mBAAmB,GAAGN,MAAM,CAAC,KAAK,EAAE;EACxCO,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAEC,CAAC;EAAEC;AAAkB,CAAC,MAAM;EAC7BC,UAAU,EAAE,QAAQ;EACpBC,OAAO,EAAE,MAAM;EACfC,MAAM,EAAE,MAAM;EAEd,IAAIH,iBAAiB,IAAI;IACvBI,MAAM,EAAE;EACV,CAAC;AACH,CAAC,CAAC,CAAC;AAEH,MAAMC,cAAc,GAAGd,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO;EACxCU,UAAU,EAAE,QAAQ;EACpBC,OAAO,EAAE,MAAM;EACfC,MAAM,EAAE;AACV,CAAC,CAAC,CAAC;AAEH,MAAMG,WAAW,GAAGA,CAAC;EACnBC,YAAY;EACZC,QAAQ;EACRC,aAAa;EACb,GAAGC;AACa,CAAC,KAAK;EACtB,MAAMC,IAAI,GAAGlB,OAAO,CAAC,MAAM;IACzB,IAAIgB,aAAa,EAAE;MACjB,OAAOA,aAAa;IACtB;IAEA,IAAIF,YAAY,IAAIC,QAAQ,EAAE;MAC5B,OAAOZ,IAAA;QAAKgB,GAAG,EAAEL,YAAa;QAACM,GAAG,EAAEL;MAAS,CAAE,CAAC;IAClD;IAEA,OAAOZ,IAAA,CAACF,QAAQ,IAAE,CAAC;EACrB,CAAC,EAAE,CAACa,YAAY,EAAEE,aAAa,EAAED,QAAQ,CAAC,CAAC;EAE3C,OAAO,MAAM,IAAIE,aAAa,IAAI,WAAW,IAAIA,aAAa,GAC5Dd,IAAA,CAACS,cAAc;IACb,cAAYK,aAAa,CAACI,SAAU;IACpC,WAAQ,qBAAqB;IAC7BC,IAAI,EAAEL,aAAa,CAACK,IAAK;IACzBC,OAAO,EAAEN,aAAa,CAACM,OAAQ;IAAAC,QAAA,EAE9BN;EAAI,CACS,CAAC,GAEjBf,IAAA,CAACC,mBAAmB;IAClB,cAAYa,aAAa,CAACI,SAAU;IACpC,WAAQ,qBAAqB;IAC7Bd,iBAAiB,EAAEkB,OAAO,CAACR,aAAa,CAACM,OAAO,CAAC,IAAIN,aAAa,CAACK,IAAK;IACxEC,OAAO,EAAEN,aAAa,CAACM,OAAQ;IAC/BG,IAAI,EAAC,cAAc;IAAAF,QAAA,EAElBN;EAAI,CACc,CACtB;AACH,CAAC;AAED,MAAMS,mBAAmB,GAAG5B,IAAI,CAACc,WAAW,CAAC;AAC7Cc,mBAAmB,CAACC,WAAW,GAAG,aAAa;AAE/C,SAASD,mBAAmB,IAAId,WAAW","ignoreList":[]}

package/dist/esm/ui-shell/SideNav/SideNavToggleButton.js CHANGED Viewed

@@ -10,14 +10,15 @@ import _Button from "@mui/material/Button";
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-import { memo, useCallback, useEffect, useMemo, useRef } from "react";
 import styled from "@emotion/styled";
+import { memo, useCallback, useEffect, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
+import { ChevronRightIcon } from "../../icons.generated/ChevronRight.js";
 import { MuiPropsContext } from "../../MuiPropsContext.js";
 import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
 import { Tooltip } from "../../Tooltip.js";
 import { UI_SHELL_OVERLAY_Z_INDEX } from "../uiShellSharedConstants.js";
-import { ChevronRightIcon } from "../../icons.generated/ChevronRight.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const SIDE_NAV_TOGGLE_ICON_SIZE = 24;
 export const SIDE_NAV_TOGGLE_ICON_HALF_SIZE = SIDE_NAV_TOGGLE_ICON_SIZE / 2;

package/dist/esm/ui-shell/SideNav/SideNavToggleButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SideNavToggleButton.js","names":["memo","useCallback","useEffect","useMemo","useRef","styled","useTranslation","MuiPropsContext","useOdysseyDesignTokens","Tooltip","UI_SHELL_OVERLAY_Z_INDEX","ChevronRightIcon","jsx","_jsx","SIDE_NAV_TOGGLE_ICON_SIZE","SIDE_NAV_TOGGLE_ICON_HALF_SIZE","StyledToggleButton","_Button","shouldForwardProp","prop","clickAreaPadding","odysseyDesignTokens","border","height","left","padding","position","width","zIndex","backgroundColor","borderColor","boxShadow","color","PalettePrimaryText","outline","HueNeutralWhite","borderRadius","ShadowScale1","content","top","StyledChevronRightIcon","isSideNavCollapsed","fontSize","undefined","right","transform","transitionDuration","TransitionDurationMain","transitionProperty","transitionTimingFunction","defaultLocalButton","window","document","createElement","SideNavToggleButton","ariaControls","id","onClick","onHighlight","tabIndex","t","buttonRef","setHighlighted","setUnhighlighted","setFocusHighlighted","Boolean","current","matches","addEventListener","removeEventListener","toggleLabel","renderButton","muiProps","ref","element","variant","children","ariaType","placement","text","Consumer","MemoizedSideNavToggleButton","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavToggleButton.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 useCallback,\n useEffect,\n useMemo,\n useRef,\n} from \"react\";\nimport styled from \"@emotion/styled\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { MuiPropsContext, MuiPropsContextType } from \"../../MuiPropsContext.js\";\nimport {\n DesignTokens,\n useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { Tooltip } from \"../../Tooltip.js\";\nimport { UI_SHELL_OVERLAY_Z_INDEX } from \"../uiShellSharedConstants.js\";\nimport { ChevronRightIcon } from \"../../icons.generated/ChevronRight.js\";\n\nexport const SIDE_NAV_TOGGLE_ICON_SIZE = 24;\nexport const SIDE_NAV_TOGGLE_ICON_HALF_SIZE = SIDE_NAV_TOGGLE_ICON_SIZE / 2;\n\nconst StyledToggleButton = styled(MuiButton, {\n shouldForwardProp: (prop) =>\n prop !== \"clickAreaPadding\" && prop !== \"odysseyDesignTokens\",\n})<{\n clickAreaPadding: number;\n odysseyDesignTokens: DesignTokens;\n}>(({ clickAreaPadding, odysseyDesignTokens }) => ({\n border: 0,\n height: `${SIDE_NAV_TOGGLE_ICON_SIZE}px`,\n left: `-${clickAreaPadding 2}px`,\n padding: 0,\n position: \"relative\",\n width: `calc(${SIDE_NAV_TOGGLE_ICON_SIZE}px + (${clickAreaPadding}px * 2))`,\n zIndex: UI_SHELL_OVERLAY_Z_INDEX,\n\n // `&&` is a CSS specificity override. Used here to counteract MUI Button styles.\n \"&&\": {\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n boxShadow: \"none\",\n color: odysseyDesignTokens.PalettePrimaryText,\n },\n\n \"&:focus-visible\": {\n outline: \"none\",\n },\n\n \"&:hover, &:focus-visible\": {\n color: odysseyDesignTokens.HueNeutralWhite,\n },\n\n \"&::before\": {\n backgroundColor: odysseyDesignTokens.HueNeutralWhite,\n borderColor: \"transparent\",\n borderRadius: \"50%\",\n boxShadow: odysseyDesignTokens.ShadowScale1,\n color: odysseyDesignTokens.PalettePrimaryText,\n content: \"''\",\n height: `${SIDE_NAV_TOGGLE_ICON_SIZE}px`,\n left: `${clickAreaPadding * 2}px`,\n position: \"absolute\",\n top: 0,\n width: `${SIDE_NAV_TOGGLE_ICON_SIZE}px`,\n },\n\n \"&:hover::before, &:focus-visible::before\": {\n backgroundColor: odysseyDesignTokens.PalettePrimaryText,\n },\n}));\n\nconst StyledChevronRightIcon = styled(ChevronRightIcon, {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" && prop !== \"isSideNavCollapsed\",\n})<{\n isSideNavCollapsed: boolean;\n odysseyDesignTokens: DesignTokens;\n}>(({ isSideNavCollapsed, odysseyDesignTokens }) => ({\n fontSize: \"125%\",\n left: isSideNavCollapsed ? undefined : \"4px\",\n position: \"absolute\",\n right: isSideNavCollapsed ? \"4px\" : undefined,\n top: \"3px\",\n transform: isSideNavCollapsed ? \"rotate(0deg)\" : \"rotate(-180deg)\", // Leave this as `-180deg` so it rotates over the top, not the bottom.\n transitionDuration: odysseyDesignTokens.TransitionDurationMain,\n transitionProperty: \"transform\",\n transitionTimingFunction: \"ease-in-out\",\n}));\n\nexport type SideNavToggleButtonProps = {\n /*\n The `id` of the item this button controls\n /\n ariaControls: string;\n /\n Left padding in pixels for the click area of the button.\n \n Useful when moving the button around when trying to click it. This ensures the click area doesn't move to the right along with the button.\n /\n clickAreaPadding?: number;\n /\n HTML `id` attribute for the `<button>` element.\n /\n id?: string;\n isSideNavCollapsed: boolean;\n tabIndex?: HTMLAttributes<HTMLElement>[\"tabIndex\"];\n /\n Click event handler for the `<button>` element.\n /\n onClick?: MuiButtonProps[\"onClick\"];\n /\n Provides the hovered or focused state of the `<button>` element.\n */\n onHighlight?: (isHighlighted: boolean) => void;\n onKeyDown?: MuiButtonProps[\"onKeyDown\"];\n};\n\n// This allows us to mutate the value with TypeScript. A singleton is fine because it gets overridden on render.\nconst defaultLocalButton =\n typeof window === \"undefined\" ? null : document.createElement(\"button\");\n\nconst SideNavToggleButton = ({\n ariaControls,\n clickAreaPadding = 0,\n id,\n isSideNavCollapsed,\n onClick,\n onHighlight,\n tabIndex,\n}: SideNavToggleButtonProps) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n const { t } = useTranslation();\n\n const buttonRef = useRef(defaultLocalButton);\n\n useEffect(() => {\n const setHighlighted = () => {\n onHighlight?.(true);\n };\n\n const setUnhighlighted = () => {\n onHighlight?.(false);\n };\n\n const setFocusHighlighted = () => {\n onHighlight?.(Boolean(buttonRef.current?.matches(\":focus-visible\")));\n };\n\n buttonRef.current?.addEventListener(\"mouseenter\", setHighlighted);\n\n buttonRef.current?.addEventListener(\"mouseleave\", setUnhighlighted);\n\n buttonRef.current?.addEventListener(\"focus\", setFocusHighlighted, true);\n\n buttonRef.current?.addEventListener(\"blur\", setFocusHighlighted, true);\n\n setUnhighlighted();\n\n return () => {\n buttonRef.current?.removeEventListener(\"mouseenter\", setHighlighted);\n\n buttonRef.current?.removeEventListener(\"mouseleave\", setUnhighlighted);\n\n buttonRef.current?.removeEventListener(\n \"focus\",\n setFocusHighlighted,\n true,\n );\n\n buttonRef.current?.removeEventListener(\"blur\", setFocusHighlighted, true);\n };\n }, [onHighlight]);\n\n const toggleLabel = useMemo(\n () =>\n isSideNavCollapsed\n ? t(\"sidenav.toggle.expand\")\n : t(\"sidenav.toggle.collapse\"),\n [isSideNavCollapsed, t],\n );\n\n const renderButton = useCallback(\n (muiProps: MuiPropsContextType) => {\n return (\n <StyledToggleButton\n {...muiProps}\n aria-controls={ariaControls}\n aria-expanded={!isSideNavCollapsed}\n aria-label={toggleLabel}\n clickAreaPadding={clickAreaPadding}\n data-se=\"sidenav-toggle-button\"\n data-sidenav-toggle\n id={id}\n odysseyDesignTokens={odysseyDesignTokens}\n onClick={onClick}\n ref={(element: HTMLButtonElement) => {\n if (element) {\n buttonRef.current = element;\n //@ts-expect-error `ref` is an optional prop, but TypeScript doesn't know this.\n muiProps.ref?.(element);\n }\n }}\n tabIndex={tabIndex}\n variant=\"floating\"\n >\n <StyledChevronRightIcon\n isSideNavCollapsed={isSideNavCollapsed}\n odysseyDesignTokens={odysseyDesignTokens}\n />\n </StyledToggleButton>\n );\n },\n [\n ariaControls,\n clickAreaPadding,\n id,\n isSideNavCollapsed,\n odysseyDesignTokens,\n onClick,\n tabIndex,\n toggleLabel,\n ],\n );\n\n return (\n <Tooltip ariaType=\"description\" placement=\"right\" text={toggleLabel}>\n <MuiPropsContext.Consumer>{renderButton}</MuiPropsContext.Consumer>\n </Tooltip>\n );\n};\n\nconst MemoizedSideNavToggleButton = memo(SideNavToggleButton);\nMemoizedSideNavToggleButton.displayName = \"SideNavToggleButton\";\n\nexport { MemoizedSideNavToggleButton as SideNavToggleButton };\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"SideNavToggleButton.js","names":["styled","memo","useCallback","useEffect","useMemo","useRef","useTranslation","ChevronRightIcon","MuiPropsContext","useOdysseyDesignTokens","Tooltip","UI_SHELL_OVERLAY_Z_INDEX","jsx","_jsx","SIDE_NAV_TOGGLE_ICON_SIZE","SIDE_NAV_TOGGLE_ICON_HALF_SIZE","StyledToggleButton","_Button","shouldForwardProp","prop","clickAreaPadding","odysseyDesignTokens","border","height","left","padding","position","width","zIndex","backgroundColor","borderColor","boxShadow","color","PalettePrimaryText","outline","HueNeutralWhite","borderRadius","ShadowScale1","content","top","StyledChevronRightIcon","isSideNavCollapsed","fontSize","undefined","right","transform","transitionDuration","TransitionDurationMain","transitionProperty","transitionTimingFunction","defaultLocalButton","window","document","createElement","SideNavToggleButton","ariaControls","id","onClick","onHighlight","tabIndex","t","buttonRef","setHighlighted","setUnhighlighted","setFocusHighlighted","Boolean","current","matches","addEventListener","removeEventListener","toggleLabel","renderButton","muiProps","ref","element","variant","children","ariaType","placement","text","Consumer","MemoizedSideNavToggleButton","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavToggleButton.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 type { ButtonProps as MuiButtonProps } from \"@mui/material\";\n\nimport styled from \"@emotion/styled\";\nimport { Button as MuiButton } from \"@mui/material\";\nimport {\n HTMLAttributes,\n memo,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n} from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { ChevronRightIcon } from \"../../icons.generated/ChevronRight.js\";\nimport { MuiPropsContext, MuiPropsContextType } from \"../../MuiPropsContext.js\";\nimport {\n DesignTokens,\n useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { Tooltip } from \"../../Tooltip.js\";\nimport { UI_SHELL_OVERLAY_Z_INDEX } from \"../uiShellSharedConstants.js\";\n\nexport const SIDE_NAV_TOGGLE_ICON_SIZE = 24;\nexport const SIDE_NAV_TOGGLE_ICON_HALF_SIZE = SIDE_NAV_TOGGLE_ICON_SIZE / 2;\n\nconst StyledToggleButton = styled(MuiButton, {\n shouldForwardProp: (prop) =>\n prop !== \"clickAreaPadding\" && prop !== \"odysseyDesignTokens\",\n})<{\n clickAreaPadding: number;\n odysseyDesignTokens: DesignTokens;\n}>(({ clickAreaPadding, odysseyDesignTokens }) => ({\n border: 0,\n height: `${SIDE_NAV_TOGGLE_ICON_SIZE}px`,\n left: `-${clickAreaPadding 2}px`,\n padding: 0,\n position: \"relative\",\n width: `calc(${SIDE_NAV_TOGGLE_ICON_SIZE}px + (${clickAreaPadding}px * 2))`,\n zIndex: UI_SHELL_OVERLAY_Z_INDEX,\n\n // `&&` is a CSS specificity override. Used here to counteract MUI Button styles.\n \"&&\": {\n backgroundColor: \"transparent\",\n borderColor: \"transparent\",\n boxShadow: \"none\",\n color: odysseyDesignTokens.PalettePrimaryText,\n },\n\n \"&:focus-visible\": {\n outline: \"none\",\n },\n\n \"&:hover, &:focus-visible\": {\n color: odysseyDesignTokens.HueNeutralWhite,\n },\n\n \"&::before\": {\n backgroundColor: odysseyDesignTokens.HueNeutralWhite,\n borderColor: \"transparent\",\n borderRadius: \"50%\",\n boxShadow: odysseyDesignTokens.ShadowScale1,\n color: odysseyDesignTokens.PalettePrimaryText,\n content: \"''\",\n height: `${SIDE_NAV_TOGGLE_ICON_SIZE}px`,\n left: `${clickAreaPadding * 2}px`,\n position: \"absolute\",\n top: 0,\n width: `${SIDE_NAV_TOGGLE_ICON_SIZE}px`,\n },\n\n \"&:hover::before, &:focus-visible::before\": {\n backgroundColor: odysseyDesignTokens.PalettePrimaryText,\n },\n}));\n\nconst StyledChevronRightIcon = styled(ChevronRightIcon, {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" && prop !== \"isSideNavCollapsed\",\n})<{\n isSideNavCollapsed: boolean;\n odysseyDesignTokens: DesignTokens;\n}>(({ isSideNavCollapsed, odysseyDesignTokens }) => ({\n fontSize: \"125%\",\n left: isSideNavCollapsed ? undefined : \"4px\",\n position: \"absolute\",\n right: isSideNavCollapsed ? \"4px\" : undefined,\n top: \"3px\",\n transform: isSideNavCollapsed ? \"rotate(0deg)\" : \"rotate(-180deg)\", // Leave this as `-180deg` so it rotates over the top, not the bottom.\n transitionDuration: odysseyDesignTokens.TransitionDurationMain,\n transitionProperty: \"transform\",\n transitionTimingFunction: \"ease-in-out\",\n}));\n\nexport type SideNavToggleButtonProps = {\n /*\n The `id` of the item this button controls\n /\n ariaControls: string;\n /\n Left padding in pixels for the click area of the button.\n \n Useful when moving the button around when trying to click it. This ensures the click area doesn't move to the right along with the button.\n /\n clickAreaPadding?: number;\n /\n HTML `id` attribute for the `<button>` element.\n /\n id?: string;\n isSideNavCollapsed: boolean;\n /\n Click event handler for the `<button>` element.\n /\n onClick?: MuiButtonProps[\"onClick\"];\n /\n Provides the hovered or focused state of the `<button>` element.\n */\n onHighlight?: (isHighlighted: boolean) => void;\n onKeyDown?: MuiButtonProps[\"onKeyDown\"];\n tabIndex?: HTMLAttributes<HTMLElement>[\"tabIndex\"];\n};\n\n// This allows us to mutate the value with TypeScript. A singleton is fine because it gets overridden on render.\nconst defaultLocalButton =\n typeof window === \"undefined\" ? null : document.createElement(\"button\");\n\nconst SideNavToggleButton = ({\n ariaControls,\n clickAreaPadding = 0,\n id,\n isSideNavCollapsed,\n onClick,\n onHighlight,\n tabIndex,\n}: SideNavToggleButtonProps) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n const { t } = useTranslation();\n\n const buttonRef = useRef(defaultLocalButton);\n\n useEffect(() => {\n const setHighlighted = () => {\n onHighlight?.(true);\n };\n\n const setUnhighlighted = () => {\n onHighlight?.(false);\n };\n\n const setFocusHighlighted = () => {\n onHighlight?.(Boolean(buttonRef.current?.matches(\":focus-visible\")));\n };\n\n buttonRef.current?.addEventListener(\"mouseenter\", setHighlighted);\n\n buttonRef.current?.addEventListener(\"mouseleave\", setUnhighlighted);\n\n buttonRef.current?.addEventListener(\"focus\", setFocusHighlighted, true);\n\n buttonRef.current?.addEventListener(\"blur\", setFocusHighlighted, true);\n\n setUnhighlighted();\n\n return () => {\n buttonRef.current?.removeEventListener(\"mouseenter\", setHighlighted);\n\n buttonRef.current?.removeEventListener(\"mouseleave\", setUnhighlighted);\n\n buttonRef.current?.removeEventListener(\n \"focus\",\n setFocusHighlighted,\n true,\n );\n\n buttonRef.current?.removeEventListener(\"blur\", setFocusHighlighted, true);\n };\n }, [onHighlight]);\n\n const toggleLabel = useMemo(\n () =>\n isSideNavCollapsed\n ? t(\"sidenav.toggle.expand\")\n : t(\"sidenav.toggle.collapse\"),\n [isSideNavCollapsed, t],\n );\n\n const renderButton = useCallback(\n (muiProps: MuiPropsContextType) => {\n return (\n <StyledToggleButton\n {...muiProps}\n aria-controls={ariaControls}\n aria-expanded={!isSideNavCollapsed}\n aria-label={toggleLabel}\n clickAreaPadding={clickAreaPadding}\n data-se=\"sidenav-toggle-button\"\n data-sidenav-toggle\n id={id}\n odysseyDesignTokens={odysseyDesignTokens}\n onClick={onClick}\n ref={(element: HTMLButtonElement) => {\n if (element) {\n buttonRef.current = element;\n //@ts-expect-error `ref` is an optional prop, but TypeScript doesn't know this.\n muiProps.ref?.(element);\n }\n }}\n tabIndex={tabIndex}\n variant=\"floating\"\n >\n <StyledChevronRightIcon\n isSideNavCollapsed={isSideNavCollapsed}\n odysseyDesignTokens={odysseyDesignTokens}\n />\n </StyledToggleButton>\n );\n },\n [\n ariaControls,\n clickAreaPadding,\n id,\n isSideNavCollapsed,\n odysseyDesignTokens,\n onClick,\n tabIndex,\n toggleLabel,\n ],\n );\n\n return (\n <Tooltip ariaType=\"description\" placement=\"right\" text={toggleLabel}>\n <MuiPropsContext.Consumer>{renderButton}</MuiPropsContext.Consumer>\n </Tooltip>\n );\n};\n\nconst MemoizedSideNavToggleButton = memo(SideNavToggleButton);\nMemoizedSideNavToggleButton.displayName = \"SideNavToggleButton\";\n\nexport { MemoizedSideNavToggleButton as SideNavToggleButton };\n"],"mappings":"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","ignoreList":[]}