@okta/odyssey-react-mui 1.44.0 → 1.47.0

package/dist/esm/tools/addSpecificity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"addSpecificity.js","names":["addSpecificity","specificityCount","selector","ampersands","repeat"],"sources":["../../../src/tools/addSpecificity.ts"],"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\n/**\n * Adds CSS specificity to class selectors by prepending a specified number of ampersands.\n * This function helps override MUI component styles by increasing selector specificity.\n *\n * @param {number} specificityCount - Number of ampersands to prepend (e.g., 2 results in \"&&\")\n * @param {string} selector - The selector string to add specificity to.\n *                            Include spaces in the selector if needed for descendant selectors.\n * @returns {string} The selector with added specificity\n *\n * @example\n * // Direct selector: \"&&.MuiButton-root\"\n * addSpecificity(2, \".MuiButton-root\")\n *\n * // Descendant selector: \"&& .MuiButton-root\"\n * addSpecificity(2, \" .MuiButton-root\")\n *\n * // Direct selector with class reference:\n * addSpecificity(2, `.${buttonClasses.root}`)\n *\n * // Descendant selector with class reference:\n * addSpecificity(2, ` .${buttonClasses.root}`)\n *\n * // Combined selector: \"&&.MuiButton-root:hover\"\n * addSpecificity(2, \".MuiButton-root:hover\")\n */\nexport const addSpecificity = (\n  specificityCount: number,\n  selector: string,\n): string => {\n  const ampersands = \"&\".repeat(specificityCount);\n  return `${ampersands}${selector}`;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GA2BA,OAAO,MAAMA,cAAc,GAAGA,CAC5BC,gBAAwB,EACxBC,QAAgB,KACL;EACX,MAAMC,UAAU,GAAG,GAAG,CAACC,MAAM,CAACH,gBAAgB,CAAC;EAC/C,OAAO,GAAGE,UAAU,GAAGD,QAAQ,EAAE;AACnC,CAAC","ignoreList":[]}

package/dist/esm/tools/bufferLatest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bufferLatest.js","names":["createStore","bufferLatest","publish","subscribe","store","isReactAppReadyForProps","unsubscribe","setState","getState","hasState","publishWhenReady","value"],"sources":["../../../src/tools/bufferLatest.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { createStore } from \"./createStore.js\";\n\n/**\n * Buffers the values passed to a publisher, keeping only the latest value, until the subscriber emits.\n *\n * This is useful in restricting publishers from firing events until specific subscribers are active. Once active, the `publish` function reverts to its previous behavior.\n */\nexport const bufferLatest = <Value>({\n  publish,\n  subscribe,\n}: {\n  /**\n   * A function that publishes values to a subscriber, but not the same subscriber as the one passed to this function.\n   *\n   * Only the latest value published by this publisher is kept until the subscriber emits.\n   */\n  publish: (value: Value) => void;\n  /**\n   * A subscription that listens for emissions from a separate publisher.\n   *\n   * When that separate publisher emits, the latest value from the passed-in publish function is emitted as are all future values.\n   */\n  subscribe: (subscriber: () => void) => () => void;\n}) => {\n  const store = createStore<{\n    bufferedValue?: Value;\n    isReactAppReadyForProps: boolean;\n  }>({\n    isReactAppReadyForProps: false,\n  });\n\n  const unsubscribe = subscribe(() => {\n    unsubscribe();\n\n    store.setState(\"isReactAppReadyForProps\", true);\n    store.getState(\"bufferedValue\");\n    if (store.hasState(\"bufferedValue\")) {\n      // If we have a state, then the value in here is what we want. TypeScript expects this to possibly be `undefined` because the type we sent to `createStore` listed `bufferedValue` as optional. TypeScript doesn't seem to have any way of knowing we passed in the value at some point.\n      publish(store.getState(\"bufferedValue\")!);\n    }\n  });\n\n  const publishWhenReady: typeof publish = (value) => {\n    if (store.getState(\"isReactAppReadyForProps\")) {\n      publish(value);\n    } else {\n      store.setState(\"bufferedValue\", value);\n    }\n  };\n\n  return publishWhenReady;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,WAAW,QAAQ,kBAAkB;AAO9C,OAAO,MAAMC,YAAY,GAAGA,CAAQ;EAClCC,OAAO;EACPC;AAcF,CAAC,KAAK;EACJ,MAAMC,KAAK,GAAGJ,WAAW,CAGtB;IACDK,uBAAuB,EAAE;EAC3B,CAAC,CAAC;EAEF,MAAMC,WAAW,GAAGH,SAAS,CAAC,MAAM;IAClCG,WAAW,CAAC,CAAC;IAEbF,KAAK,CAACG,QAAQ,CAAC,yBAAyB,EAAE,IAAI,CAAC;IAC/CH,KAAK,CAACI,QAAQ,CAAC,eAAe,CAAC;IAC/B,IAAIJ,KAAK,CAACK,QAAQ,CAAC,eAAe,CAAC,EAAE;MAEnCP,OAAO,CAACE,KAAK,CAACI,QAAQ,CAAC,eAAe,CAAE,CAAC;IAC3C;EACF,CAAC,CAAC;EAEF,MAAME,gBAAgC,GAAIC,KAAK,IAAK;IAClD,IAAIP,KAAK,CAACI,QAAQ,CAAC,yBAAyB,CAAC,EAAE;MAC7CN,OAAO,CAACS,KAAK,CAAC;IAChB,CAAC,MAAM;MACLP,KAAK,CAACG,QAAQ,CAAC,eAAe,EAAEI,KAAK,CAAC;IACxC;EACF,CAAC;EAED,OAAOD,gBAAgB;AACzB,CAAC","ignoreList":[]}

