@okta/odyssey-react-mui 1.29.0 → 1.32.0

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

@@ -0,0 +1,67 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo, useMemo } from "react";
+import styled from "@emotion/styled";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { Box } from "../../Box.js";
+import { Link } from "../../Link.js";
+import { useTranslation } from "react-i18next";
+import { useUiShellContext } from "../../ui-shell/UiShellProvider.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledFooterNav = styled("nav")({
+  display: "flex"
+});
+const StyledFooterItemContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "borderColor"
+})(({
+  borderColor,
+  odysseyDesignTokens
+}) => ({
+  "& + &": {
+    marginInlineStart: odysseyDesignTokens.Spacing4,
+    paddingInlineStart: odysseyDesignTokens.Spacing4,
+    borderInlineStart: `1px solid ${borderColor || odysseyDesignTokens.HueNeutral300}`
+  }
+}));
+const SideNavFooterContent = ({
+  footerItems
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const {
+    t
+  } = useTranslation();
+  const shellColors = useUiShellContext();
+  const memoizedFooterContent = useMemo(() => {
+    return footerItems?.map(item => _jsx(StyledFooterItemContainer, {
+      borderColor: shellColors?.sideNavContrastColors?.fontColor,
+      odysseyDesignTokens: odysseyDesignTokens,
+      role: "menuitem",
+      children: item.href ? _jsx(Link, {
+        href: item.href,
+        children: item.label
+      }) : _jsx(Box, {
+        component: "span",
+        children: item.label
+      })
+    }, item.id));
+  }, [footerItems, odysseyDesignTokens, shellColors]);
+  return _jsx(StyledFooterNav, {
+    role: "menubar",
+    "aria-label": t("navigation.footer"),
+    children: memoizedFooterContent
+  });
+};
+const MemoizedSideNavFooterContent = memo(SideNavFooterContent);
+MemoizedSideNavFooterContent.displayName = "SideNavFooterContent";
+export { MemoizedSideNavFooterContent as SideNavFooterContent };
+//# sourceMappingURL=SideNavFooterContent.js.map

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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,95 @@
+import _Skeleton from "@mui/material/Skeleton";
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import styled from "@emotion/styled";
+import { memo } from "react";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { SideNavLogo } from "./SideNavLogo.js";
+import { Heading5 } from "../../Typography.js";
+import { TOP_NAV_HEIGHT } from "../TopNav/index.js";
+import { useUiShellContext } from "../../ui-shell/UiShellProvider.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SideNavHeaderContainer = styled("div")({
+  position: "relative",
+  display: "flex",
+  flexDirection: "column",
+  zIndex: 1
+});
+const SideNavLogoContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSameBackgroundAsMain"
+})(({
+  isSameBackgroundAsMain,
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  height: TOP_NAV_HEIGHT,
+  paddingBlock: odysseyDesignTokens.Spacing4,
+  paddingInline: odysseyDesignTokens.Spacing5,
+  backgroundColor: isSameBackgroundAsMain ? "transparent" : odysseyDesignTokens.HueNeutralWhite,
+  "svg, img": {
+    maxHeight: "100%",
+    width: "auto",
+    maxWidth: "100%"
+  }
+}));
+const SideNavHeadingContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "contrastFontColor"
+})(({
+  contrastFontColor,
+  odysseyDesignTokens
+}) => ({
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  paddingBlock: odysseyDesignTokens.Spacing4,
+  paddingInline: odysseyDesignTokens.Spacing5,
+  width: "100%",
+  ["& .MuiTypography-root"]: {
+    margin: 0,
+    width: "100%",
+    color: contrastFontColor || "inherit"
+  }
+}));
+const SideNavHeader = ({
+  appName,
+  isLoading,
+  logoProps
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const uiShellContext = useUiShellContext();
+  return _jsxs(SideNavHeaderContainer, {
+    children: [_jsx(SideNavLogoContainer, {
+      isSameBackgroundAsMain: logoProps?.isSameBackgroundAsMain,
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: isLoading ? _jsx(_Skeleton, {
+        variant: "rounded",
+        height: 24,
+        width: 67
+      }) : _jsx(SideNavLogo, {
+        ...logoProps
+      })
+    }), appName && _jsx(SideNavHeadingContainer, {
+      contrastFontColor: uiShellContext?.sideNavContrastColors?.fontColor,
+      odysseyDesignTokens: odysseyDesignTokens,
+      children: _jsx(Heading5, {
+        component: "h2",
+        children: isLoading ? _jsx(_Skeleton, {}) : appName
+      })
+    })]
+  });
+};
+const MemoizedSideNavHeader = memo(SideNavHeader);
+MemoizedSideNavHeader.displayName = "SideNavHeader";
+export { MemoizedSideNavHeader as SideNavHeader };
+//# sourceMappingURL=SideNavHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavHeader.js","names":["styled","memo","useOdysseyDesignTokens","SideNavLogo","Heading5","TOP_NAV_HEIGHT","useUiShellContext","jsx","_jsx","jsxs","_jsxs","SideNavHeaderContainer","position","display","flexDirection","zIndex","SideNavLogoContainer","shouldForwardProp","prop","isSameBackgroundAsMain","odysseyDesignTokens","alignItems","height","paddingBlock","Spacing4","paddingInline","Spacing5","backgroundColor","HueNeutralWhite","maxHeight","width","maxWidth","SideNavHeadingContainer","contrastFontColor","justifyContent","margin","color","SideNavHeader","appName","isLoading","logoProps","uiShellContext","children","_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 { TOP_NAV_HEIGHT } from \"../TopNav/index.js\";\nimport { ContrastColors } from \"../../createContrastColors.js\";\nimport { useUiShellContext } from \"../../ui-shell/UiShellProvider.js\";\n\nconst SideNavHeaderContainer = styled(\"div\")({\n  position: \"relative\",\n  display: \"flex\",\n  flexDirection: \"column\",\n  zIndex: 1,\n});\n\nconst SideNavLogoContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" && prop !== \"isSameBackgroundAsMain\",\n})<{\n  isSameBackgroundAsMain: SideNavLogoProps[\"isSameBackgroundAsMain\"];\n  odysseyDesignTokens: DesignTokens;\n}>(({ 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    ? \"transparent\"\n    : odysseyDesignTokens.HueNeutralWhite,\n\n  \"svg, img\": {\n    maxHeight: \"100%\",\n    width: \"auto\",\n    maxWidth: \"100%\",\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        odysseyDesignTokens={odysseyDesignTokens}\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":"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","ignoreList":[]}

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

@@ -0,0 +1,251 @@
+import _Link from "@mui/material/Link";
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import styled from "@emotion/styled";
+import { memo, useCallback, useImperativeHandle, useMemo, useRef } 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 { useUiShellContext } from "../../ui-shell/UiShellProvider.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"
+})(({
+  isSelected,
+  odysseyDesignTokens,
+  sideNavContrastColors
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  backgroundColor: "unset",
+  borderRadius: odysseyDesignTokens.BorderRadiusMain,
+  transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,
+  ...(isSelected && {
+    color: sideNavContrastColors?.fontColor ? `${sideNavContrastColors.fontColor}` : `${odysseyDesignTokens.TypographyColorAction}`,
+    backgroundColor: sideNavContrastColors?.itemSelectedBackgroundColor || odysseyDesignTokens.HueBlue50
+  })
+}));
+const scrollToNode = node => {
+  if (node) {
+    node?.scrollIntoView({
+      behavior: "instant",
+      block: "center",
+      inline: "nearest"
+    });
+  }
+};
+export const getBaseNavItemContentStyles = ({
+  isDisabled,
+  isSelected,
+  odysseyDesignTokens,
+  sideNavContrastColors
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  width: "100%",
+  textDecoration: "none",
+  color: sideNavContrastColors?.fontColor ? `${sideNavContrastColors?.fontColor} !important` : `${odysseyDesignTokens.TypographyColorHeading} !important`,
+  minHeight: "unset",
+  paddingBlock: odysseyDesignTokens.Spacing3,
+  paddingInlineEnd: odysseyDesignTokens.Spacing4,
+  borderRadius: odysseyDesignTokens.BorderRadiusMain,
+  transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,
+  cursor: "pointer",
+  "&:hover, li:has(> button:hover, > button:focus, > button:focus-visible) &": {
+    textDecoration: "none",
+    backgroundColor: sideNavContrastColors?.itemHoverBackgroundColor || odysseyDesignTokens.HueNeutral50,
+    ...(isSelected && {
+      backgroundColor: sideNavContrastColors?.itemSelectedBackgroundColor || odysseyDesignTokens.HueBlue50,
+      color: sideNavContrastColors?.fontColor || odysseyDesignTokens.TypographyColorAction
+    }),
+    ...(isDisabled && {
+      backgroundColor: "unset"
+    })
+  },
+  ...(isSelected && {
+    color: sideNavContrastColors?.fontColor ? `${sideNavContrastColors?.fontColor} !important` : `${odysseyDesignTokens.TypographyColorAction} !important`,
+    fontWeight: odysseyDesignTokens.TypographyWeightBodyBold
+  }),
+  ...(isDisabled && {
+    cursor: "default",
+    color: `${odysseyDesignTokens.TypographyColorDisabled} !important`,
+    ...(sideNavContrastColors?.itemDisabledFontColor && {
+      color: `${sideNavContrastColors?.itemDisabledFontColor} !important`
+    })
+  }),
+  "&:focus-visible": {
+    outline: "none",
+    boxShadow: `inset 0 0 0 2px ${sideNavContrastColors?.focusRingColor || odysseyDesignTokens.PalettePrimaryMain}`
+  }
+});
+export const getNavItemContentStyles = ({
+  odysseyDesignTokens,
+  contextValue
+}) => ({
+  paddingInlineStart: `calc(${odysseyDesignTokens.Spacing4} * ${contextValue.depth} + ${odysseyDesignTokens.Spacing6})`,
+  ...(contextValue.depth === 1 && {
+    paddingInlineStart: odysseyDesignTokens.Spacing4
+  }),
+  ...(contextValue.isCompact && {
+    paddingBlock: odysseyDesignTokens.Spacing1
+  })
+});
+const NavItemContentContainer = styled("div", {
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop != "contextValue" && prop !== "isDisabled" && prop !== "sideNavContrastColors" && prop !== "isSelected"
+})(({
+  isDisabled,
+  isSelected,
+  contextValue,
+  odysseyDesignTokens,
+  sideNavContrastColors
+}) => ({
+  ...getBaseNavItemContentStyles({
+    isDisabled,
+    isSelected,
+    odysseyDesignTokens,
+    sideNavContrastColors
+  }),
+  ...getNavItemContentStyles({
+    odysseyDesignTokens,
+    contextValue
+  })
+}));
+const StyledNavItemLink = styled(_Link, {
+  shouldForwardProp: prop => prop != "contextValue" && prop !== "isDisabled" && prop !== "isSelected" && prop !== "odysseyDesignTokens" && prop !== "sideNavContrastColors"
+})(({
+  isDisabled,
+  isSelected,
+  contextValue,
+  odysseyDesignTokens,
+  sideNavContrastColors
+}) => ({
+  ...getBaseNavItemContentStyles({
+    isDisabled,
+    isSelected,
+    odysseyDesignTokens,
+    sideNavContrastColors
+  }),
+  ...getNavItemContentStyles({
+    odysseyDesignTokens,
+    contextValue
+  })
+}));
+const SideNavItemContent = ({
+  count,
+  id,
+  label,
+  href,
+  target,
+  startIcon,
+  severity,
+  statusLabel,
+  endIcon,
+  onClick,
+  isDisabled,
+  isSelected,
+  scrollRef,
+  onItemSelected
+}) => {
+  const uiShellContext = useUiShellContext();
+  const sidenavItemContentContext = useSideNavItemContent();
+  const contextValue = useMemo(() => sidenavItemContentContext, [sidenavItemContentContext]);
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const localScrollRef = useRef(null);
+  useImperativeHandle(scrollRef, () => {
+    return {
+      scrollIntoView: () => {
+        scrollToNode(localScrollRef.current);
+      }
+    };
+  }, []);
+  const itemClickHandler = useCallback(event => {
+    onItemSelected?.(id);
+    onClick?.(event);
+  }, [id, onClick, onItemSelected]);
+  const sideNavItemContentKeyHandler = useCallback(event => {
+    if (event?.key === "Enter") {
+      event.preventDefault();
+      onItemSelected?.(id);
+      onClick?.(event);
+    }
+  }, [id, onClick, onItemSelected]);
+  return _jsx(StyledSideNavListItem, {
+    "aria-disabled": isDisabled,
+    "aria-current": isSelected ? "page" : undefined,
+    disabled: isDisabled,
+    id: id,
+    isSelected: isSelected,
+    odysseyDesignTokens: odysseyDesignTokens,
+    ref: localScrollRef,
+    sideNavContrastColors: uiShellContext?.sideNavContrastColors,
+    children: isDisabled ? _jsx(NavItemContentContainer, {
+      contextValue: contextValue,
+      isDisabled: isDisabled,
+      isSelected: isSelected,
+      odysseyDesignTokens: odysseyDesignTokens,
+      sideNavContrastColors: uiShellContext?.sideNavContrastColors,
+      children: _jsx(SideNavItemLinkContent, {
+        count: count,
+        label: label,
+        startIcon: startIcon,
+        endIcon: endIcon,
+        statusLabel: statusLabel,
+        severity: severity
+      })
+    }) : !href ? _jsx(NavItemContentContainer, {
+      contextValue: contextValue,
+      isDisabled: isDisabled,
+      isSelected: isSelected,
+      onClick: itemClickHandler,
+      onKeyDown: sideNavItemContentKeyHandler,
+      odysseyDesignTokens: odysseyDesignTokens,
+      role: "button",
+      sideNavContrastColors: uiShellContext?.sideNavContrastColors,
+      tabIndex: 0,
+      children: _jsx(SideNavItemLinkContent, {
+        count: count,
+        label: label,
+        startIcon: startIcon,
+        endIcon: endIcon,
+        statusLabel: statusLabel,
+        severity: severity
+      })
+    }) : _jsxs(StyledNavItemLink, {
+      contextValue: contextValue,
+      href: href,
+      isDisabled: isDisabled,
+      isSelected: isSelected,
+      odysseyDesignTokens: odysseyDesignTokens,
+      onClick: itemClickHandler,
+      sideNavContrastColors: uiShellContext?.sideNavContrastColors,
+      target: target,
+      children: [_jsx(SideNavItemLinkContent, {
+        count: count,
+        label: label,
+        startIcon: startIcon,
+        endIcon: endIcon,
+        statusLabel: statusLabel,
+        severity: severity
+      }), target === "_blank" && _jsx("span", {
+        className: "Link-indicator",
+        role: "presentation",
+        children: _jsx(ExternalLinkIcon, {})
+      })]
+    })
+  }, id);
+};
+const MemoizedSideNavItemContent = memo(SideNavItemContent);
+MemoizedSideNavItemContent.displayName = "SideNavItemContent";
+export { MemoizedSideNavItemContent as SideNavItemContent };
+//# sourceMappingURL=SideNavItemContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavItemContent.js","names":["styled","memo","useCallback","useImperativeHandle","useMemo","useRef","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","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","uiShellContext","sidenavItemContentContext","localScrollRef","current","itemClickHandler","event","sideNavItemContentKeyHandler","key","preventDefault","undefined","disabled","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 {\n  KeyboardEventHandler,\n  memo,\n  MouseEventHandler,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\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}: {\n  isSelected?: boolean;\n  isDisabled?: 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\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})<{\n  contextValue: SideNavItemContentContextValue;\n  odysseyDesignTokens: DesignTokens;\n  sideNavContrastColors: UiShellColors[\"sideNavContrastColors\"];\n  isSelected?: boolean;\n  isDisabled?: boolean;\n}>(\n  ({\n    isDisabled,\n    isSelected,\n    contextValue,\n    odysseyDesignTokens,\n    sideNavContrastColors,\n  }) => ({\n    ...getBaseNavItemContentStyles({\n      isDisabled,\n      isSelected,\n      odysseyDesignTokens,\n      sideNavContrastColors,\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})<{\n  contextValue: SideNavItemContentContextValue;\n  odysseyDesignTokens: DesignTokens;\n  sideNavContrastColors: UiShellColors[\"sideNavContrastColors\"];\n  isSelected?: boolean;\n  isDisabled?: boolean;\n}>(\n  ({\n    isDisabled,\n    isSelected,\n    contextValue,\n    odysseyDesignTokens,\n    sideNavContrastColors,\n  }) => ({\n    ...getBaseNavItemContentStyles({\n      isDisabled,\n      isSelected,\n      odysseyDesignTokens,\n      sideNavContrastColors,\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}: 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> & {\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\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    >\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          >\n            <SideNavItemLinkContent\n              count={count}\n              label={label}\n              startIcon={startIcon}\n              endIcon={endIcon}\n              statusLabel={statusLabel}\n              severity={severity}\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          >\n            <SideNavItemLinkContent\n              count={count}\n              label={label}\n              startIcon={startIcon}\n              endIcon={endIcon}\n              statusLabel={statusLabel}\n              severity={severity}\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          >\n            <SideNavItemLinkContent\n              count={count}\n              label={label}\n              startIcon={startIcon}\n              endIcon={endIcon}\n              statusLabel={statusLabel}\n              severity={severity}\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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,70 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import styled from "@emotion/styled";
+import { memo, useMemo } from "react";
+import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
+import { Box } from "../../Box.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"
+})(({
+  odysseyDesignTokens,
+  isIconVisible
+}) => ({
+  width: "100%",
+  display: "flex",
+  flexWrap: "wrap",
+  alignItems: "center",
+  fontSize: odysseyDesignTokens.TypographySizeBody,
+  marginInlineStart: isIconVisible ? odysseyDesignTokens.Spacing3 : 0
+}));
+const SideNavItemLinkContent = ({
+  count,
+  label,
+  startIcon,
+  endIcon,
+  severity,
+  statusLabel
+}) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+  const sideNavItemContentStyles = useMemo(() => ({
+    alignItems: "center",
+    display: "flex",
+    gap: odysseyDesignTokens.Spacing1,
+    marginInlineStart: odysseyDesignTokens.Spacing2
+  }), [odysseyDesignTokens]);
+  return _jsxs(_Fragment, {
+    children: [startIcon && startIcon, _jsxs(SideNavItemLabelContainer, {
+      odysseyDesignTokens: odysseyDesignTokens,
+      isIconVisible: Boolean(startIcon),
+      children: [label, !count && severity && _jsx(Box, {
+        sx: sideNavItemContentStyles,
+        children: severity && _jsx(Status, {
+          severity: severity,
+          label: statusLabel || ""
+        })
+      }), !severity && count && _jsx(Box, {
+        sx: sideNavItemContentStyles,
+        children: count && _jsx(Badge, {
+          badgeContent: count
+        })
+      })]
+    }), endIcon && endIcon]
+  });
+};
+const MemoizedSideNavItemLinkContent = memo(SideNavItemLinkContent);
+MemoizedSideNavItemLinkContent.displayName = "SideNavItemLinkContent";
+export { MemoizedSideNavItemLinkContent as SideNavItemLinkContent };
+//# sourceMappingURL=SideNavItemLinkContent.js.map

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

