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/cjs/ui-shell/InnerAppContainer.cjs CHANGED Viewed

@@ -21,6 +21,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * See the License for the specific language governing permissions and limitations under the License.
  */const StyledAppContainerShadowShared = (0, _styled.default)("div")({
   left: 0,
+  pointerEvents: "none",
   position: "absolute",
   top: 0,
   width: "100%",

package/dist/cjs/ui-shell/InnerAppContainer.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InnerAppContainer.cjs","names":["_styled","_interopRequireDefault","require","_react","_uiShellSharedConstants","_jsxRuntime","e","__esModule","default","StyledAppContainerShadowShared","styled","left","position","top","width","zIndex","UI_SHELL_BASE_Z_INDEX","StyledAppContainerShadow1","exports","background","height","StyledAppContainerShadow2","StyledAppContainerShadow3","InnerAppContainer","isContentScrolled","jsxs","Fragment","children","jsx","MemoizedInnerAppContainer","memo","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":";;;;;;AAYA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAF,OAAA;AAAoE,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAdpE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAOA,MAAMG,8BAA8B,GAAG,IAAAC,eAAM,EAAC,KAAK,CAAC,CAAC;EACnDC,IAAI,EAAE,CAAC;EACPC,QAAQ,EAAE,UAAU;EACpBC,GAAG,EAAE,CAAC;EACNC,KAAK,EAAE,MAAM;EACbC,MAAM,EAAEC;AACV,CAAC,CAAC;AAEK,MAAMC,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAG,~~IAAAP~~,eAAM,EAACD,8BAA8B,CAAC,CAC7E;~~EACEU~~,UAAU,EAAE;AAChB;AACA;AACA;AACA,MAAM;EACFC,MAAM,EAAE;AACV,CACF,CAAC;AAEM,MAAMC,yBAAyB,GAAAH,OAAA,CAAAG,yBAAA,GAAG,~~IAAAX~~,eAAM,EAACD,8BAA8B,CAAC,CAC7E;~~EACEU~~,UAAU,EAAE;AAChB;AACA;AACA;AACA,MAAM;EACFC,MAAM,EAAE;AACV,CACF,CAAC;AAEM,MAAME,yBAAyB,GAAAJ,OAAA,CAAAI,yBAAA,GAAG,~~IAAAZ~~,eAAM,EAACD,8BAA8B,CAAC,CAC7E;~~EACEU~~,UAAU,EAAE;AAChB;AACA;AACA;AACA,MAAM;EACFC,MAAM,EAAE;AACV,CACF,CAAC;AAMD,MAAMG,iBAAiB,GAAGA,CAAC;EAAEC;AAA0C,CAAC,KACtEA,iBAAiB,GACf,~~IAAAnB~~,WAAA,~~CAAAoB~~,IAAA,~~EAAApB~~,WAAA,~~CAAAqB~~,QAAA;EAAAC,QAAA,GACE,~~IAAAtB~~,WAAA,~~CAAAuB~~,GAAA,EAACX,yBAAyB,IAAE,CAAC,EAC7B,~~IAAAZ~~,WAAA,~~CAAAuB~~,GAAA,EAACP,yBAAyB,IAAE,CAAC,EAC7B,~~IAAAhB~~,WAAA,~~CAAAuB~~,GAAA,EAACN,yBAAyB,IAAE,CAAC;AAAA,CAC7B,CAAC,GACD,IAAI;AAEV,MAAMO,yBAAyB,GAAAX,OAAA,CAAAK,iBAAA,GAAG,IAAAO,WAAI,EAACP,iBAAiB,CAAC;AACzDM,yBAAyB,CAACE,WAAW,GAAG,mBAAmB","ignoreList":[]}
1	+ {"version":3,"file":"InnerAppContainer.cjs","names":["_styled","_interopRequireDefault","require","_react","_uiShellSharedConstants","_jsxRuntime","e","__esModule","default","StyledAppContainerShadowShared","styled","left","pointerEvents","position","top","width","zIndex","UI_SHELL_BASE_Z_INDEX","StyledAppContainerShadow1","exports","background","height","StyledAppContainerShadow2","StyledAppContainerShadow3","InnerAppContainer","isContentScrolled","jsxs","Fragment","children","jsx","MemoizedInnerAppContainer","memo","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":";;;;;;AAYA,IAAAA,OAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAF,OAAA;AAAoE,IAAAG,WAAA,GAAAH,OAAA;AAAA,SAAAD,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAdpE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAOA,MAAMG,8BAA8B,GAAG,IAAAC,eAAM,EAAC,KAAK,CAAC,CAAC;EACnDC,IAAI,EAAE,CAAC;EACPC,aAAa,EAAE,MAAM;EACrBC,QAAQ,EAAE,UAAU;EACpBC,GAAG,EAAE,CAAC;EACNC,KAAK,EAAE,MAAM;EACbC,MAAM,EAAEC;AACV,CAAC,CAAC;AAEK,MAAMC,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAG,IAAAR,eAAM,EAACD,8BAA8B,CAAC,CAC7E;EACEW,UAAU,EAAE;AAChB;AACA;AACA;AACA,MAAM;EACFC,MAAM,EAAE;AACV,CACF,CAAC;AAEM,MAAMC,yBAAyB,GAAAH,OAAA,CAAAG,yBAAA,GAAG,IAAAZ,eAAM,EAACD,8BAA8B,CAAC,CAC7E;EACEW,UAAU,EAAE;AAChB;AACA;AACA;AACA,MAAM;EACFC,MAAM,EAAE;AACV,CACF,CAAC;AAEM,MAAME,yBAAyB,GAAAJ,OAAA,CAAAI,yBAAA,GAAG,IAAAb,eAAM,EAACD,8BAA8B,CAAC,CAC7E;EACEW,UAAU,EAAE;AAChB;AACA;AACA;AACA,MAAM;EACFC,MAAM,EAAE;AACV,CACF,CAAC;AAMD,MAAMG,iBAAiB,GAAGA,CAAC;EAAEC;AAA0C,CAAC,KACtEA,iBAAiB,GACf,IAAApB,WAAA,CAAAqB,IAAA,EAAArB,WAAA,CAAAsB,QAAA;EAAAC,QAAA,GACE,IAAAvB,WAAA,CAAAwB,GAAA,EAACX,yBAAyB,IAAE,CAAC,EAC7B,IAAAb,WAAA,CAAAwB,GAAA,EAACP,yBAAyB,IAAE,CAAC,EAC7B,IAAAjB,WAAA,CAAAwB,GAAA,EAACN,yBAAyB,IAAE,CAAC;AAAA,CAC7B,CAAC,GACD,IAAI;AAEV,MAAMO,yBAAyB,GAAAX,OAAA,CAAAK,iBAAA,GAAG,IAAAO,WAAI,EAACP,iBAAiB,CAAC;AACzDM,yBAAyB,CAACE,WAAW,GAAG,mBAAmB","ignoreList":[]}

package/dist/cjs/ui-shell/NarrowUiShellContent.cjs CHANGED Viewed

@@ -46,7 +46,6 @@ const StyledAppContentArea = (0, _styled.default)("div")({
   gridTemplateColumns: "auto 1fr auto",
   gridTemplateRows: "1fr",
   height: "100%",
-  pointerEvents: "none",
   width: "100%"
 });
 const StyledAppContainer = (0, _styled.default)("div", {
@@ -55,8 +54,8 @@ const StyledAppContainer = (0, _styled.default)("div", {
   appBackgroundColor
 }) => ({
   backgroundColor: appBackgroundColor,
-  height: "100%",
   gridArea: "app-container",
+  height: "100%",
   overflow: "hidden",
   width: "100%"
 }));

package/dist/cjs/ui-shell/NarrowUiShellContent.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NarrowUiShellContent.cjs","names":["_styled","_interopRequireDefault","require","_react","_reactErrorBoundary","_Button","_Close","_More","_InnerAppContainer","_OdysseyDesignTokensContext","_SideNav","_SideNavLogo","_HamburgerMenuIcon","_UiShellProvider","_uiShellSharedConstants","_useScrollState","_useMatchAppElementToUiShellAppArea","_hexToRgb","_jsxRuntime","e","__esModule","default","StyledAppContentArea","styled","gridArea","position","display","gridGap","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","height","pointerEvents","width","StyledAppContainer","shouldForwardProp","prop","appBackgroundColor","backgroundColor","overflow","StyledBannersContainer","zIndex","UI_SHELL_BASE_Z_INDEX","StyledLeftSideContainer","isOpen","overflowY","StyledRightSideContainer","odysseyDesignTokens","HueNeutralWhite","maxWidth","SIDE_NAV_WIDTH","right","StyledMenuLogo","alignItems","gap","Spacing3","StyledLogoContainer","TOP_NAV_HEIGHT","paddingBlock","Spacing4","maxHeight","StyledPageOverlay","hexToRgb","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","useOdysseyDesignTokens","uiShellContext","useUiShellContext","useScrollState","sideNavContainerRef","useRef","topNavContainerRef","uiShellAppAreaRef","isLeftSideMenuOpen","setIsLeftSideMenuOpen","useState","isRightSideMenuOpen","setIsRightSideMenuOpen","closeSideMenus","useCallback","useEffect","unsubscribeFromCloseRightSideMenu","subscribeToCloseRightSideMenu","unsubscribeFromSideNavItemClicked","subscribeToCloseSideNavMenu","toggleLeftSideMenu","toggleRightSideMenu","parentContainerRef","useMatchAppElementToUiShellAppArea","paddingMode","uiShellResizableRefs","jsxs","Fragment","children","jsx","onClick","ref","banners","includes","ErrorBoundary","fallback","sideNavBackgroundColor","isCollapsible","isCollapsed","Button","startIcon","HamburgerMenuIcon","testId","variant","isLoading","_Skeleton2","SideNavLogo","logoProps","rightSideMenu","CloseIcon","MoreIcon","topNavLeftSide","SideNav","sideNavItems","emptySideNavItems","appName","hasCustomFooter","sideNavFooter","footerComponent","footerItems","isObtrusive","tabIndex","InnerAppContainer","MemoizedNarrowUiShellContent","exports","memo","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.cjs","names":["_styled","_interopRequireDefault","require","_react","_reactErrorBoundary","_Button","_Close","_More","_InnerAppContainer","_OdysseyDesignTokensContext","_SideNav","_SideNavLogo","_HamburgerMenuIcon","_UiShellProvider","_uiShellSharedConstants","_useScrollState","_useMatchAppElementToUiShellAppArea","_hexToRgb","_jsxRuntime","e","__esModule","default","StyledAppContentArea","styled","gridArea","position","display","gridGap","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","height","width","StyledAppContainer","shouldForwardProp","prop","appBackgroundColor","backgroundColor","overflow","StyledBannersContainer","zIndex","UI_SHELL_BASE_Z_INDEX","StyledLeftSideContainer","isOpen","overflowY","StyledRightSideContainer","odysseyDesignTokens","HueNeutralWhite","maxWidth","SIDE_NAV_WIDTH","right","StyledMenuLogo","alignItems","gap","Spacing3","StyledLogoContainer","TOP_NAV_HEIGHT","paddingBlock","Spacing4","maxHeight","StyledPageOverlay","hexToRgb","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","useOdysseyDesignTokens","uiShellContext","useUiShellContext","useScrollState","sideNavContainerRef","useRef","topNavContainerRef","uiShellAppAreaRef","isLeftSideMenuOpen","setIsLeftSideMenuOpen","useState","isRightSideMenuOpen","setIsRightSideMenuOpen","closeSideMenus","useCallback","useEffect","unsubscribeFromCloseRightSideMenu","subscribeToCloseRightSideMenu","unsubscribeFromSideNavItemClicked","subscribeToCloseSideNavMenu","toggleLeftSideMenu","toggleRightSideMenu","parentContainerRef","useMatchAppElementToUiShellAppArea","paddingMode","uiShellResizableRefs","jsxs","Fragment","children","jsx","onClick","ref","banners","includes","ErrorBoundary","fallback","sideNavBackgroundColor","isCollapsible","isCollapsed","Button","startIcon","HamburgerMenuIcon","testId","variant","isLoading","_Skeleton2","SideNavLogo","logoProps","rightSideMenu","CloseIcon","MoreIcon","topNavLeftSide","SideNav","sideNavItems","emptySideNavItems","appName","hasCustomFooter","sideNavFooter","footerComponent","footerItems","isObtrusive","tabIndex","InnerAppContainer","MemoizedNarrowUiShellContent","exports","memo","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/cjs/ui-shell/SideNav/SideNav.cjs CHANGED Viewed

@@ -152,7 +152,8 @@ const StyledSideNavListContainer = (0, _styled.default)("ul")(() => ({
   padding: 0,
   listStyle: "none",
   listStyleType: "none",
-  margin: 0
+  margin: 0,
+  width: "100%"
 }));
 const StyledSideNavScrollableContainer = (0, _styled.default)("div", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens"
@@ -316,10 +317,6 @@ const SideNav = ({
     onMount,
     onUpdate
   });
-  console.log({
-    isCollapsed,
-    isSideNavCollapsed
-  });
   (0, _react.useEffect)(() => {
     const updateIsContentScrollable = () => {
       if (scrollableContentRef.current && scrollableContentRef.current.parentElement) {
@@ -411,29 +408,27 @@ const SideNav = ({
   const processedSideNavItems = (0, _react.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: (0, _jsxRuntime.jsx)(_SideNavItemContentContext.SideNavItemContentContext.Provider, {
-            value: {
-              ...sideNavItemContentProviderValue,
-              depth: 2,
-              isSortable: item.isSortable
-            },
-            children: (0, _jsxRuntime.jsx)(_SideNavItemContent.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: (0, _jsxRuntime.jsx)(_SideNavItemContentContext.SideNavItemContentContext.Provider, {
+          value: {
+            ...sideNavItemContentProviderValue,
+            depth: 2,
+            isSortable: item.isSortable
+          },
+          children: (0, _jsxRuntime.jsx)(_SideNavItemContent.SideNavItemContent, {
+            ...childProps,
+            onItemSelected: setSelectedItem,
+            scrollRef: getRefIfThisIsFirstNodeWithIsSelected(childProps.id),
+            translate: childProps.translate
+          })
+        }, childProps.id)
+      }))
     }));
-  }, [getRefIfThisIsFirstNodeWithIsSelected, sideNavItemsList, sideNavItemContentProviderValue, setSelectedItem]);
+  }, [getRefIfThisIsFirstNodeWithIsSelected, setSelectedItem, sideNavItemContentProviderValue, sideNavItemsList]);
   const sideNavExpandClickHandler = (0, _react.useCallback)(() => {
     setIsSideNavCollapsed(isSideNavCollapsed => {
       if (isSideNavCollapsed) {
@@ -520,15 +515,16 @@ const SideNav = ({
               ref: scrollableContentRef,
               children: isLoading ? Array(6).fill(null).map((_, index) => (0, _jsxRuntime.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 (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
@@ -544,7 +540,37 @@ const SideNav = ({
                     })
                   }, id);
                 } else if (childNavItems) {
-                  return (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
+                  const nestedChildren = (0, _jsxRuntime.jsx)(StyledSideNavListContainer, {
+                    role: "presentation",
+                    children: isSortable ? (0, _jsxRuntime.jsx)(_SortableList.SortableList, {
+                      parentId: item.id,
+                      items: childNavItems,
+                      onChange: setSortedItems,
+                      renderItem: sortableItem => (0, _jsxRuntime.jsx)(_SortableList.SortableList.Item, {
+                        id: sortableItem.id,
+                        isDisabled: sortableItem.isDisabled,
+                        isSelected: sortableItem.isSelected,
+                        isSortable: sortableItem.isSortable,
+                        children: sortableItem.navItem
+                      })
+                    }) : childNavItems.map(item => item.navItem)
+                  });
+                  return href ? (0, _jsxRuntime.jsxs)(_reactErrorBoundary.ErrorBoundary, {
+                    fallback: blankElement,
+                    children: [(0, _jsxRuntime.jsx)(_SideNavItemContent.SideNavItemContent, {
+                      ...item,
+                      href: href,
+                      onItemSelected: setSelectedItem,
+                      scrollRef: getRefIfThisIsFirstNodeWithIsSelected(item.id),
+                      startIcon: item.startIcon
+                    }), (0, _jsxRuntime.jsx)(_SideNavItemContent.StyledSideNavListItem, {
+                      id: `${id}-items`,
+                      odysseyDesignTokens: odysseyDesignTokens,
+                      disabled: isDisabled,
+                      "aria-disabled": isDisabled,
+                      children: nestedChildren
+                    })]
+                  }, id) : (0, _jsxRuntime.jsx)(_reactErrorBoundary.ErrorBoundary, {
                     fallback: blankElement,
                     children: (0, _jsxRuntime.jsx)(_SideNavItemContent.StyledSideNavListItem, {
                       id: id,
@@ -558,21 +584,7 @@ const SideNav = ({
                         isExpanded: isExpanded,
                         startIcon: startIcon,
                         isDisabled: isDisabled,
-                        children: (0, _jsxRuntime.jsx)(StyledSideNavListContainer, {
-                          role: "none",
-                          children: isSortable ? (0, _jsxRuntime.jsx)(_SortableList.SortableList, {
-                            parentId: item.id,
-                            items: childNavItems,
-                            onChange: setSortedItems,
-                            renderItem: sortableItem => (0, _jsxRuntime.jsx)(_SortableList.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);