package/dist/esm/tools/createMessageBus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createMessageBus.js","names":["createMessageBus","subscribers","Map","publish","message","Array","from","values","forEach","subscriber","subscribe","subscriberId","Symbol","set","delete"],"sources":["../../../src/tools/createMessageBus.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nexport type MessageHandler<Message> = (message: Message) => void;\n\nexport type PublishMessage<Message> = MessageHandler<Message>;\n\nexport type UnsubscribeMessageSubscription = () => void;\n\nexport type MessageSubscription<Message> = (\n  subscriber: MessageHandler<Message>,\n) => UnsubscribeMessageSubscription;\n\nexport type MessageBus<Message> = {\n  publish: PublishMessage<Message>;\n  subscribe: MessageSubscription<Message>;\n};\n\n/**\n * Create a self-contained message bus that allows you to subscribe to events published by the publisher.\n */\nexport const createMessageBus = <Message = void>(): MessageBus<Message> => {\n  const subscribers = new Map<symbol, MessageHandler<Message>>();\n\n  const publish: PublishMessage<Message> = (message) => {\n    Array.from(subscribers.values()).forEach((subscriber) => {\n      subscriber(message);\n    });\n  };\n\n  const subscribe: MessageSubscription<Message> = (subscriber) => {\n    const subscriberId = Symbol();\n    subscribers.set(subscriberId, subscriber);\n\n    return () => {\n      subscribers.delete(subscriberId);\n    };\n  };\n\n  return {\n    publish,\n    subscribe,\n  };\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAoBA,OAAO,MAAMA,gBAAgB,GAAGA,CAAA,KAA2C;EACzE,MAAMC,WAAW,GAAG,IAAIC,GAAG,CAAkC,CAAC;EAE9D,MAAMC,OAAgC,GAAIC,OAAO,IAAK;IACpDC,KAAK,CAACC,IAAI,CAACL,WAAW,CAACM,MAAM,CAAC,CAAC,CAAC,CAACC,OAAO,CAAEC,UAAU,IAAK;MACvDA,UAAU,CAACL,OAAO,CAAC;IACrB,CAAC,CAAC;EACJ,CAAC;EAED,MAAMM,SAAuC,GAAID,UAAU,IAAK;IAC9D,MAAME,YAAY,GAAGC,MAAM,CAAC,CAAC;IAC7BX,WAAW,CAACY,GAAG,CAACF,YAAY,EAAEF,UAAU,CAAC;IAEzC,OAAO,MAAM;MACXR,WAAW,CAACa,MAAM,CAACH,YAAY,CAAC;IAClC,CAAC;EACH,CAAC;EAED,OAAO;IACLR,OAAO;IACPO;EACF,CAAC;AACH,CAAC","ignoreList":[]}

package/dist/esm/tools/createStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createStore.js","names":["createStore","initialState","state","hasState","name","getState","setState","value"],"sources":["../../../src/tools/createStore.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\n/**\n * Creates an internal state and gives access to those values via functions.\n *\n * It can be optionally given an initial state.\n */\nexport const createStore = <State extends object>(initialState?: State) => {\n  const state = initialState || ({} as Partial<State>);\n\n  const hasState = <Name extends keyof State>(name: Name) => name in state;\n\n  const getState = <Name extends keyof State>(name: Name) => state[name];\n\n  const setState = <Name extends keyof State>(\n    name: Name,\n    value: Required<State>[Name],\n  ) => {\n    state[name] = value;\n  };\n\n  return {\n    getState,\n    hasState,\n    setState,\n  };\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAOA,OAAO,MAAMA,WAAW,GAA0BC,YAAoB,IAAK;EACzE,MAAMC,KAAK,GAAGD,YAAY,IAAK,CAAC,CAAoB;EAEpD,MAAME,QAAQ,GAA8BC,IAAU,IAAKA,IAAI,IAAIF,KAAK;EAExE,MAAMG,QAAQ,GAA8BD,IAAU,IAAKF,KAAK,CAACE,IAAI,CAAC;EAEtE,MAAME,QAAQ,GAAGA,CACfF,IAAU,EACVG,KAA4B,KACzB;IACHL,KAAK,CAACE,IAAI,CAAC,GAAGG,KAAK;EACrB,CAAC;EAED,OAAO;IACLF,QAAQ;IACRF,QAAQ;IACRG;EACF,CAAC;AACH,CAAC","ignoreList":[]}

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

@@ -24,20 +24,13 @@ import { SideNav } from "./SideNav/SideNav.js";
 import { SideNavLogo } from "./SideNav/SideNavLogo.js";
 import { HamburgerMenuIcon } from "./TopNav/HamburgerMenuIcon.js";
 import { useUiShellContext } from "./UiShellProvider.js";
-import { emptySideNavItems, SIDE_NAV_WIDTH, TOP_NAV_HEIGHT, UI_SHELL_BASE_Z_INDEX } from "./uiShellSharedConstants.js";
+import { emptySideNavItems, SIDE_NAV_WIDTH, TOP_NAV_HEIGHT, UI_SHELL_BASE_Z_INDEX, UI_SHELL_OVERLAY_Z_INDEX } from "./uiShellSharedConstants.js";
 import { useMatchAppElementToUiShellAppArea } from "./useMatchAppElementToUiShellAppArea.js";
 import { useScrollState } from "./useScrollState.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const StyledAppContentArea = styled("div")({
   gridArea: "app-content",
   position: "relative",
-  display: "grid",
-  gridGap: 0,
-  gridTemplateAreas: `
-    "left-side app-container right-side"
-  `,
-  gridTemplateColumns: "auto 1fr auto",
-  gridTemplateRows: "1fr",
   height: "100%",
   width: "100%"
 });