@@ -0,0 +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","width","display","flexWrap","alignItems","fontSize","TypographySizeBody","marginInlineStart","Spacing3","SideNavItemLinkContent","count","label","startIcon","endIcon","severity","statusLabel","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  width: \"100%\",\n  display: \"flex\",\n  flexWrap: \"wrap\",\n  alignItems: \"center\",\n  fontSize: odysseyDesignTokens.TypographySizeBody,\n  marginInlineStart: isIconVisible ? odysseyDesignTokens.Spacing3 : 0,\n}));\n\nconst SideNavItemLinkContent = ({\n  count,\n  label,\n  startIcon,\n  endIcon,\n  severity,\n  statusLabel,\n}: Pick<\n  SideNavItem,\n  \"count\" | \"label\" | \"startIcon\" | \"endIcon\" | \"severity\" | \"statusLabel\"\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      >\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,KAAK,EAAE,MAAM;EACbC,OAAO,EAAE,MAAM;EACfC,QAAQ,EAAE,MAAM;EAChBC,UAAU,EAAE,QAAQ;EACpBC,QAAQ,EAAEN,mBAAmB,CAACO,kBAAkB;EAChDC,iBAAiB,EAAEP,aAAa,GAAGD,mBAAmB,CAACS,QAAQ,GAAG;AACpE,CAAC,CAAC,CAAC;AAEH,MAAMC,sBAAsB,GAAGA,CAAC;EAC9BC,KAAK;EACLC,KAAK;EACLC,SAAS;EACTC,OAAO;EACPC,QAAQ;EACRC;AAIF,CAAC,KAAgB;EACf,MAAMhB,mBAAmB,GAAGb,sBAAsB,CAAC,CAAC;EAEpD,MAAM8B,wBAAwB,GAAG/B,OAAO,CACtC,OAAO;IACLmB,UAAU,EAAE,QAAQ;IACpBF,OAAO,EAAE,MAAM;IACfe,GAAG,EAAElB,mBAAmB,CAACmB,QAAQ;IACjCX,iBAAiB,EAAER,mBAAmB,CAACoB;EACzC,CAAC,CAAC,EACF,CAACpB,mBAAmB,CACtB,CAAC;EAED,OACEN,KAAA,CAAAE,SAAA;IAAAyB,QAAA,GACGR,SAAS,IAAIA,SAAS,EACvBnB,KAAA,CAACG,yBAAyB;MACxBG,mBAAmB,EAAEA,mBAAoB;MACzCC,aAAa,EAAEqB,OAAO,CAACT,SAAS,CAAE;MAAAQ,QAAA,GAEjCT,KAAK,EACL,CAACD,KAAK,IAAII,QAAQ,IACjBvB,IAAA,CAACJ,GAAG;QAACmC,EAAE,EAAEN,wBAAyB;QAAAI,QAAA,EAC/BN,QAAQ,IACPvB,IAAA,CAACH,MAAM;UAAC0B,QAAQ,EAAEA,QAAS;UAACH,KAAK,EAAEI,WAAW,IAAI;QAAG,CAAE;MACxD,CACE,CACN,EACA,CAACD,QAAQ,IAAIJ,KAAK,IACjBnB,IAAA,CAACJ,GAAG;QAACmC,EAAE,EAAEN,wBAAyB;QAAAI,QAAA,EAC/BV,KAAK,IAAInB,IAAA,CAACF,KAAK;UAACkC,YAAY,EAAEb;QAAM,CAAE;MAAC,CACrC,CACN;IAAA,CACwB,CAAC,EAC3BG,OAAO,IAAIA,OAAO;EAAA,CACnB,CAAC;AAEP,CAAC;AACD,MAAMW,8BAA8B,GAAGxC,IAAI,CAACyB,sBAAsB,CAAC;AACnEe,8BAA8B,CAACC,WAAW,GAAG,wBAAwB;AAErE,SAASD,8BAA8B,IAAIf,sBAAsB","ignoreList":[]}

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

