npm - @okta/odyssey-react-mui - Versions diffs - 1.36.0 → 1.36.1 - Mend

@okta/odyssey-react-mui 1.36.0 → 1.36.1

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 (40) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InnerAppContainer.js","names":["styled","memo","UI_SHELL_BASE_Z_INDEX","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","StyledAppContainerShadowShared","left","position","top","width","zIndex","StyledAppContainerShadow1","background","height","StyledAppContainerShadow2","StyledAppContainerShadow3","InnerAppContainer","isContentScrolled","children","MemoizedInnerAppContainer","displayName"],"sources":["../../../src/ui-shell/InnerAppContainer.tsx"],"sourcesContent":["/!\n Copyright (c) 2025-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 { UI_SHELL_BASE_Z_INDEX } from \"./uiShellSharedConstants.js\";\n\n// Shared styles for fake inset shadow. Not rendered anywhere.\nconst StyledAppContainerShadowShared = styled(\"div\")({\n left: 0,\n position: \"absolute\",\n top: 0,\n width: \"100%\",\n zIndex: UI_SHELL_BASE_Z_INDEX,\n});\n\nexport const StyledAppContainerShadow1 = styled(StyledAppContainerShadowShared)(\n {\n background: `linear-gradient(\n to bottom,\n rgba(39, 39, 39, 0.08) 0%,\n transparent 100%\n )`,\n height: \"4px\",\n },\n);\n\nexport const StyledAppContainerShadow2 = styled(StyledAppContainerShadowShared)(\n {\n background: `linear-gradient(\n to bottom,\n rgba(39, 39, 39, 0.01) 0%,\n transparent 100%\n )`,\n height: \"6px\",\n },\n);\n\nexport const StyledAppContainerShadow3 = styled(StyledAppContainerShadowShared)(\n {\n background: `linear-gradient(\n to bottom,\n rgba(39, 39, 39, 0.05) 0%,\n transparent 100%\n )`,\n height: \"15px\",\n },\n);\n\nexport type InnerAppContainerProps = {\n isContentScrolled: boolean;\n};\n\nconst InnerAppContainer = ({ isContentScrolled }: InnerAppContainerProps) =>\n isContentScrolled ? (\n <>\n <StyledAppContainerShadow1 />\n <StyledAppContainerShadow2 />\n <StyledAppContainerShadow3 />\n </>\n ) : null;\n\nconst MemoizedInnerAppContainer = memo(InnerAppContainer);\nMemoizedInnerAppContainer.displayName = \"InnerAppContainer\";\n\nexport { MemoizedInnerAppContainer as InnerAppContainer };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,IAAI,QAAQ,OAAO;AAC5B,SAASC,qBAAqB,QAAQ,6BAA6B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAGpE,MAAMC,8BAA8B,GAAGT,MAAM,CAAC,KAAK,CAAC,CAAC;EACnDU,IAAI,EAAE,CAAC;EACPC,QAAQ,EAAE,UAAU;EACpBC,GAAG,EAAE,CAAC;EACNC,KAAK,EAAE,MAAM;EACbC,MAAM,~~EAAEZ~~;AACV,CAAC,CAAC;AAEF,OAAO,~~MAAMa~~,yBAAyB,~~GAAGf~~,MAAM,CAACS,8BAA8B,CAAC,CAC7E;~~EACEO~~,UAAU,EAAE;AAChB;AACA;AACA;AACA,MAAM;EACFC,MAAM,EAAE;AACV,CACF,CAAC;AAED,OAAO,MAAMC,yBAAyB,~~GAAGlB~~,MAAM,CAACS,8BAA8B,CAAC,CAC7E;~~EACEO~~,UAAU,EAAE;AAChB;AACA;AACA;AACA,MAAM;EACFC,MAAM,EAAE;AACV,CACF,CAAC;AAED,OAAO,MAAME,yBAAyB,~~GAAGnB~~,MAAM,CAACS,8BAA8B,CAAC,CAC7E;~~EACEO~~,UAAU,EAAE;AAChB;AACA;AACA;AACA,MAAM;EACFC,MAAM,EAAE;AACV,CACF,CAAC;AAMD,MAAMG,iBAAiB,GAAGA,CAAC;EAAEC;AAA0C,CAAC,KACtEA,iBAAiB,~~GACfb~~,KAAA,CAAAF,SAAA;~~EAAAgB~~,QAAA,~~GACElB~~,IAAA,~~CAACW~~,yBAAyB,IAAE,CAAC,~~EAC7BX~~,IAAA,~~CAACc~~,yBAAyB,IAAE,CAAC,~~EAC7Bd~~,IAAA,~~CAACe~~,yBAAyB,IAAE,CAAC;AAAA,CAC7B,CAAC,GACD,IAAI;AAEV,MAAMI,yBAAyB,~~GAAGtB~~,IAAI,~~CAACmB~~,iBAAiB,CAAC;AACzDG,yBAAyB,CAACC,WAAW,GAAG,mBAAmB;AAE3D,SAASD,yBAAyB,IAAIH,iBAAiB","ignoreList":[]}
1	+ {"version":3,"file":"InnerAppContainer.js","names":["styled","memo","UI_SHELL_BASE_Z_INDEX","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","StyledAppContainerShadowShared","left","pointerEvents","position","top","width","zIndex","StyledAppContainerShadow1","background","height","StyledAppContainerShadow2","StyledAppContainerShadow3","InnerAppContainer","isContentScrolled","children","MemoizedInnerAppContainer","displayName"],"sources":["../../../src/ui-shell/InnerAppContainer.tsx"],"sourcesContent":["/!\n Copyright (c) 2025-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 { UI_SHELL_BASE_Z_INDEX } from \"./uiShellSharedConstants.js\";\n\n// Shared styles for fake inset shadow. Not rendered anywhere.\nconst StyledAppContainerShadowShared = styled(\"div\")({\n left: 0,\n pointerEvents: \"none\",\n position: \"absolute\",\n top: 0,\n width: \"100%\",\n zIndex: UI_SHELL_BASE_Z_INDEX,\n});\n\nexport const StyledAppContainerShadow1 = styled(StyledAppContainerShadowShared)(\n {\n background: `linear-gradient(\n to bottom,\n rgba(39, 39, 39, 0.08) 0%,\n transparent 100%\n )`,\n height: \"4px\",\n },\n);\n\nexport const StyledAppContainerShadow2 = styled(StyledAppContainerShadowShared)(\n {\n background: `linear-gradient(\n to bottom,\n rgba(39, 39, 39, 0.01) 0%,\n transparent 100%\n )`,\n height: \"6px\",\n },\n);\n\nexport const StyledAppContainerShadow3 = styled(StyledAppContainerShadowShared)(\n {\n background: `linear-gradient(\n to bottom,\n rgba(39, 39, 39, 0.05) 0%,\n transparent 100%\n )`,\n height: \"15px\",\n },\n);\n\nexport type InnerAppContainerProps = {\n isContentScrolled: boolean;\n};\n\nconst InnerAppContainer = ({ isContentScrolled }: InnerAppContainerProps) =>\n isContentScrolled ? (\n <>\n <StyledAppContainerShadow1 />\n <StyledAppContainerShadow2 />\n <StyledAppContainerShadow3 />\n </>\n ) : null;\n\nconst MemoizedInnerAppContainer = memo(InnerAppContainer);\nMemoizedInnerAppContainer.displayName = \"InnerAppContainer\";\n\nexport { MemoizedInnerAppContainer as InnerAppContainer };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAASC,IAAI,QAAQ,OAAO;AAC5B,SAASC,qBAAqB,QAAQ,6BAA6B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAGpE,MAAMC,8BAA8B,GAAGT,MAAM,CAAC,KAAK,CAAC,CAAC;EACnDU,IAAI,EAAE,CAAC;EACPC,aAAa,EAAE,MAAM;EACrBC,QAAQ,EAAE,UAAU;EACpBC,GAAG,EAAE,CAAC;EACNC,KAAK,EAAE,MAAM;EACbC,MAAM,EAAEb;AACV,CAAC,CAAC;AAEF,OAAO,MAAMc,yBAAyB,GAAGhB,MAAM,CAACS,8BAA8B,CAAC,CAC7E;EACEQ,UAAU,EAAE;AAChB;AACA;AACA;AACA,MAAM;EACFC,MAAM,EAAE;AACV,CACF,CAAC;AAED,OAAO,MAAMC,yBAAyB,GAAGnB,MAAM,CAACS,8BAA8B,CAAC,CAC7E;EACEQ,UAAU,EAAE;AAChB;AACA;AACA;AACA,MAAM;EACFC,MAAM,EAAE;AACV,CACF,CAAC;AAED,OAAO,MAAME,yBAAyB,GAAGpB,MAAM,CAACS,8BAA8B,CAAC,CAC7E;EACEQ,UAAU,EAAE;AAChB;AACA;AACA;AACA,MAAM;EACFC,MAAM,EAAE;AACV,CACF,CAAC;AAMD,MAAMG,iBAAiB,GAAGA,CAAC;EAAEC;AAA0C,CAAC,KACtEA,iBAAiB,GACfd,KAAA,CAAAF,SAAA;EAAAiB,QAAA,GACEnB,IAAA,CAACY,yBAAyB,IAAE,CAAC,EAC7BZ,IAAA,CAACe,yBAAyB,IAAE,CAAC,EAC7Bf,IAAA,CAACgB,yBAAyB,IAAE,CAAC;AAAA,CAC7B,CAAC,GACD,IAAI;AAEV,MAAMI,yBAAyB,GAAGvB,IAAI,CAACoB,iBAAiB,CAAC;AACzDG,yBAAyB,CAACC,WAAW,GAAG,mBAAmB;AAE3D,SAASD,yBAAyB,IAAIH,iBAAiB","ignoreList":[]}

package/dist/esm/ui-shell/NarrowUiShellContent.js CHANGED Viewed

@@ -39,7 +39,6 @@ const StyledAppContentArea = styled("div")({
   gridTemplateColumns: "auto 1fr auto",
   gridTemplateRows: "1fr",
   height: "100%",
-  pointerEvents: "none",
   width: "100%"
 });
 const StyledAppContainer = styled("div", {
@@ -48,8 +47,8 @@ const StyledAppContainer = styled("div", {
   appBackgroundColor
 }) => ({
   backgroundColor: appBackgroundColor,
-  height: "100%",
   gridArea: "app-container",
+  height: "100%",
   overflow: "hidden",
   width: "100%"
 }));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NarrowUiShellContent.js","names":["styled","memo","useCallback","useEffect","useRef","useState","ErrorBoundary","Button","CloseIcon","MoreIcon","InnerAppContainer","useOdysseyDesignTokens","SideNav","SideNavLogo","HamburgerMenuIcon","useUiShellContext","emptySideNavItems","SIDE_NAV_WIDTH","TOP_NAV_HEIGHT","UI_SHELL_BASE_Z_INDEX","useScrollState","useMatchAppElementToUiShellAppArea","hexToRgb","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","StyledAppContentArea","gridArea","position","display","gridGap","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","height","pointerEvents","width","StyledAppContainer","shouldForwardProp","prop","appBackgroundColor","backgroundColor","overflow","StyledBannersContainer","zIndex","StyledLeftSideContainer","isOpen","overflowY","StyledRightSideContainer","odysseyDesignTokens","HueNeutralWhite","maxWidth","right","StyledMenuLogo","alignItems","gap","Spacing3","StyledLogoContainer","paddingBlock","Spacing4","maxHeight","StyledPageOverlay","HueNeutral900","asFormattedString","replace","left","top","StyledSideNavContainer","StyledUiShellContainer","HueNeutral50","StyledTopNav","isContentScrolled","topNavBackgroundColor","boxShadow","DepthMedium","undefined","clipPath","flexDirection","justifyContent","transition","TransitionDurationMain","TransitionTimingMain","StyledTopNavMenu","minHeight","Spacing2","paddingInline","borderBottomColor","HueNeutral100","borderBottomStyle","BorderStyleMain","borderBottomWidth","BorderWidthMain","StyledTopNavSearch","NarrowUiShellContent","appElement","appElementScrollingMode","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","optionalComponents","sideNavProps","topNavProps","uiShellContext","sideNavContainerRef","topNavContainerRef","uiShellAppAreaRef","isLeftSideMenuOpen","setIsLeftSideMenuOpen","isRightSideMenuOpen","setIsRightSideMenuOpen","closeSideMenus","unsubscribeFromCloseRightSideMenu","subscribeToCloseRightSideMenu","unsubscribeFromSideNavItemClicked","subscribeToCloseSideNavMenu","toggleLeftSideMenu","toggleRightSideMenu","parentContainerRef","paddingMode","uiShellResizableRefs","children","onClick","ref","banners","includes","fallback","sideNavBackgroundColor","isCollapsible","isCollapsed","startIcon","testId","variant","isLoading","_Skeleton","logoProps","rightSideMenu","topNavLeftSide","sideNavItems","appName","hasCustomFooter","sideNavFooter","footerComponent","footerItems","isObtrusive","tabIndex","MemoizedNarrowUiShellContent","displayName"],"sources":["../../../src/ui-shell/NarrowUiShellContent.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 styled from \"@emotion/styled\";\nimport { Skeleton } from \"@mui/material\";\nimport {\n CSSProperties,\n memo,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport { Button } from \"../Buttons/Button.js\";\nimport type { HtmlProps } from \"../HtmlProps.js\";\nimport { CloseIcon } from \"../icons.generated/Close.js\";\nimport { MoreIcon } from \"../icons.generated/More.js\";\nimport { InnerAppContainer } from \"./InnerAppContainer.js\";\nimport {\n DesignTokens,\n useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext.js\";\nimport { SideNav } from \"./SideNav/SideNav.js\";\nimport { SideNavLogo } from \"./SideNav/SideNavLogo.js\";\nimport { HamburgerMenuIcon } from \"./TopNav/HamburgerMenuIcon.js\";\nimport { UiShellColors, useUiShellContext } from \"./UiShellProvider.js\";\nimport {\n UiShellNavComponentProps,\n UiShellContentProps,\n} from \"./uiShellContentTypes.js\";\nimport {\n emptySideNavItems,\n SIDE_NAV_WIDTH,\n TOP_NAV_HEIGHT,\n UI_SHELL_BASE_Z_INDEX,\n} from \"./uiShellSharedConstants.js\";\nimport { useScrollState } from \"./useScrollState.js\";\nimport { useMatchAppElementToUiShellAppArea } from \"./useMatchAppElementToUiShellAppArea.js\";\nimport { hexToRgb } from \"../hexToRgb.js\";\n\nconst StyledAppContentArea = styled(\"div\")({\n gridArea: \"app-content\",\n position: \"relative\",\n display: \"grid\",\n gridGap: 0,\n gridTemplateAreas: `\n \"left-side app-container right-side\"\n `,\n gridTemplateColumns: \"auto 1fr auto\",\n gridTemplateRows: \"1fr\",\n height: \"100%\",\n pointerEvents: \"none\",\n width: \"100%\",\n});\n\nconst StyledAppContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"appBackgroundColor\" && prop !== \"odysseyDesignTokens\",\n})<{\n appBackgroundColor?: UiShellColors[\"appBackgroundColor\"];\n}>(({ appBackgroundColor }) => ({\n backgroundColor: appBackgroundColor,\n height: \"100%\",\n gridArea: \"app-container\",\n overflow: \"hidden\",\n width: \"100%\",\n}));\n\nconst StyledBannersContainer = styled(\"div\")({\n gridArea: \"banners\",\n zIndex: UI_SHELL_BASE_Z_INDEX,\n});\n\nconst StyledLeftSideContainer = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"isOpen\",\n})<{\n isOpen: boolean;\n}>(({ isOpen }) => ({\n display: isOpen ? \"block\" : \"none\",\n height: \"100%\",\n gridArea: \"left-side\",\n overflowY: \"auto\",\n position: \"absolute\",\n zIndex: UI_SHELL_BASE_Z_INDEX,\n}));\n\nconst StyledRightSideContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"isOpen\" && prop !== \"odysseyDesignTokens\",\n})<{\n isOpen: boolean;\n odysseyDesignTokens: DesignTokens;\n}>(({ isOpen, odysseyDesignTokens }) => ({\n backgroundColor: odysseyDesignTokens.HueNeutralWhite,\n display: isOpen ? \"block\" : \"none\",\n gridArea: \"right-side\",\n height: \"100%\",\n maxWidth: SIDE_NAV_WIDTH,\n overflowY: \"auto\",\n position: \"absolute\",\n right: 0,\n width: SIDE_NAV_WIDTH,\n zIndex: UI_SHELL_BASE_Z_INDEX,\n}));\n\nconst StyledMenuLogo = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n alignItems: \"center\",\n display: \"inline-flex\",\n gap: odysseyDesignTokens.Spacing3,\n}));\n\nconst StyledLogoContainer = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n height: TOP_NAV_HEIGHT,\n paddingBlock: odysseyDesignTokens.Spacing4,\n\n \"svg, img\": {\n maxHeight: \"100%\",\n width: \"auto\",\n maxWidth: \"100%\",\n },\n}));\n\nconst StyledPageOverlay = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n backgroundColor: hexToRgb(\n odysseyDesignTokens.HueNeutral900,\n ).asFormattedString.replace(/rgb\$(.+)\$$/, \"rgba($1, 0.26)\"),\n gridArea: \"app-content\",\n height: \"100vh\",\n left: 0,\n position: \"absolute\",\n top: 0,\n width: \"100vw\",\n zIndex: UI_SHELL_BASE_Z_INDEX,\n}));\n\nconst StyledSideNavContainer = styled(\"div\")({\n height: \"100%\", // Without this value, side nav won't fill up the height if the content is too short.\n});\n\nconst StyledUiShellContainer = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n backgroundColor: odysseyDesignTokens.HueNeutral50,\n display: \"grid\",\n gridGap: 0,\n gridTemplateAreas: `\n \"banners\"\n \"top-nav\"\n \"app-content\"\n `,\n gridTemplateColumns: \"1fr\",\n gridTemplateRows: \"auto auto 1fr\",\n height: \"100vh\",\n overflow: \"hidden\",\n width: \"100vw\",\n}));\n\nconst StyledTopNav = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" &&\n prop !== \"isContentScrolled\" &&\n prop !== \"topNavBackgroundColor\",\n})<{\n isContentScrolled?: boolean;\n odysseyDesignTokens: DesignTokens;\n topNavBackgroundColor?: UiShellColors[\"topNavBackgroundColor\"];\n}>(({ odysseyDesignTokens, isContentScrolled, topNavBackgroundColor }) => ({\n alignItems: \"stretch\",\n backgroundColor: odysseyDesignTokens.HueNeutralWhite \|\| topNavBackgroundColor, // This logic doesn't make sense, but I wanted to leave it here for when we eventually make a decision on `topNavBackgroundColor`. --Kevin Ghadyani\n boxShadow: isContentScrolled ? odysseyDesignTokens.DepthMedium : undefined,\n clipPath: \"inset(0 0 -100vh 0)\",\n display: \"flex\",\n flexDirection: \"column\",\n gridArea: \"top-nav\",\n height: \"100%\",\n justifyContent: \"center\",\n position: \"relative\",\n transition: `box-shadow ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n zIndex: UI_SHELL_BASE_Z_INDEX,\n}));\n\nconst StyledTopNavMenu = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" && prop !== \"topNavBackgroundColor\",\n})<{\n odysseyDesignTokens: DesignTokens;\n topNavBackgroundColor?: UiShellColors[\"topNavBackgroundColor\"];\n}>(({ odysseyDesignTokens, topNavBackgroundColor }) => ({\n alignItems: \"center\",\n display: \"flex\",\n gap: odysseyDesignTokens.Spacing3,\n height: \"100%\",\n justifyContent: \"space-between\",\n maxHeight: TOP_NAV_HEIGHT,\n minHeight: TOP_NAV_HEIGHT,\n paddingBlock: odysseyDesignTokens.Spacing2,\n paddingInline: odysseyDesignTokens.Spacing3,\n transition: `box-shadow ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n\n ...(topNavBackgroundColor === odysseyDesignTokens.HueNeutralWhite &&\n ({\n borderBottomColor: odysseyDesignTokens.HueNeutral100,\n borderBottomStyle: odysseyDesignTokens.BorderStyleMain,\n borderBottomWidth: odysseyDesignTokens.BorderWidthMain,\n } as CSSProperties)),\n}));\n\nconst StyledTopNavSearch = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n paddingBlock: odysseyDesignTokens.Spacing2,\n paddingInline: odysseyDesignTokens.Spacing3,\n}));\n\nexport type NarrowUiShellContentProps = Pick<HtmlProps, \"testId\"> &\n Pick<UiShellNavComponentProps, \"sideNavProps\" \| \"topNavProps\"> &\n UiShellContentProps;\n\nconst NarrowUiShellContent = ({\n appElement,\n appElementScrollingMode,\n hasStandardAppContentPadding = true,\n initialVisibleSections = [\"TopNav\", \"SideNav\", \"AppSwitcher\"],\n onError = console.error,\n optionalComponents,\n sideNavProps,\n topNavProps,\n}: NarrowUiShellContentProps) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n const uiShellContext = useUiShellContext();\n\n const { isContentScrolled } = useScrollState(appElement);\n\n const sideNavContainerRef = useRef<HTMLDivElement>(null);\n const topNavContainerRef = useRef<HTMLDivElement>(null);\n const uiShellAppAreaRef = useRef<HTMLDivElement>(null);\n\n const [isLeftSideMenuOpen, setIsLeftSideMenuOpen] = useState(false);\n const [isRightSideMenuOpen, setIsRightSideMenuOpen] = useState(false);\n\n const closeSideMenus = useCallback(() => {\n setIsLeftSideMenuOpen(false);\n setIsRightSideMenuOpen(false);\n }, []);\n\n useEffect(() => {\n const unsubscribeFromCloseRightSideMenu =\n uiShellContext?.subscribeToCloseRightSideMenu(() => {\n closeSideMenus();\n });\n\n const unsubscribeFromSideNavItemClicked =\n uiShellContext?.subscribeToCloseSideNavMenu(() => {\n closeSideMenus();\n });\n\n return () => {\n unsubscribeFromCloseRightSideMenu?.();\n unsubscribeFromSideNavItemClicked?.();\n };\n }, [closeSideMenus, uiShellContext]);\n\n const toggleLeftSideMenu = useCallback(() => {\n setIsRightSideMenuOpen(false);\n setIsLeftSideMenuOpen((isLeftSideMenuOpen) => !isLeftSideMenuOpen);\n }, []);\n\n const toggleRightSideMenu = useCallback(() => {\n setIsLeftSideMenuOpen(false);\n setIsRightSideMenuOpen((isRightSideMenuOpen) => !isRightSideMenuOpen);\n }, []);\n\n const { parentContainerRef } = useMatchAppElementToUiShellAppArea({\n appElement,\n appElementScrollingMode,\n paddingMode: hasStandardAppContentPadding ? \"compact\" : \"none\",\n uiShellAppAreaRef,\n uiShellResizableRefs: [\n sideNavContainerRef,\n topNavContainerRef,\n uiShellAppAreaRef,\n ],\n });\n\n return (\n <>\n {(isLeftSideMenuOpen \|\| isRightSideMenuOpen) && (\n <StyledPageOverlay\n odysseyDesignTokens={odysseyDesignTokens}\n onClick={closeSideMenus}\n />\n )}\n\n <StyledUiShellContainer\n odysseyDesignTokens={odysseyDesignTokens}\n ref={parentContainerRef}\n >\n <StyledBannersContainer>\n {optionalComponents?.banners}\n </StyledBannersContainer>\n\n {(initialVisibleSections?.includes(\"TopNav\") \|\| topNavProps) && (\n <ErrorBoundary fallback={null} onError={onError}>\n <StyledTopNav\n isContentScrolled={isContentScrolled}\n odysseyDesignTokens={odysseyDesignTokens}\n topNavBackgroundColor={uiShellContext?.topNavBackgroundColor}\n >\n <StyledTopNavMenu\n odysseyDesignTokens={odysseyDesignTokens}\n topNavBackgroundColor={uiShellContext?.sideNavBackgroundColor}\n >\n <StyledMenuLogo odysseyDesignTokens={odysseyDesignTokens}>\n {(sideNavProps?.isCollapsible \|\|\n !sideNavProps?.isCollapsed) && (\n <Button\n onClick={toggleLeftSideMenu}\n startIcon={<HamburgerMenuIcon />}\n testId=\"sidenav-menu--icon\"\n variant=\"floating\"\n />\n )}\n\n <StyledLogoContainer\n odysseyDesignTokens={odysseyDesignTokens}\n >\n {sideNavProps?.isLoading ? (\n // The skeleton takes the hardcoded dimensions of the Okta logo\n <Skeleton variant=\"rounded\" height={24} width={67} />\n ) : (\n <SideNavLogo {...sideNavProps?.logoProps} />\n )}\n </StyledLogoContainer>\n </StyledMenuLogo>\n\n {optionalComponents?.rightSideMenu && (\n <Button\n onClick={toggleRightSideMenu}\n startIcon={\n isRightSideMenuOpen ? <CloseIcon /> : <MoreIcon />\n }\n testId=\"userprofile-menu--icon\"\n variant=\"floating\"\n />\n )}\n </StyledTopNavMenu>\n\n {optionalComponents?.topNavLeftSide && (\n <StyledTopNavSearch odysseyDesignTokens={odysseyDesignTokens}>\n {optionalComponents?.topNavLeftSide}\n </StyledTopNavSearch>\n )}\n </StyledTopNav>\n </ErrorBoundary>\n )}\n\n <StyledAppContentArea>\n <StyledLeftSideContainer isOpen={isLeftSideMenuOpen}>\n {\n / If SideNav should be initially visible and we have not yet received props, render SideNav with minimal inputs */\n initialVisibleSections?.includes(\"SideNav\") &&\n sideNavProps === undefined && (\n <ErrorBoundary fallback={null} onError={onError}>\n <SideNav isLoading sideNavItems={emptySideNavItems} />\n </ErrorBoundary>\n )\n }\n\n {sideNavProps && (\n <ErrorBoundary fallback={null} onError={onError}>\n <StyledSideNavContainer>\n <SideNav\n {...{\n ...{\n ...sideNavProps,\n // This hides the side nav logo or app name from showing up as we already have one in the narrow top nav.\n appName: undefined,\n logoProps: undefined,\n },\n ...(sideNavProps.hasCustomFooter &&\n optionalComponents?.sideNavFooter\n ? {\n footerComponent: optionalComponents.sideNavFooter,\n footerItems: undefined,\n hasCustomFooter: sideNavProps.hasCustomFooter,\n }\n : {\n footerItems: sideNavProps.footerItems,\n hasCustomFooter: false,\n }),\n }}\n isCollapsed={false}\n isCollapsible={false}\n isObtrusive\n />\n </StyledSideNavContainer>\n </ErrorBoundary>\n )}\n </StyledLeftSideContainer>\n\n <StyledRightSideContainer\n isOpen={isRightSideMenuOpen}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n <StyledSideNavContainer>\n {optionalComponents?.rightSideMenu}\n </StyledSideNavContainer>\n </StyledRightSideContainer>\n\n <StyledAppContainer\n appBackgroundColor={uiShellContext?.appBackgroundColor}\n tabIndex={0}\n ref={uiShellAppAreaRef}\n >\n <InnerAppContainer isContentScrolled={isContentScrolled} />\n </StyledAppContainer>\n </StyledAppContentArea>\n </StyledUiShellContainer>\n </>\n );\n};\n\nconst MemoizedNarrowUiShellContent = memo(NarrowUiShellContent);\nMemoizedNarrowUiShellContent.displayName = \"NarrowUiShellContent\";\n\nexport { MemoizedNarrowUiShellContent as NarrowUiShellContent };\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"NarrowUiShellContent.js","names":["styled","memo","useCallback","useEffect","useRef","useState","ErrorBoundary","Button","CloseIcon","MoreIcon","InnerAppContainer","useOdysseyDesignTokens","SideNav","SideNavLogo","HamburgerMenuIcon","useUiShellContext","emptySideNavItems","SIDE_NAV_WIDTH","TOP_NAV_HEIGHT","UI_SHELL_BASE_Z_INDEX","useScrollState","useMatchAppElementToUiShellAppArea","hexToRgb","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","StyledAppContentArea","gridArea","position","display","gridGap","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","height","width","StyledAppContainer","shouldForwardProp","prop","appBackgroundColor","backgroundColor","overflow","StyledBannersContainer","zIndex","StyledLeftSideContainer","isOpen","overflowY","StyledRightSideContainer","odysseyDesignTokens","HueNeutralWhite","maxWidth","right","StyledMenuLogo","alignItems","gap","Spacing3","StyledLogoContainer","paddingBlock","Spacing4","maxHeight","StyledPageOverlay","HueNeutral900","asFormattedString","replace","left","top","StyledSideNavContainer","StyledUiShellContainer","HueNeutral50","StyledTopNav","isContentScrolled","topNavBackgroundColor","boxShadow","DepthMedium","undefined","clipPath","flexDirection","justifyContent","transition","TransitionDurationMain","TransitionTimingMain","StyledTopNavMenu","minHeight","Spacing2","paddingInline","borderBottomColor","HueNeutral100","borderBottomStyle","BorderStyleMain","borderBottomWidth","BorderWidthMain","StyledTopNavSearch","NarrowUiShellContent","appElement","appElementScrollingMode","hasStandardAppContentPadding","initialVisibleSections","onError","console","error","optionalComponents","sideNavProps","topNavProps","uiShellContext","sideNavContainerRef","topNavContainerRef","uiShellAppAreaRef","isLeftSideMenuOpen","setIsLeftSideMenuOpen","isRightSideMenuOpen","setIsRightSideMenuOpen","closeSideMenus","unsubscribeFromCloseRightSideMenu","subscribeToCloseRightSideMenu","unsubscribeFromSideNavItemClicked","subscribeToCloseSideNavMenu","toggleLeftSideMenu","toggleRightSideMenu","parentContainerRef","paddingMode","uiShellResizableRefs","children","onClick","ref","banners","includes","fallback","sideNavBackgroundColor","isCollapsible","isCollapsed","startIcon","testId","variant","isLoading","_Skeleton","logoProps","rightSideMenu","topNavLeftSide","sideNavItems","appName","hasCustomFooter","sideNavFooter","footerComponent","footerItems","isObtrusive","tabIndex","MemoizedNarrowUiShellContent","displayName"],"sources":["../../../src/ui-shell/NarrowUiShellContent.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 styled from \"@emotion/styled\";\nimport { Skeleton } from \"@mui/material\";\nimport {\n CSSProperties,\n memo,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { ErrorBoundary } from \"react-error-boundary\";\n\nimport { Button } from \"../Buttons/Button.js\";\nimport type { HtmlProps } from \"../HtmlProps.js\";\nimport { CloseIcon } from \"../icons.generated/Close.js\";\nimport { MoreIcon } from \"../icons.generated/More.js\";\nimport { InnerAppContainer } from \"./InnerAppContainer.js\";\nimport {\n DesignTokens,\n useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext.js\";\nimport { SideNav } from \"./SideNav/SideNav.js\";\nimport { SideNavLogo } from \"./SideNav/SideNavLogo.js\";\nimport { HamburgerMenuIcon } from \"./TopNav/HamburgerMenuIcon.js\";\nimport { UiShellColors, useUiShellContext } from \"./UiShellProvider.js\";\nimport {\n UiShellNavComponentProps,\n UiShellContentProps,\n} from \"./uiShellContentTypes.js\";\nimport {\n emptySideNavItems,\n SIDE_NAV_WIDTH,\n TOP_NAV_HEIGHT,\n UI_SHELL_BASE_Z_INDEX,\n} from \"./uiShellSharedConstants.js\";\nimport { useScrollState } from \"./useScrollState.js\";\nimport { useMatchAppElementToUiShellAppArea } from \"./useMatchAppElementToUiShellAppArea.js\";\nimport { hexToRgb } from \"../hexToRgb.js\";\n\nconst StyledAppContentArea = styled(\"div\")({\n gridArea: \"app-content\",\n position: \"relative\",\n display: \"grid\",\n gridGap: 0,\n gridTemplateAreas: `\n \"left-side app-container right-side\"\n `,\n gridTemplateColumns: \"auto 1fr auto\",\n gridTemplateRows: \"1fr\",\n height: \"100%\",\n width: \"100%\",\n});\n\nconst StyledAppContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"appBackgroundColor\" && prop !== \"odysseyDesignTokens\",\n})<{\n appBackgroundColor?: UiShellColors[\"appBackgroundColor\"];\n}>(({ appBackgroundColor }) => ({\n backgroundColor: appBackgroundColor,\n gridArea: \"app-container\",\n height: \"100%\",\n overflow: \"hidden\",\n width: \"100%\",\n}));\n\nconst StyledBannersContainer = styled(\"div\")({\n gridArea: \"banners\",\n zIndex: UI_SHELL_BASE_Z_INDEX,\n});\n\nconst StyledLeftSideContainer = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"isOpen\",\n})<{\n isOpen: boolean;\n}>(({ isOpen }) => ({\n display: isOpen ? \"block\" : \"none\",\n height: \"100%\",\n gridArea: \"left-side\",\n overflowY: \"auto\",\n position: \"absolute\",\n zIndex: UI_SHELL_BASE_Z_INDEX,\n}));\n\nconst StyledRightSideContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"isOpen\" && prop !== \"odysseyDesignTokens\",\n})<{\n isOpen: boolean;\n odysseyDesignTokens: DesignTokens;\n}>(({ isOpen, odysseyDesignTokens }) => ({\n backgroundColor: odysseyDesignTokens.HueNeutralWhite,\n display: isOpen ? \"block\" : \"none\",\n gridArea: \"right-side\",\n height: \"100%\",\n maxWidth: SIDE_NAV_WIDTH,\n overflowY: \"auto\",\n position: \"absolute\",\n right: 0,\n width: SIDE_NAV_WIDTH,\n zIndex: UI_SHELL_BASE_Z_INDEX,\n}));\n\nconst StyledMenuLogo = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n alignItems: \"center\",\n display: \"inline-flex\",\n gap: odysseyDesignTokens.Spacing3,\n}));\n\nconst StyledLogoContainer = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n height: TOP_NAV_HEIGHT,\n paddingBlock: odysseyDesignTokens.Spacing4,\n\n \"svg, img\": {\n maxHeight: \"100%\",\n width: \"auto\",\n maxWidth: \"100%\",\n },\n}));\n\nconst StyledPageOverlay = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n backgroundColor: hexToRgb(\n odysseyDesignTokens.HueNeutral900,\n ).asFormattedString.replace(/rgb\$(.+)\$$/, \"rgba($1, 0.26)\"),\n gridArea: \"app-content\",\n height: \"100vh\",\n left: 0,\n position: \"absolute\",\n top: 0,\n width: \"100vw\",\n zIndex: UI_SHELL_BASE_Z_INDEX,\n}));\n\nconst StyledSideNavContainer = styled(\"div\")({\n height: \"100%\", // Without this value, side nav won't fill up the height if the content is too short.\n});\n\nconst StyledUiShellContainer = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n backgroundColor: odysseyDesignTokens.HueNeutral50,\n display: \"grid\",\n gridGap: 0,\n gridTemplateAreas: `\n \"banners\"\n \"top-nav\"\n \"app-content\"\n `,\n gridTemplateColumns: \"1fr\",\n gridTemplateRows: \"auto auto 1fr\",\n height: \"100vh\",\n overflow: \"hidden\",\n width: \"100vw\",\n}));\n\nconst StyledTopNav = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" &&\n prop !== \"isContentScrolled\" &&\n prop !== \"topNavBackgroundColor\",\n})<{\n isContentScrolled?: boolean;\n odysseyDesignTokens: DesignTokens;\n topNavBackgroundColor?: UiShellColors[\"topNavBackgroundColor\"];\n}>(({ odysseyDesignTokens, isContentScrolled, topNavBackgroundColor }) => ({\n alignItems: \"stretch\",\n backgroundColor: odysseyDesignTokens.HueNeutralWhite \|\| topNavBackgroundColor, // This logic doesn't make sense, but I wanted to leave it here for when we eventually make a decision on `topNavBackgroundColor`. --Kevin Ghadyani\n boxShadow: isContentScrolled ? odysseyDesignTokens.DepthMedium : undefined,\n clipPath: \"inset(0 0 -100vh 0)\",\n display: \"flex\",\n flexDirection: \"column\",\n gridArea: \"top-nav\",\n height: \"100%\",\n justifyContent: \"center\",\n position: \"relative\",\n transition: `box-shadow ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n zIndex: UI_SHELL_BASE_Z_INDEX,\n}));\n\nconst StyledTopNavMenu = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" && prop !== \"topNavBackgroundColor\",\n})<{\n odysseyDesignTokens: DesignTokens;\n topNavBackgroundColor?: UiShellColors[\"topNavBackgroundColor\"];\n}>(({ odysseyDesignTokens, topNavBackgroundColor }) => ({\n alignItems: \"center\",\n display: \"flex\",\n gap: odysseyDesignTokens.Spacing3,\n height: \"100%\",\n justifyContent: \"space-between\",\n maxHeight: TOP_NAV_HEIGHT,\n minHeight: TOP_NAV_HEIGHT,\n paddingBlock: odysseyDesignTokens.Spacing2,\n paddingInline: odysseyDesignTokens.Spacing3,\n transition: `box-shadow ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n\n ...(topNavBackgroundColor === odysseyDesignTokens.HueNeutralWhite &&\n ({\n borderBottomColor: odysseyDesignTokens.HueNeutral100,\n borderBottomStyle: odysseyDesignTokens.BorderStyleMain,\n borderBottomWidth: odysseyDesignTokens.BorderWidthMain,\n } as CSSProperties)),\n}));\n\nconst StyledTopNavSearch = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n paddingBlock: odysseyDesignTokens.Spacing2,\n paddingInline: odysseyDesignTokens.Spacing3,\n}));\n\nexport type NarrowUiShellContentProps = Pick<HtmlProps, \"testId\"> &\n Pick<UiShellNavComponentProps, \"sideNavProps\" \| \"topNavProps\"> &\n UiShellContentProps;\n\nconst NarrowUiShellContent = ({\n appElement,\n appElementScrollingMode,\n hasStandardAppContentPadding = true,\n initialVisibleSections = [\"TopNav\", \"SideNav\", \"AppSwitcher\"],\n onError = console.error,\n optionalComponents,\n sideNavProps,\n topNavProps,\n}: NarrowUiShellContentProps) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n const uiShellContext = useUiShellContext();\n\n const { isContentScrolled } = useScrollState(appElement);\n\n const sideNavContainerRef = useRef<HTMLDivElement>(null);\n const topNavContainerRef = useRef<HTMLDivElement>(null);\n const uiShellAppAreaRef = useRef<HTMLDivElement>(null);\n\n const [isLeftSideMenuOpen, setIsLeftSideMenuOpen] = useState(false);\n const [isRightSideMenuOpen, setIsRightSideMenuOpen] = useState(false);\n\n const closeSideMenus = useCallback(() => {\n setIsLeftSideMenuOpen(false);\n setIsRightSideMenuOpen(false);\n }, []);\n\n useEffect(() => {\n const unsubscribeFromCloseRightSideMenu =\n uiShellContext?.subscribeToCloseRightSideMenu(() => {\n closeSideMenus();\n });\n\n const unsubscribeFromSideNavItemClicked =\n uiShellContext?.subscribeToCloseSideNavMenu(() => {\n closeSideMenus();\n });\n\n return () => {\n unsubscribeFromCloseRightSideMenu?.();\n unsubscribeFromSideNavItemClicked?.();\n };\n }, [closeSideMenus, uiShellContext]);\n\n const toggleLeftSideMenu = useCallback(() => {\n setIsRightSideMenuOpen(false);\n setIsLeftSideMenuOpen((isLeftSideMenuOpen) => !isLeftSideMenuOpen);\n }, []);\n\n const toggleRightSideMenu = useCallback(() => {\n setIsLeftSideMenuOpen(false);\n setIsRightSideMenuOpen((isRightSideMenuOpen) => !isRightSideMenuOpen);\n }, []);\n\n const { parentContainerRef } = useMatchAppElementToUiShellAppArea({\n appElement,\n appElementScrollingMode,\n paddingMode: hasStandardAppContentPadding ? \"compact\" : \"none\",\n uiShellAppAreaRef,\n uiShellResizableRefs: [\n sideNavContainerRef,\n topNavContainerRef,\n uiShellAppAreaRef,\n ],\n });\n\n return (\n <>\n {(isLeftSideMenuOpen \|\| isRightSideMenuOpen) && (\n <StyledPageOverlay\n odysseyDesignTokens={odysseyDesignTokens}\n onClick={closeSideMenus}\n />\n )}\n\n <StyledUiShellContainer\n odysseyDesignTokens={odysseyDesignTokens}\n ref={parentContainerRef}\n >\n <StyledBannersContainer>\n {optionalComponents?.banners}\n </StyledBannersContainer>\n\n {(initialVisibleSections?.includes(\"TopNav\") \|\| topNavProps) && (\n <ErrorBoundary fallback={null} onError={onError}>\n <StyledTopNav\n isContentScrolled={isContentScrolled}\n odysseyDesignTokens={odysseyDesignTokens}\n topNavBackgroundColor={uiShellContext?.topNavBackgroundColor}\n >\n <StyledTopNavMenu\n odysseyDesignTokens={odysseyDesignTokens}\n topNavBackgroundColor={uiShellContext?.sideNavBackgroundColor}\n >\n <StyledMenuLogo odysseyDesignTokens={odysseyDesignTokens}>\n {(sideNavProps?.isCollapsible \|\|\n !sideNavProps?.isCollapsed) && (\n <Button\n onClick={toggleLeftSideMenu}\n startIcon={<HamburgerMenuIcon />}\n testId=\"sidenav-menu--icon\"\n variant=\"floating\"\n />\n )}\n\n <StyledLogoContainer\n odysseyDesignTokens={odysseyDesignTokens}\n >\n {sideNavProps?.isLoading ? (\n // The skeleton takes the hardcoded dimensions of the Okta logo\n <Skeleton variant=\"rounded\" height={24} width={67} />\n ) : (\n <SideNavLogo {...sideNavProps?.logoProps} />\n )}\n </StyledLogoContainer>\n </StyledMenuLogo>\n\n {optionalComponents?.rightSideMenu && (\n <Button\n onClick={toggleRightSideMenu}\n startIcon={\n isRightSideMenuOpen ? <CloseIcon /> : <MoreIcon />\n }\n testId=\"userprofile-menu--icon\"\n variant=\"floating\"\n />\n )}\n </StyledTopNavMenu>\n\n {optionalComponents?.topNavLeftSide && (\n <StyledTopNavSearch odysseyDesignTokens={odysseyDesignTokens}>\n {optionalComponents?.topNavLeftSide}\n </StyledTopNavSearch>\n )}\n </StyledTopNav>\n </ErrorBoundary>\n )}\n\n <StyledAppContentArea>\n <StyledLeftSideContainer isOpen={isLeftSideMenuOpen}>\n {\n / If SideNav should be initially visible and we have not yet received props, render SideNav with minimal inputs */\n initialVisibleSections?.includes(\"SideNav\") &&\n sideNavProps === undefined && (\n <ErrorBoundary fallback={null} onError={onError}>\n <SideNav isLoading sideNavItems={emptySideNavItems} />\n </ErrorBoundary>\n )\n }\n\n {sideNavProps && (\n <ErrorBoundary fallback={null} onError={onError}>\n <StyledSideNavContainer>\n <SideNav\n {...{\n ...{\n ...sideNavProps,\n // This hides the side nav logo or app name from showing up as we already have one in the narrow top nav.\n appName: undefined,\n logoProps: undefined,\n },\n ...(sideNavProps.hasCustomFooter &&\n optionalComponents?.sideNavFooter\n ? {\n footerComponent: optionalComponents.sideNavFooter,\n footerItems: undefined,\n hasCustomFooter: sideNavProps.hasCustomFooter,\n }\n : {\n footerItems: sideNavProps.footerItems,\n hasCustomFooter: false,\n }),\n }}\n isCollapsed={false}\n isCollapsible={false}\n isObtrusive\n />\n </StyledSideNavContainer>\n </ErrorBoundary>\n )}\n </StyledLeftSideContainer>\n\n <StyledRightSideContainer\n isOpen={isRightSideMenuOpen}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n <StyledSideNavContainer>\n {optionalComponents?.rightSideMenu}\n </StyledSideNavContainer>\n </StyledRightSideContainer>\n\n <StyledAppContainer\n appBackgroundColor={uiShellContext?.appBackgroundColor}\n tabIndex={0}\n ref={uiShellAppAreaRef}\n >\n <InnerAppContainer isContentScrolled={isContentScrolled} />\n </StyledAppContainer>\n </StyledAppContentArea>\n </StyledUiShellContainer>\n </>\n );\n};\n\nconst MemoizedNarrowUiShellContent = memo(NarrowUiShellContent);\nMemoizedNarrowUiShellContent.displayName = \"NarrowUiShellContent\";\n\nexport { MemoizedNarrowUiShellContent as NarrowUiShellContent };\n"],"mappings":"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","ignoreList":[]}

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