@@ -47,7 +40,6 @@ const StyledAppContainer = styled("div", {
   appBackgroundColor
 }) => ({
   backgroundColor: appBackgroundColor,
-  gridArea: "app-container",
   height: "100%",
   overflow: "hidden",
   width: "100%"
@@ -63,9 +55,8 @@ const StyledLeftSideContainer = styled("div", {
 }) => ({
   display: isOpen ? "block" : "none",
   height: "100%",
-  gridArea: "left-side",
   position: "absolute",
-  zIndex: UI_SHELL_BASE_Z_INDEX
+  zIndex: UI_SHELL_OVERLAY_Z_INDEX
 }));
 const StyledRightSideContainer = styled("div", {
   shouldForwardProp: prop => prop !== "isOpen" && prop !== "odysseyDesignTokens"
@@ -75,14 +66,13 @@ const StyledRightSideContainer = styled("div", {
 }) => ({
   backgroundColor: odysseyDesignTokens.HueNeutralWhite,
   display: isOpen ? "block" : "none",
-  gridArea: "right-side",
   height: "100%",
   maxWidth: SIDE_NAV_WIDTH,
   overflowY: "auto",
   position: "absolute",
   right: 0,
   width: SIDE_NAV_WIDTH,
-  zIndex: UI_SHELL_BASE_Z_INDEX
+  zIndex: UI_SHELL_OVERLAY_Z_INDEX
 }));
 const StyledMenuLogo = styled("div", {
   shouldForwardProp: prop => prop !== "odysseyDesignTokens"

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

@@ -1 +1 @@
-{"version":3,"file":"NarrowUiShellContent.js","names":["styled","memo","useCallback","useEffect","useRef","useState","ErrorBoundary","Button","hexToRgb","CloseIcon","MoreIcon","useOdysseyDesignTokens","InnerAppContainer","SideNav","SideNavLogo","HamburgerMenuIcon","useUiShellContext","emptySideNavItems","SIDE_NAV_WIDTH","TOP_NAV_HEIGHT","UI_SHELL_BASE_Z_INDEX","useMatchAppElementToUiShellAppArea","useScrollState","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","StyledRightSideContainer","odysseyDesignTokens","HueNeutralWhite","maxWidth","overflowY","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","hasSideNavProps","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","onCollapse","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 type { HtmlProps } from \"../HtmlProps.js\";\n\nimport { Button } from \"../Buttons/Button.js\";\nimport { hexToRgb } from \"../hexToRgb.js\";\nimport { CloseIcon } from \"../icons.generated/Close.js\";\nimport { MoreIcon } from \"../icons.generated/More.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext.js\";\nimport { InnerAppContainer } from \"./InnerAppContainer.js\";\nimport { SideNav } from \"./SideNav/SideNav.js\";\nimport { SideNavLogo } from \"./SideNav/SideNavLogo.js\";\nimport { HamburgerMenuIcon } from \"./TopNav/HamburgerMenuIcon.js\";\nimport {\n  UiShellContentProps,\n  UiShellNavComponentProps,\n} from \"./uiShellContentTypes.js\";\nimport { UiShellColors, useUiShellContext } from \"./UiShellProvider.js\";\nimport {\n  emptySideNavItems,\n  SIDE_NAV_WIDTH,\n  TOP_NAV_HEIGHT,\n  UI_SHELL_BASE_Z_INDEX,\n} from \"./uiShellSharedConstants.js\";\nimport { useMatchAppElementToUiShellAppArea } from \"./useMatchAppElementToUiShellAppArea.js\";\nimport { useScrollState } from \"./useScrollState.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  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  hasSideNavProps,\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 height={24} variant=\"rounded\" 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                !hasSideNavProps && (\n                  <ErrorBoundary fallback={null} onError={onError}>\n                    <SideNav isLoading sideNavItems={emptySideNavItems} />\n                  </ErrorBoundary>\n                )\n            }\n\n            {hasSideNavProps && 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                    onCollapse={closeSideMenus}\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            ref={uiShellAppAreaRef}\n            tabIndex={0}\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":[]}
+{"version":3,"file":"NarrowUiShellContent.js","names":["styled","memo","useCallback","useEffect","useRef","useState","ErrorBoundary","Button","hexToRgb","CloseIcon","MoreIcon","useOdysseyDesignTokens","InnerAppContainer","SideNav","SideNavLogo","HamburgerMenuIcon","useUiShellContext","emptySideNavItems","SIDE_NAV_WIDTH","TOP_NAV_HEIGHT","UI_SHELL_BASE_Z_INDEX","UI_SHELL_OVERLAY_Z_INDEX","useMatchAppElementToUiShellAppArea","useScrollState","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","StyledAppContentArea","gridArea","position","height","width","StyledAppContainer","shouldForwardProp","prop","appBackgroundColor","backgroundColor","overflow","StyledBannersContainer","zIndex","StyledLeftSideContainer","isOpen","display","StyledRightSideContainer","odysseyDesignTokens","HueNeutralWhite","maxWidth","overflowY","right","StyledMenuLogo","alignItems","gap","Spacing3","StyledLogoContainer","paddingBlock","Spacing4","maxHeight","StyledPageOverlay","HueNeutral900","asFormattedString","replace","left","top","StyledSideNavContainer","StyledUiShellContainer","HueNeutral50","gridGap","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","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","hasSideNavProps","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","onCollapse","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 type { HtmlProps } from \"../HtmlProps.js\";\n\nimport { Button } from \"../Buttons/Button.js\";\nimport { hexToRgb } from \"../hexToRgb.js\";\nimport { CloseIcon } from \"../icons.generated/Close.js\";\nimport { MoreIcon } from \"../icons.generated/More.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../OdysseyDesignTokensContext.js\";\nimport { InnerAppContainer } from \"./InnerAppContainer.js\";\nimport { SideNav } from \"./SideNav/SideNav.js\";\nimport { SideNavLogo } from \"./SideNav/SideNavLogo.js\";\nimport { HamburgerMenuIcon } from \"./TopNav/HamburgerMenuIcon.js\";\nimport {\n  UiShellContentProps,\n  UiShellNavComponentProps,\n} from \"./uiShellContentTypes.js\";\nimport { UiShellColors, useUiShellContext } from \"./UiShellProvider.js\";\nimport {\n  emptySideNavItems,\n  SIDE_NAV_WIDTH,\n  TOP_NAV_HEIGHT,\n  UI_SHELL_BASE_Z_INDEX,\n  UI_SHELL_OVERLAY_Z_INDEX,\n} from \"./uiShellSharedConstants.js\";\nimport { useMatchAppElementToUiShellAppArea } from \"./useMatchAppElementToUiShellAppArea.js\";\nimport { useScrollState } from \"./useScrollState.js\";\n\nconst StyledAppContentArea = styled(\"div\")({\n  gridArea: \"app-content\",\n  position: \"relative\",\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  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  position: \"absolute\",\n  zIndex: UI_SHELL_OVERLAY_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  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_OVERLAY_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  hasSideNavProps,\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 height={24} variant=\"rounded\" 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                !hasSideNavProps && (\n                  <ErrorBoundary fallback={null} onError={onError}>\n                    <SideNav isLoading sideNavItems={emptySideNavItems} />\n                  </ErrorBoundary>\n                )\n            }\n\n            {hasSideNavProps && 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                    onCollapse={closeSideMenus}\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            ref={uiShellAppAreaRef}\n            tabIndex={0}\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/NavAccordion.js

@@ -17,9 +17,9 @@ import styled from "@emotion/styled";
 import { memo } from "react";
 import { ChevronDownIcon } from "../../icons.generated/index.js";
 import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
-import { Support } from "../../Typography.js";
 import { useUiShellContext } from "../../ui-shell/UiShellProvider.js";
 import { useUniqueId } from "../../useUniqueId.js";
+import { useSideNavItemContent } from "./SideNavItemContentContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SideNavAccordionContainer = styled("div", {
   shouldForwardProp: prop => prop !== "backgroundColor" && prop !== "fontColor"
@@ -42,7 +42,7 @@ const AccordionLabelContainer = styled("span", {
 }) => ({
   width: "100%",
   marginInlineStart: isIconVisible ? odysseyDesignTokens.Spacing3 : 0,
-  fontWeight: odysseyDesignTokens.TypographyWeightHeading,
+  fontWeight: odysseyDesignTokens.TypographyWeightBody,
   color: sideNavContrastColors?.fontColor || odysseyDesignTokens.TypographyColorHeading,
   ".Mui-disabled &": {
     color: odysseyDesignTokens.TypographyColorDisabled,
@@ -52,16 +52,22 @@ const AccordionLabelContainer = styled("span", {
   }
 }));
 const AccordionSummaryContainer = styled(_AccordionSummary, {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isCompact" && prop !== "isDisabled" && prop !== "sideNavContrastColors"
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isCompact" && prop !== "isDisabled" && prop !== "sideNavContrastColors" && prop !== "depth"
 })(({
   odysseyDesignTokens,
   sideNavContrastColors,
   isCompact,
-  isDisabled
+  isDisabled,
+  depth = 1
 }) => ({
   borderRadius: odysseyDesignTokens.BorderRadiusMain,
   paddingBlock: odysseyDesignTokens.Spacing3,
-  paddingInline: odysseyDesignTokens.Spacing4,
+  paddingInlineStart: `calc(${odysseyDesignTokens.Spacing4} * ${depth})`,
+  paddingInlineEnd: odysseyDesignTokens.Spacing4,
+  alignItems: "center",
+  ".MuiAccordionSummary-content": {
+    alignItems: "center"
+  },
   ...(isDisabled && {
     opacity: "1 !important",
     ...(sideNavContrastColors?.itemDisabledFontColor && {
@@ -120,6 +126,7 @@ const NavAccordion = ({
   const contentId = `${id}-content`;
   const odysseyDesignTokens = useOdysseyDesignTokens();
   const uiShellContext = useUiShellContext();
+  const sideNavItemContentContext = useSideNavItemContent();
   return _jsx(SideNavAccordionContainer, {
     backgroundColor: uiShellContext?.sideNavBackgroundColor,
     children: _jsxs(_Accordion, {
@@ -128,25 +135,23 @@ const NavAccordion = ({
       disabled: isDisabled,
       disableGutters: true,
       expanded: isExpanded,
-      children: [_jsx(AccordionSummaryContainer, {
+      children: [_jsxs(AccordionSummaryContainer, {
         "aria-controls": contentId,
         className: "nav-accordion-summary",
+        depth: sideNavItemContentContext.depth,
         expandIcon: _jsx(ChevronDownIcon, {}),
         id: headerId,
         isCompact: isCompact,
         isDisabled: isDisabled,
         odysseyDesignTokens: odysseyDesignTokens,
         sideNavContrastColors: uiShellContext?.sideNavContrastColors,
-        children: _jsxs(Support, {
-          component: "div",
+        children: [startIcon && startIcon, _jsx(AccordionLabelContainer, {
+          isIconVisible: Boolean(startIcon),
+          odysseyDesignTokens: odysseyDesignTokens,
+          sideNavContrastColors: uiShellContext?.sideNavContrastColors,
           translate: translate,
-          children: [startIcon && startIcon, _jsx(AccordionLabelContainer, {
-            isIconVisible: Boolean(startIcon),
-            odysseyDesignTokens: odysseyDesignTokens,
-            sideNavContrastColors: uiShellContext?.sideNavContrastColors,
-            children: label
-          })]
-        })
+          children: label
+        })]
       }), _jsx(_AccordionDetails, {
         "aria-labelledby": headerId,
         className: "nav-accordion-details",

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

@@ -1 +1 @@
-{"version":3,"file":"NavAccordion.js","names":["styled","memo","ChevronDownIcon","useOdysseyDesignTokens","Support","useUiShellContext","useUniqueId","jsx","_jsx","jsxs","_jsxs","SideNavAccordionContainer","shouldForwardProp","prop","backgroundColor","fontColor","width","color","AccordionLabelContainer","sideNavContrastColors","odysseyDesignTokens","isIconVisible","marginInlineStart","Spacing3","fontWeight","TypographyWeightHeading","TypographyColorHeading","TypographyColorDisabled","itemDisabledFontColor","AccordionSummaryContainer","_AccordionSummary","isCompact","isDisabled","borderRadius","BorderRadiusMain","paddingBlock","paddingInline","Spacing4","opacity","svg","path","fill","HueNeutral50","itemHoverBackgroundColor","outline","boxShadow","PalettePrimaryMain","focusRingColor","Spacing2","minHeight","NavAccordion","children","label","id","idOverride","isDefaultExpanded","isExpanded","translate","startIcon","headerId","contentId","uiShellContext","sideNavBackgroundColor","_Accordion","className","defaultExpanded","disabled","disableGutters","expanded","expandIcon","component","Boolean","_AccordionDetails","MemoizedNavAccordion","displayName"],"sources":["../../../../src/ui-shell/SideNav/NavAccordion.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport {\n  Accordion as MuiAccordion,\n  AccordionDetails as MuiAccordionDetails,\n  AccordionProps as MuiAccordionProps,\n  AccordionSummary as MuiAccordionSummary,\n} from \"@mui/material\";\nimport { memo, PropsWithChildren, ReactNode } from \"react\";\n\nimport type { HtmlProps } from \"../../HtmlProps.js\";\n\nimport { ContrastColors } from \"../../createContrastColors.js\";\nimport { ChevronDownIcon } from \"../../icons.generated/index.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { Support } from \"../../Typography.js\";\nimport {\n  UiShellColors,\n  useUiShellContext,\n} from \"../../ui-shell/UiShellProvider.js\";\nimport { useUniqueId } from \"../../useUniqueId.js\";\n\nconst SideNavAccordionContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"backgroundColor\" && prop !== \"fontColor\",\n})<{\n  backgroundColor?: UiShellColors[\"sideNavBackgroundColor\"];\n  fontColor?: ContrastColors[\"fontColor\"];\n}>(({ backgroundColor, fontColor }) => ({\n  width: \"100%\",\n\n  \".MuiAccordion-root\": {\n    backgroundColor: backgroundColor,\n    color: fontColor || \"inherit\",\n  },\n}));\n\nexport type NavAccordionProps = {\n  /**\n   * Defines IDs for the header and the content of the Accordion\n   */\n  id?: string;\n  /**\n   *  Determines if the Accordion component use compact layout\n   */\n  isCompact?: boolean;\n  /**\n   * Whether the item is expanded by default\n   */\n  isDefaultExpanded?: boolean;\n  /**\n   * Whether the item is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * If true, expands the accordion, otherwise collapse it.\n   * Setting this prop enables control over the accordion.\n   */\n  isExpanded?: boolean;\n  /**\n   * The label text for the AccordionSummary\n   */\n  label: string;\n  /**\n   * Event fired when the expansion state of the accordion is changed\n   */\n  onChange?: MuiAccordionProps[\"onChange\"];\n  /**\n   * The icon element to display at the start of the Nav Item\n   */\n  startIcon?: ReactNode;\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst AccordionLabelContainer = styled(\"span\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isIconVisible\" &&\n    prop !== \"sideNavContrastColors\",\n})<{\n  isIconVisible: boolean;\n  odysseyDesignTokens: DesignTokens;\n  sideNavContrastColors?: UiShellColors[\"sideNavContrastColors\"];\n}>(({ sideNavContrastColors, odysseyDesignTokens, isIconVisible }) => ({\n  width: \"100%\",\n  marginInlineStart: isIconVisible ? odysseyDesignTokens.Spacing3 : 0,\n  fontWeight: odysseyDesignTokens.TypographyWeightHeading,\n  color:\n    sideNavContrastColors?.fontColor ||\n    odysseyDesignTokens.TypographyColorHeading,\n\n  \".Mui-disabled &\": {\n    color: odysseyDesignTokens.TypographyColorDisabled,\n\n    ...(sideNavContrastColors?.itemDisabledFontColor && {\n      color: sideNavContrastColors?.itemDisabledFontColor,\n    }),\n  },\n}));\n\nconst AccordionSummaryContainer = styled(MuiAccordionSummary, {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isCompact\" &&\n    prop !== \"isDisabled\" &&\n    prop !== \"sideNavContrastColors\",\n})<{\n  isCompact?: boolean;\n  isDisabled?: boolean;\n  odysseyDesignTokens: DesignTokens;\n  sideNavContrastColors?: UiShellColors[\"sideNavContrastColors\"];\n}>(({ odysseyDesignTokens, sideNavContrastColors, isCompact, isDisabled }) => ({\n  borderRadius: odysseyDesignTokens.BorderRadiusMain,\n  paddingBlock: odysseyDesignTokens.Spacing3,\n  paddingInline: odysseyDesignTokens.Spacing4,\n\n  ...(isDisabled && {\n    opacity: \"1 !important\",\n\n    ...(sideNavContrastColors?.itemDisabledFontColor && {\n      svg: {\n        path: {\n          fill: `${sideNavContrastColors.itemDisabledFontColor} !important`,\n        },\n      },\n    }),\n  }),\n\n  ...(!isDisabled && {\n    \"&:hover\": {\n      backgroundColor: odysseyDesignTokens.HueNeutral50,\n    },\n  }),\n\n  ...(!isDisabled &&\n    sideNavContrastColors?.fontColor && {\n      svg: {\n        path: {\n          fill: `${sideNavContrastColors.fontColor} !important`,\n        },\n      },\n    }),\n\n  ...(sideNavContrastColors?.itemHoverBackgroundColor && {\n    ...(!isDisabled && {\n      \"&:hover\": {\n        backgroundColor: sideNavContrastColors.itemHoverBackgroundColor,\n      },\n    }),\n  }),\n\n  \"&:focus-visible\": {\n    backgroundColor: \"unset\",\n    outline: \"none\",\n    boxShadow: `inset 0 0 0 2px ${odysseyDesignTokens.PalettePrimaryMain}`,\n\n    ...(sideNavContrastColors?.focusRingColor && {\n      boxShadow: `inset 0 0 0 2px ${sideNavContrastColors.focusRingColor}`,\n    }),\n  },\n\n  ...(isCompact && {\n    paddingBlock: odysseyDesignTokens.Spacing2,\n    minHeight: \"unset\",\n  }),\n}));\n\nconst NavAccordion = ({\n  children,\n  label,\n  id: idOverride,\n  isCompact,\n  isDefaultExpanded,\n  isDisabled,\n  isExpanded,\n  translate,\n  startIcon,\n}: PropsWithChildren<NavAccordionProps>) => {\n  const id = useUniqueId(idOverride);\n  const headerId = `${id}-header`;\n  const contentId = `${id}-content`;\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const uiShellContext = useUiShellContext();\n\n  return (\n    <SideNavAccordionContainer\n      backgroundColor={uiShellContext?.sideNavBackgroundColor}\n    >\n      <MuiAccordion\n        className=\"nav-accordion\"\n        defaultExpanded={isDefaultExpanded}\n        disabled={isDisabled}\n        disableGutters\n        expanded={isExpanded}\n      >\n        <AccordionSummaryContainer\n          aria-controls={contentId}\n          className=\"nav-accordion-summary\"\n          expandIcon={<ChevronDownIcon />}\n          id={headerId}\n          isCompact={isCompact}\n          isDisabled={isDisabled}\n          odysseyDesignTokens={odysseyDesignTokens}\n          sideNavContrastColors={uiShellContext?.sideNavContrastColors}\n        >\n          <Support component=\"div\" translate={translate}>\n            {startIcon && startIcon}\n            <AccordionLabelContainer\n              isIconVisible={Boolean(startIcon)}\n              odysseyDesignTokens={odysseyDesignTokens}\n              sideNavContrastColors={uiShellContext?.sideNavContrastColors}\n            >\n              {label}\n            </AccordionLabelContainer>\n          </Support>\n        </AccordionSummaryContainer>\n        <MuiAccordionDetails\n          aria-labelledby={headerId}\n          className=\"nav-accordion-details\"\n        >\n          {children}\n        </MuiAccordionDetails>\n      </MuiAccordion>\n    </SideNavAccordionContainer>\n  );\n};\n\nconst MemoizedNavAccordion = memo(NavAccordion);\nMemoizedNavAccordion.displayName = \"NavAccordion\";\n\nexport { MemoizedNavAccordion as NavAccordion };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"NavAccordion.js","names":["styled","memo","ChevronDownIcon","useOdysseyDesignTokens","useUiShellContext","useUniqueId","useSideNavItemContent","jsx","_jsx","jsxs","_jsxs","SideNavAccordionContainer","shouldForwardProp","prop","backgroundColor","fontColor","width","color","AccordionLabelContainer","sideNavContrastColors","odysseyDesignTokens","isIconVisible","marginInlineStart","Spacing3","fontWeight","TypographyWeightBody","TypographyColorHeading","TypographyColorDisabled","itemDisabledFontColor","AccordionSummaryContainer","_AccordionSummary","isCompact","isDisabled","depth","borderRadius","BorderRadiusMain","paddingBlock","paddingInlineStart","Spacing4","paddingInlineEnd","alignItems","opacity","svg","path","fill","HueNeutral50","itemHoverBackgroundColor","outline","boxShadow","PalettePrimaryMain","focusRingColor","Spacing2","minHeight","NavAccordion","children","label","id","idOverride","isDefaultExpanded","isExpanded","translate","startIcon","headerId","contentId","uiShellContext","sideNavItemContentContext","sideNavBackgroundColor","_Accordion","className","defaultExpanded","disabled","disableGutters","expanded","expandIcon","Boolean","_AccordionDetails","MemoizedNavAccordion","displayName"],"sources":["../../../../src/ui-shell/SideNav/NavAccordion.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport {\n  Accordion as MuiAccordion,\n  AccordionDetails as MuiAccordionDetails,\n  AccordionProps as MuiAccordionProps,\n  AccordionSummary as MuiAccordionSummary,\n} from \"@mui/material\";\nimport { memo, PropsWithChildren, ReactNode } from \"react\";\n\nimport type { HtmlProps } from \"../../HtmlProps.js\";\n\nimport { ContrastColors } from \"../../createContrastColors.js\";\nimport { ChevronDownIcon } from \"../../icons.generated/index.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport {\n  UiShellColors,\n  useUiShellContext,\n} from \"../../ui-shell/UiShellProvider.js\";\nimport { useUniqueId } from \"../../useUniqueId.js\";\nimport { useSideNavItemContent } from \"./SideNavItemContentContext.js\";\n\nconst SideNavAccordionContainer = styled(\"div\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"backgroundColor\" && prop !== \"fontColor\",\n})<{\n  backgroundColor?: UiShellColors[\"sideNavBackgroundColor\"];\n  fontColor?: ContrastColors[\"fontColor\"];\n}>(({ backgroundColor, fontColor }) => ({\n  width: \"100%\",\n\n  \".MuiAccordion-root\": {\n    backgroundColor: backgroundColor,\n    color: fontColor || \"inherit\",\n  },\n}));\n\nexport type NavAccordionProps = {\n  /**\n   * Defines IDs for the header and the content of the Accordion\n   */\n  id?: string;\n  /**\n   *  Determines if the Accordion component use compact layout\n   */\n  isCompact?: boolean;\n  /**\n   * Whether the item is expanded by default\n   */\n  isDefaultExpanded?: boolean;\n  /**\n   * Whether the item is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * If true, expands the accordion, otherwise collapse it.\n   * Setting this prop enables control over the accordion.\n   */\n  isExpanded?: boolean;\n  /**\n   * The label text for the AccordionSummary\n   */\n  label: string;\n  /**\n   * Event fired when the expansion state of the accordion is changed\n   */\n  onChange?: MuiAccordionProps[\"onChange\"];\n  /**\n   * The icon element to display at the start of the Nav Item\n   */\n  startIcon?: ReactNode;\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst AccordionLabelContainer = styled(\"span\", {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isIconVisible\" &&\n    prop !== \"sideNavContrastColors\",\n})<{\n  isIconVisible: boolean;\n  odysseyDesignTokens: DesignTokens;\n  sideNavContrastColors?: UiShellColors[\"sideNavContrastColors\"];\n}>(({ sideNavContrastColors, odysseyDesignTokens, isIconVisible }) => ({\n  width: \"100%\",\n  marginInlineStart: isIconVisible ? odysseyDesignTokens.Spacing3 : 0,\n  fontWeight: odysseyDesignTokens.TypographyWeightBody,\n  color:\n    sideNavContrastColors?.fontColor ||\n    odysseyDesignTokens.TypographyColorHeading,\n\n  \".Mui-disabled &\": {\n    color: odysseyDesignTokens.TypographyColorDisabled,\n\n    ...(sideNavContrastColors?.itemDisabledFontColor && {\n      color: sideNavContrastColors?.itemDisabledFontColor,\n    }),\n  },\n}));\n\nconst AccordionSummaryContainer = styled(MuiAccordionSummary, {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isCompact\" &&\n    prop !== \"isDisabled\" &&\n    prop !== \"sideNavContrastColors\" &&\n    prop !== \"depth\",\n})<{\n  depth?: number;\n  isCompact?: boolean;\n  isDisabled?: boolean;\n  odysseyDesignTokens: DesignTokens;\n  sideNavContrastColors?: UiShellColors[\"sideNavContrastColors\"];\n}>(\n  ({\n    odysseyDesignTokens,\n    sideNavContrastColors,\n    isCompact,\n    isDisabled,\n    depth = 1,\n  }) => ({\n    borderRadius: odysseyDesignTokens.BorderRadiusMain,\n    paddingBlock: odysseyDesignTokens.Spacing3,\n    paddingInlineStart: `calc(${odysseyDesignTokens.Spacing4} * ${depth})`,\n    paddingInlineEnd: odysseyDesignTokens.Spacing4,\n    alignItems: \"center\",\n\n    \".MuiAccordionSummary-content\": {\n      alignItems: \"center\",\n    },\n\n    ...(isDisabled && {\n      opacity: \"1 !important\",\n\n      ...(sideNavContrastColors?.itemDisabledFontColor && {\n        svg: {\n          path: {\n            fill: `${sideNavContrastColors.itemDisabledFontColor} !important`,\n          },\n        },\n      }),\n    }),\n\n    ...(!isDisabled && {\n      \"&:hover\": {\n        backgroundColor: odysseyDesignTokens.HueNeutral50,\n      },\n    }),\n\n    ...(!isDisabled &&\n      sideNavContrastColors?.fontColor && {\n        svg: {\n          path: {\n            fill: `${sideNavContrastColors.fontColor} !important`,\n          },\n        },\n      }),\n\n    ...(sideNavContrastColors?.itemHoverBackgroundColor && {\n      ...(!isDisabled && {\n        \"&:hover\": {\n          backgroundColor: sideNavContrastColors.itemHoverBackgroundColor,\n        },\n      }),\n    }),\n\n    \"&:focus-visible\": {\n      backgroundColor: \"unset\",\n      outline: \"none\",\n      boxShadow: `inset 0 0 0 2px ${odysseyDesignTokens.PalettePrimaryMain}`,\n\n      ...(sideNavContrastColors?.focusRingColor && {\n        boxShadow: `inset 0 0 0 2px ${sideNavContrastColors.focusRingColor}`,\n      }),\n    },\n\n    ...(isCompact && {\n      paddingBlock: odysseyDesignTokens.Spacing2,\n      minHeight: \"unset\",\n    }),\n  }),\n);\n\nconst NavAccordion = ({\n  children,\n  label,\n  id: idOverride,\n  isCompact,\n  isDefaultExpanded,\n  isDisabled,\n  isExpanded,\n  translate,\n  startIcon,\n}: PropsWithChildren<NavAccordionProps>) => {\n  const id = useUniqueId(idOverride);\n  const headerId = `${id}-header`;\n  const contentId = `${id}-content`;\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const uiShellContext = useUiShellContext();\n  const sideNavItemContentContext = useSideNavItemContent();\n\n  return (\n    <SideNavAccordionContainer\n      backgroundColor={uiShellContext?.sideNavBackgroundColor}\n    >\n      <MuiAccordion\n        className=\"nav-accordion\"\n        defaultExpanded={isDefaultExpanded}\n        disabled={isDisabled}\n        disableGutters\n        expanded={isExpanded}\n      >\n        <AccordionSummaryContainer\n          aria-controls={contentId}\n          className=\"nav-accordion-summary\"\n          depth={sideNavItemContentContext.depth}\n          expandIcon={<ChevronDownIcon />}\n          id={headerId}\n          isCompact={isCompact}\n          isDisabled={isDisabled}\n          odysseyDesignTokens={odysseyDesignTokens}\n          sideNavContrastColors={uiShellContext?.sideNavContrastColors}\n        >\n          {startIcon && startIcon}\n          <AccordionLabelContainer\n            isIconVisible={Boolean(startIcon)}\n            odysseyDesignTokens={odysseyDesignTokens}\n            sideNavContrastColors={uiShellContext?.sideNavContrastColors}\n            translate={translate}\n          >\n            {label}\n          </AccordionLabelContainer>\n        </AccordionSummaryContainer>\n        <MuiAccordionDetails\n          aria-labelledby={headerId}\n          className=\"nav-accordion-details\"\n        >\n          {children}\n        </MuiAccordionDetails>\n      </MuiAccordion>\n    </SideNavAccordionContainer>\n  );\n};\n\nconst MemoizedNavAccordion = memo(NavAccordion);\nMemoizedNavAccordion.displayName = \"NavAccordion\";\n\nexport { MemoizedNavAccordion as NavAccordion };\n"],"mappings":"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","ignoreList":[]}