@@ -0,0 +1,58 @@
+/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { memo, useMemo } from "react";
+import styled from "@emotion/styled";
+import { OktaLogo } from "./OktaLogo.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledLogoContainer = styled("div")(() => ({
+  display: "flex",
+  alignItems: "center",
+  height: "100%"
+}));
+const StyledLogoLink = styled("a")(() => ({
+  display: "flex",
+  alignItems: "center",
+  height: "100%"
+}));
+const SideNavLogo = ({
+  imageAltText,
+  logoComponent,
+  imageUrl,
+  ...optionalProps
+}) => {
+  const logo = useMemo(() => {
+    if (logoComponent) {
+      return logoComponent;
+    }
+    if (imageAltText && imageUrl) {
+      return _jsx("img", {
+        src: imageUrl,
+        alt: imageAltText
+      });
+    }
+    return _jsx(OktaLogo, {});
+  }, [imageAltText, logoComponent, imageUrl]);
+  return "href" in optionalProps && "ariaLabel" in optionalProps ? _jsx(StyledLogoLink, {
+    "aria-label": optionalProps.ariaLabel,
+    "data-se": "sidenav-header-logo",
+    href: optionalProps.href,
+    children: logo
+  }) : _jsx(StyledLogoContainer, {
+    role: "presentation",
+    children: logo
+  });
+};
+const MemoizedSideNavLogo = memo(SideNavLogo);
+MemoizedSideNavLogo.displayName = "SideNavLogo";
+export { MemoizedSideNavLogo as SideNavLogo };
+//# sourceMappingURL=SideNavLogo.js.map