@@ -145,7 +145,8 @@ const StyledSideNavListContainer = styled("ul")(() => ({
   padding: 0,
   listStyle: "none",
   listStyleType: "none",
-  margin: 0
+  margin: 0,
+  width: "100%"
 }));
 const StyledSideNavScrollableContainer = styled("div", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens"
@@ -309,10 +310,6 @@ const SideNav = ({
     onMount,
     onUpdate
   });
-  console.log({
-    isCollapsed,
-    isSideNavCollapsed
-  });
   useEffect(() => {
     const updateIsContentScrollable = () => {
       if (scrollableContentRef.current && scrollableContentRef.current.parentElement) {
@@ -404,29 +401,27 @@ const SideNav = ({
   const processedSideNavItems = useMemo(() => {
     return sideNavItemsList?.map(item => ({
       ...item,
-      childNavItems: item.nestedNavItems?.map(childProps => {
-        return {
-          id: childProps.id,
-          isSelected: childProps.isSelected,
-          isDisabled: childProps.isDisabled,
-          isSortable: childProps.isSortable,
-          navItem: _jsx(SideNavItemContentContext.Provider, {
-            value: {
-              ...sideNavItemContentProviderValue,
-              depth: 2,
-              isSortable: item.isSortable
-            },
-            children: _jsx(SideNavItemContent, {
-              ...childProps,
-              scrollRef: getRefIfThisIsFirstNodeWithIsSelected(childProps.id),
-              onItemSelected: setSelectedItem,
-              translate: childProps.translate
-            })
-          }, childProps.id)
-        };
-      })
+      childNavItems: item.nestedNavItems?.map(childProps => ({
+        id: childProps.id,
+        isSelected: childProps.isSelected,
+        isDisabled: childProps.isDisabled,
+        isSortable: childProps.isSortable,
+        navItem: _jsx(SideNavItemContentContext.Provider, {
+          value: {
+            ...sideNavItemContentProviderValue,
+            depth: 2,
+            isSortable: item.isSortable
+          },
+          children: _jsx(SideNavItemContent, {
+            ...childProps,
+            onItemSelected: setSelectedItem,
+            scrollRef: getRefIfThisIsFirstNodeWithIsSelected(childProps.id),
+            translate: childProps.translate
+          })
+        }, childProps.id)
+      }))
     }));
-  }, [getRefIfThisIsFirstNodeWithIsSelected, sideNavItemsList, sideNavItemContentProviderValue, setSelectedItem]);
+  }, [getRefIfThisIsFirstNodeWithIsSelected, setSelectedItem, sideNavItemContentProviderValue, sideNavItemsList]);
   const sideNavExpandClickHandler = useCallback(() => {
     setIsSideNavCollapsed(isSideNavCollapsed => {
       if (isSideNavCollapsed) {
@@ -513,15 +508,16 @@ const SideNav = ({
               ref: scrollableContentRef,
               children: isLoading ? Array(6).fill(null).map((_, index) => _jsx(LoadingItem, {}, index)) : processedSideNavItems?.map(item => {
                 const {
-                  id,
-                  label,
-                  isSectionHeader,
-                  startIcon,
                   childNavItems,
-                  isSortable,
+                  href,
+                  id,
                   isDefaultExpanded,
                   isDisabled,
-                  isExpanded
+                  isExpanded,
+                  isSectionHeader,
+                  isSortable,
+                  label,
+                  startIcon
                 } = item;
                 if (isSectionHeader) {
                   return _jsx(ErrorBoundary, {
@@ -537,7 +533,37 @@ const SideNav = ({
                     })
                   }, id);
                 } else if (childNavItems) {
-                  return _jsx(ErrorBoundary, {
+                  const nestedChildren = _jsx(StyledSideNavListContainer, {
+                    role: "presentation",
+                    children: isSortable ? _jsx(SortableList, {
+                      parentId: item.id,
+                      items: childNavItems,
+                      onChange: setSortedItems,
+                      renderItem: sortableItem => _jsx(SortableList.Item, {
+                        id: sortableItem.id,
+                        isDisabled: sortableItem.isDisabled,
+                        isSelected: sortableItem.isSelected,
+                        isSortable: sortableItem.isSortable,
+                        children: sortableItem.navItem
+                      })
+                    }) : childNavItems.map(item => item.navItem)
+                  });
+                  return href ? _jsxs(ErrorBoundary, {
+                    fallback: blankElement,
+                    children: [_jsx(SideNavItemContent, {
+                      ...item,
+                      href: href,
+                      onItemSelected: setSelectedItem,
+                      scrollRef: getRefIfThisIsFirstNodeWithIsSelected(item.id),
+                      startIcon: item.startIcon
+                    }), _jsx(StyledSideNavListItem, {
+                      id: `${id}-items`,
+                      odysseyDesignTokens: odysseyDesignTokens,
+                      disabled: isDisabled,
+                      "aria-disabled": isDisabled,
+                      children: nestedChildren
+                    })]
+                  }, id) : _jsx(ErrorBoundary, {
                     fallback: blankElement,
                     children: _jsx(StyledSideNavListItem, {
                       id: id,
@@ -551,21 +577,7 @@ const SideNav = ({
                         isExpanded: isExpanded,
                         startIcon: startIcon,
                         isDisabled: isDisabled,
-                        children: _jsx(StyledSideNavListContainer, {
-                          role: "none",
-                          children: isSortable ? _jsx(SortableList, {
-                            parentId: item.id,
-                            items: childNavItems,
-                            onChange: setSortedItems,
-                            renderItem: sortableItem => _jsx(SortableList.Item, {
-                              id: sortableItem.id,
-                              isDisabled: sortableItem.isDisabled,
-                              isSelected: sortableItem.isSelected,
-                              isSortable: sortableItem.isSortable,
-                              children: sortableItem.navItem
-                            })
-                          }) : childNavItems.map(item => item.navItem)
-                        })
+                        children: nestedChildren
                       })
                     })
                   }, id);