@okta/odyssey-react-mui 1.32.4 → 1.33.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (351) hide show
  1. package/dist/cjs/Autocomplete.cjs +1 -1
  2. package/dist/cjs/Autocomplete.cjs.map +1 -1
  3. package/dist/cjs/Breadcrumbs.cjs +23 -7
  4. package/dist/cjs/Breadcrumbs.cjs.map +1 -1
  5. package/dist/cjs/DatePickers/datePickerTheme.cjs +1 -1
  6. package/dist/cjs/DatePickers/datePickerTheme.cjs.map +1 -1
  7. package/dist/cjs/OdysseyProvider.cjs +2 -2
  8. package/dist/cjs/OdysseyProvider.cjs.map +1 -1
  9. package/dist/cjs/OdysseyThemeProvider.cjs +2 -2
  10. package/dist/cjs/OdysseyThemeProvider.cjs.map +1 -1
  11. package/dist/cjs/hexToRgb.cjs.map +1 -1
  12. package/dist/cjs/properties/ts/odyssey-react-mui.cjs +1 -0
  13. package/dist/cjs/properties/ts/odyssey-react-mui.cjs.map +1 -1
  14. package/dist/cjs/properties/ts/odyssey-react-mui_cs.cjs +1 -0
  15. package/dist/cjs/properties/ts/odyssey-react-mui_cs.cjs.map +1 -1
  16. package/dist/cjs/properties/ts/odyssey-react-mui_da.cjs +1 -0
  17. package/dist/cjs/properties/ts/odyssey-react-mui_da.cjs.map +1 -1
  18. package/dist/cjs/properties/ts/odyssey-react-mui_de.cjs +1 -0
  19. package/dist/cjs/properties/ts/odyssey-react-mui_de.cjs.map +1 -1
  20. package/dist/cjs/properties/ts/odyssey-react-mui_el.cjs +1 -0
  21. package/dist/cjs/properties/ts/odyssey-react-mui_el.cjs.map +1 -1
  22. package/dist/cjs/properties/ts/odyssey-react-mui_es.cjs +1 -0
  23. package/dist/cjs/properties/ts/odyssey-react-mui_es.cjs.map +1 -1
  24. package/dist/cjs/properties/ts/odyssey-react-mui_fi.cjs +1 -0
  25. package/dist/cjs/properties/ts/odyssey-react-mui_fi.cjs.map +1 -1
  26. package/dist/cjs/properties/ts/odyssey-react-mui_fr.cjs +1 -0
  27. package/dist/cjs/properties/ts/odyssey-react-mui_fr.cjs.map +1 -1
  28. package/dist/cjs/properties/ts/odyssey-react-mui_ht.cjs +1 -0
  29. package/dist/cjs/properties/ts/odyssey-react-mui_ht.cjs.map +1 -1
  30. package/dist/cjs/properties/ts/odyssey-react-mui_hu.cjs +1 -0
  31. package/dist/cjs/properties/ts/odyssey-react-mui_hu.cjs.map +1 -1
  32. package/dist/cjs/properties/ts/odyssey-react-mui_id.cjs +1 -0
  33. package/dist/cjs/properties/ts/odyssey-react-mui_id.cjs.map +1 -1
  34. package/dist/cjs/properties/ts/odyssey-react-mui_it.cjs +1 -0
  35. package/dist/cjs/properties/ts/odyssey-react-mui_it.cjs.map +1 -1
  36. package/dist/cjs/properties/ts/odyssey-react-mui_ja.cjs +1 -0
  37. package/dist/cjs/properties/ts/odyssey-react-mui_ja.cjs.map +1 -1
  38. package/dist/cjs/properties/ts/odyssey-react-mui_ko.cjs +1 -0
  39. package/dist/cjs/properties/ts/odyssey-react-mui_ko.cjs.map +1 -1
  40. package/dist/cjs/properties/ts/odyssey-react-mui_ms.cjs +1 -0
  41. package/dist/cjs/properties/ts/odyssey-react-mui_ms.cjs.map +1 -1
  42. package/dist/cjs/properties/ts/odyssey-react-mui_nb.cjs +1 -0
  43. package/dist/cjs/properties/ts/odyssey-react-mui_nb.cjs.map +1 -1
  44. package/dist/cjs/properties/ts/odyssey-react-mui_nl_NL.cjs +1 -0
  45. package/dist/cjs/properties/ts/odyssey-react-mui_nl_NL.cjs.map +1 -1
  46. package/dist/cjs/properties/ts/odyssey-react-mui_pl.cjs +1 -0
  47. package/dist/cjs/properties/ts/odyssey-react-mui_pl.cjs.map +1 -1
  48. package/dist/cjs/properties/ts/odyssey-react-mui_pt_BR.cjs +1 -0
  49. package/dist/cjs/properties/ts/odyssey-react-mui_pt_BR.cjs.map +1 -1
  50. package/dist/cjs/properties/ts/odyssey-react-mui_ro.cjs +1 -0
  51. package/dist/cjs/properties/ts/odyssey-react-mui_ro.cjs.map +1 -1
  52. package/dist/cjs/properties/ts/odyssey-react-mui_ru.cjs +1 -0
  53. package/dist/cjs/properties/ts/odyssey-react-mui_ru.cjs.map +1 -1
  54. package/dist/cjs/properties/ts/odyssey-react-mui_sv.cjs +1 -0
  55. package/dist/cjs/properties/ts/odyssey-react-mui_sv.cjs.map +1 -1
  56. package/dist/cjs/properties/ts/odyssey-react-mui_th.cjs +1 -0
  57. package/dist/cjs/properties/ts/odyssey-react-mui_th.cjs.map +1 -1
  58. package/dist/cjs/properties/ts/odyssey-react-mui_tr.cjs +1 -0
  59. package/dist/cjs/properties/ts/odyssey-react-mui_tr.cjs.map +1 -1
  60. package/dist/cjs/properties/ts/odyssey-react-mui_uk.cjs +1 -0
  61. package/dist/cjs/properties/ts/odyssey-react-mui_uk.cjs.map +1 -1
  62. package/dist/cjs/properties/ts/odyssey-react-mui_vi.cjs +1 -0
  63. package/dist/cjs/properties/ts/odyssey-react-mui_vi.cjs.map +1 -1
  64. package/dist/cjs/properties/ts/odyssey-react-mui_zh_CN.cjs +1 -0
  65. package/dist/cjs/properties/ts/odyssey-react-mui_zh_CN.cjs.map +1 -1
  66. package/dist/cjs/properties/ts/odyssey-react-mui_zh_TW.cjs +1 -0
  67. package/dist/cjs/properties/ts/odyssey-react-mui_zh_TW.cjs.map +1 -1
  68. package/dist/cjs/theme/pxToRem.cjs +21 -0
  69. package/dist/cjs/theme/pxToRem.cjs.map +1 -0
  70. package/dist/cjs/theme/theme.cjs +22 -0
  71. package/dist/cjs/theme/theme.cjs.map +1 -1
  72. package/dist/cjs/theme/useMediaQuery.cjs +34 -0
  73. package/dist/cjs/theme/useMediaQuery.cjs.map +1 -0
  74. package/dist/cjs/ui-shell/AppSwitcher/AppSwitcher.cjs +3 -3
  75. package/dist/cjs/ui-shell/AppSwitcher/AppSwitcher.cjs.map +1 -1
  76. package/dist/cjs/ui-shell/NarrowUiShellContent.cjs +340 -0
  77. package/dist/cjs/ui-shell/NarrowUiShellContent.cjs.map +1 -0
  78. package/dist/cjs/ui-shell/SideNav/SideNav.cjs +62 -44
  79. package/dist/cjs/ui-shell/SideNav/SideNav.cjs.map +1 -1
  80. package/dist/cjs/ui-shell/SideNav/SideNavHeader.cjs +8 -5
  81. package/dist/cjs/ui-shell/SideNav/SideNavHeader.cjs.map +1 -1
  82. package/dist/cjs/ui-shell/SideNav/SideNavItemContent.cjs +3 -0
  83. package/dist/cjs/ui-shell/SideNav/SideNavItemContent.cjs.map +1 -1
  84. package/dist/cjs/ui-shell/SideNav/SideNavLogo.cjs +2 -2
  85. package/dist/cjs/ui-shell/SideNav/SideNavLogo.cjs.map +1 -1
  86. package/dist/cjs/ui-shell/SideNav/SideNavToggleButton.cjs +2 -1
  87. package/dist/cjs/ui-shell/SideNav/SideNavToggleButton.cjs.map +1 -1
  88. package/dist/cjs/ui-shell/SideNav/types.cjs.map +1 -1
  89. package/dist/cjs/ui-shell/TopNav/HamburgerMenuIcon.cjs +37 -0
  90. package/dist/cjs/ui-shell/TopNav/HamburgerMenuIcon.cjs.map +1 -0
  91. package/dist/cjs/ui-shell/TopNav/TopNav.cjs +5 -5
  92. package/dist/cjs/ui-shell/TopNav/TopNav.cjs.map +1 -1
  93. package/dist/cjs/ui-shell/UiShell.cjs +37 -18
  94. package/dist/cjs/ui-shell/UiShell.cjs.map +1 -1
  95. package/dist/cjs/ui-shell/UiShellProvider.cjs +10 -3
  96. package/dist/cjs/ui-shell/UiShellProvider.cjs.map +1 -1
  97. package/dist/cjs/ui-shell/WideUiShellContent.cjs +171 -0
  98. package/dist/cjs/ui-shell/WideUiShellContent.cjs.map +1 -0
  99. package/dist/cjs/ui-shell/index.cjs +37 -9
  100. package/dist/cjs/ui-shell/index.cjs.map +1 -1
  101. package/dist/cjs/ui-shell/renderUiShell.cjs +19 -20
  102. package/dist/cjs/ui-shell/renderUiShell.cjs.map +1 -1
  103. package/dist/cjs/ui-shell/uiShellContentTypes.cjs +20 -0
  104. package/dist/cjs/ui-shell/uiShellContentTypes.cjs.map +1 -0
  105. package/dist/cjs/ui-shell/uiShellSharedConstants.cjs +22 -0
  106. package/dist/cjs/ui-shell/uiShellSharedConstants.cjs.map +1 -0
  107. package/dist/cjs/ui-shell/useMatchAppElementToUiShellAppArea.cjs +108 -0
  108. package/dist/cjs/ui-shell/useMatchAppElementToUiShellAppArea.cjs.map +1 -0
  109. package/dist/cjs/ui-shell/useScrollState.cjs +2 -4
  110. package/dist/cjs/ui-shell/useScrollState.cjs.map +1 -1
  111. package/dist/cjs/ui-shell/useUiShellBreakpoints.cjs +41 -0
  112. package/dist/cjs/ui-shell/useUiShellBreakpoints.cjs.map +1 -0
  113. package/dist/cjs/web-component/createReactRootElements.cjs.map +1 -1
  114. package/dist/cjs/web-component/renderReactInWebComponent.cjs +6 -1
  115. package/dist/cjs/web-component/renderReactInWebComponent.cjs.map +1 -1
  116. package/dist/esm/Autocomplete.js +1 -1
  117. package/dist/esm/Autocomplete.js.map +1 -1
  118. package/dist/esm/Breadcrumbs.js +23 -7
  119. package/dist/esm/Breadcrumbs.js.map +1 -1
  120. package/dist/esm/DatePickers/datePickerTheme.js +1 -1
  121. package/dist/esm/DatePickers/datePickerTheme.js.map +1 -1
  122. package/dist/esm/OdysseyProvider.js +2 -2
  123. package/dist/esm/OdysseyProvider.js.map +1 -1
  124. package/dist/esm/OdysseyThemeProvider.js +2 -2
  125. package/dist/esm/OdysseyThemeProvider.js.map +1 -1
  126. package/dist/esm/hexToRgb.js.map +1 -1
  127. package/dist/esm/properties/ts/odyssey-react-mui.js +1 -0
  128. package/dist/esm/properties/ts/odyssey-react-mui.js.map +1 -1
  129. package/dist/esm/properties/ts/odyssey-react-mui_cs.js +1 -0
  130. package/dist/esm/properties/ts/odyssey-react-mui_cs.js.map +1 -1
  131. package/dist/esm/properties/ts/odyssey-react-mui_da.js +1 -0
  132. package/dist/esm/properties/ts/odyssey-react-mui_da.js.map +1 -1
  133. package/dist/esm/properties/ts/odyssey-react-mui_de.js +1 -0
  134. package/dist/esm/properties/ts/odyssey-react-mui_de.js.map +1 -1
  135. package/dist/esm/properties/ts/odyssey-react-mui_el.js +1 -0
  136. package/dist/esm/properties/ts/odyssey-react-mui_el.js.map +1 -1
  137. package/dist/esm/properties/ts/odyssey-react-mui_es.js +1 -0
  138. package/dist/esm/properties/ts/odyssey-react-mui_es.js.map +1 -1
  139. package/dist/esm/properties/ts/odyssey-react-mui_fi.js +1 -0
  140. package/dist/esm/properties/ts/odyssey-react-mui_fi.js.map +1 -1
  141. package/dist/esm/properties/ts/odyssey-react-mui_fr.js +1 -0
  142. package/dist/esm/properties/ts/odyssey-react-mui_fr.js.map +1 -1
  143. package/dist/esm/properties/ts/odyssey-react-mui_ht.js +1 -0
  144. package/dist/esm/properties/ts/odyssey-react-mui_ht.js.map +1 -1
  145. package/dist/esm/properties/ts/odyssey-react-mui_hu.js +1 -0
  146. package/dist/esm/properties/ts/odyssey-react-mui_hu.js.map +1 -1
  147. package/dist/esm/properties/ts/odyssey-react-mui_id.js +1 -0
  148. package/dist/esm/properties/ts/odyssey-react-mui_id.js.map +1 -1
  149. package/dist/esm/properties/ts/odyssey-react-mui_it.js +1 -0
  150. package/dist/esm/properties/ts/odyssey-react-mui_it.js.map +1 -1
  151. package/dist/esm/properties/ts/odyssey-react-mui_ja.js +1 -0
  152. package/dist/esm/properties/ts/odyssey-react-mui_ja.js.map +1 -1
  153. package/dist/esm/properties/ts/odyssey-react-mui_ko.js +1 -0
  154. package/dist/esm/properties/ts/odyssey-react-mui_ko.js.map +1 -1
  155. package/dist/esm/properties/ts/odyssey-react-mui_ms.js +1 -0
  156. package/dist/esm/properties/ts/odyssey-react-mui_ms.js.map +1 -1
  157. package/dist/esm/properties/ts/odyssey-react-mui_nb.js +1 -0
  158. package/dist/esm/properties/ts/odyssey-react-mui_nb.js.map +1 -1
  159. package/dist/esm/properties/ts/odyssey-react-mui_nl_NL.js +1 -0
  160. package/dist/esm/properties/ts/odyssey-react-mui_nl_NL.js.map +1 -1
  161. package/dist/esm/properties/ts/odyssey-react-mui_pl.js +1 -0
  162. package/dist/esm/properties/ts/odyssey-react-mui_pl.js.map +1 -1
  163. package/dist/esm/properties/ts/odyssey-react-mui_pt_BR.js +1 -0
  164. package/dist/esm/properties/ts/odyssey-react-mui_pt_BR.js.map +1 -1
  165. package/dist/esm/properties/ts/odyssey-react-mui_ro.js +1 -0
  166. package/dist/esm/properties/ts/odyssey-react-mui_ro.js.map +1 -1
  167. package/dist/esm/properties/ts/odyssey-react-mui_ru.js +1 -0
  168. package/dist/esm/properties/ts/odyssey-react-mui_ru.js.map +1 -1
  169. package/dist/esm/properties/ts/odyssey-react-mui_sv.js +1 -0
  170. package/dist/esm/properties/ts/odyssey-react-mui_sv.js.map +1 -1
  171. package/dist/esm/properties/ts/odyssey-react-mui_th.js +1 -0
  172. package/dist/esm/properties/ts/odyssey-react-mui_th.js.map +1 -1
  173. package/dist/esm/properties/ts/odyssey-react-mui_tr.js +1 -0
  174. package/dist/esm/properties/ts/odyssey-react-mui_tr.js.map +1 -1
  175. package/dist/esm/properties/ts/odyssey-react-mui_uk.js +1 -0
  176. package/dist/esm/properties/ts/odyssey-react-mui_uk.js.map +1 -1
  177. package/dist/esm/properties/ts/odyssey-react-mui_vi.js +1 -0
  178. package/dist/esm/properties/ts/odyssey-react-mui_vi.js.map +1 -1
  179. package/dist/esm/properties/ts/odyssey-react-mui_zh_CN.js +1 -0
  180. package/dist/esm/properties/ts/odyssey-react-mui_zh_CN.js.map +1 -1
  181. package/dist/esm/properties/ts/odyssey-react-mui_zh_TW.js +1 -0
  182. package/dist/esm/properties/ts/odyssey-react-mui_zh_TW.js.map +1 -1
  183. package/dist/esm/theme/pxToRem.js +14 -0
  184. package/dist/esm/theme/pxToRem.js.map +1 -0
  185. package/dist/esm/theme/theme.js +2 -0
  186. package/dist/esm/theme/theme.js.map +1 -1
  187. package/dist/esm/theme/useMediaQuery.js +27 -0
  188. package/dist/esm/theme/useMediaQuery.js.map +1 -0
  189. package/dist/esm/ui-shell/AppSwitcher/AppSwitcher.js +2 -2
  190. package/dist/esm/ui-shell/AppSwitcher/AppSwitcher.js.map +1 -1
  191. package/dist/esm/ui-shell/NarrowUiShellContent.js +334 -0
  192. package/dist/esm/ui-shell/NarrowUiShellContent.js.map +1 -0
  193. package/dist/esm/ui-shell/SideNav/SideNav.js +61 -43
  194. package/dist/esm/ui-shell/SideNav/SideNav.js.map +1 -1
  195. package/dist/esm/ui-shell/SideNav/SideNavHeader.js +7 -4
  196. package/dist/esm/ui-shell/SideNav/SideNavHeader.js.map +1 -1
  197. package/dist/esm/ui-shell/SideNav/SideNavItemContent.js +3 -0
  198. package/dist/esm/ui-shell/SideNav/SideNavItemContent.js.map +1 -1
  199. package/dist/esm/ui-shell/SideNav/SideNavLogo.js +2 -2
  200. package/dist/esm/ui-shell/SideNav/SideNavLogo.js.map +1 -1
  201. package/dist/esm/ui-shell/SideNav/SideNavToggleButton.js +2 -1
  202. package/dist/esm/ui-shell/SideNav/SideNavToggleButton.js.map +1 -1
  203. package/dist/esm/ui-shell/SideNav/types.js.map +1 -1
  204. package/dist/esm/ui-shell/TopNav/HamburgerMenuIcon.js +32 -0
  205. package/dist/esm/ui-shell/TopNav/HamburgerMenuIcon.js.map +1 -0
  206. package/dist/esm/ui-shell/TopNav/TopNav.js +2 -2
  207. package/dist/esm/ui-shell/TopNav/TopNav.js.map +1 -1
  208. package/dist/esm/ui-shell/UiShell.js +37 -18
  209. package/dist/esm/ui-shell/UiShell.js.map +1 -1
  210. package/dist/esm/ui-shell/UiShellProvider.js +10 -3
  211. package/dist/esm/ui-shell/UiShellProvider.js.map +1 -1
  212. package/dist/esm/ui-shell/WideUiShellContent.js +165 -0
  213. package/dist/esm/ui-shell/WideUiShellContent.js.map +1 -0
  214. package/dist/esm/ui-shell/index.js +3 -1
  215. package/dist/esm/ui-shell/index.js.map +1 -1
  216. package/dist/esm/ui-shell/renderUiShell.js +19 -20
  217. package/dist/esm/ui-shell/renderUiShell.js.map +1 -1
  218. package/dist/esm/ui-shell/uiShellContentTypes.js +14 -0
  219. package/dist/esm/ui-shell/uiShellContentTypes.js.map +1 -0
  220. package/dist/esm/ui-shell/uiShellSharedConstants.js +16 -0
  221. package/dist/esm/ui-shell/uiShellSharedConstants.js.map +1 -0
  222. package/dist/esm/ui-shell/useMatchAppElementToUiShellAppArea.js +99 -0
  223. package/dist/esm/ui-shell/useMatchAppElementToUiShellAppArea.js.map +1 -0
  224. package/dist/esm/ui-shell/useScrollState.js +3 -5
  225. package/dist/esm/ui-shell/useScrollState.js.map +1 -1
  226. package/dist/esm/ui-shell/useUiShellBreakpoints.js +34 -0
  227. package/dist/esm/ui-shell/useUiShellBreakpoints.js.map +1 -0
  228. package/dist/esm/web-component/createReactRootElements.js.map +1 -1
  229. package/dist/esm/web-component/renderReactInWebComponent.js +6 -1
  230. package/dist/esm/web-component/renderReactInWebComponent.js.map +1 -1
  231. package/dist/index.cjs +1 -1
  232. package/dist/index.mjs +1 -1
  233. package/dist/index.scss +1 -1
  234. package/dist/tsconfig.production.tsbuildinfo +1 -1
  235. package/dist/types/Autocomplete.d.ts +1 -1
  236. package/dist/types/Breadcrumbs.d.ts +4 -3
  237. package/dist/types/Breadcrumbs.d.ts.map +1 -1
  238. package/dist/types/OdysseyProvider.d.ts +1 -1
  239. package/dist/types/OdysseyProvider.d.ts.map +1 -1
  240. package/dist/types/OdysseyThemeProvider.d.ts.map +1 -1
  241. package/dist/types/OdysseyTranslationProvider.d.ts +1 -1
  242. package/dist/types/OdysseyTranslationProvider.d.ts.map +1 -1
  243. package/dist/types/hexToRgb.d.ts.map +1 -1
  244. package/dist/types/i18n.d.ts +28 -0
  245. package/dist/types/i18n.d.ts.map +1 -1
  246. package/dist/types/properties/ts/odyssey-react-mui.d.ts +1 -0
  247. package/dist/types/properties/ts/odyssey-react-mui.d.ts.map +1 -1
  248. package/dist/types/properties/ts/odyssey-react-mui_cs.d.ts +1 -0
  249. package/dist/types/properties/ts/odyssey-react-mui_cs.d.ts.map +1 -1
  250. package/dist/types/properties/ts/odyssey-react-mui_da.d.ts +1 -0
  251. package/dist/types/properties/ts/odyssey-react-mui_da.d.ts.map +1 -1
  252. package/dist/types/properties/ts/odyssey-react-mui_de.d.ts +1 -0
  253. package/dist/types/properties/ts/odyssey-react-mui_de.d.ts.map +1 -1
  254. package/dist/types/properties/ts/odyssey-react-mui_el.d.ts +1 -0
  255. package/dist/types/properties/ts/odyssey-react-mui_el.d.ts.map +1 -1
  256. package/dist/types/properties/ts/odyssey-react-mui_es.d.ts +1 -0
  257. package/dist/types/properties/ts/odyssey-react-mui_es.d.ts.map +1 -1
  258. package/dist/types/properties/ts/odyssey-react-mui_fi.d.ts +1 -0
  259. package/dist/types/properties/ts/odyssey-react-mui_fi.d.ts.map +1 -1
  260. package/dist/types/properties/ts/odyssey-react-mui_fr.d.ts +1 -0
  261. package/dist/types/properties/ts/odyssey-react-mui_fr.d.ts.map +1 -1
  262. package/dist/types/properties/ts/odyssey-react-mui_ht.d.ts +1 -0
  263. package/dist/types/properties/ts/odyssey-react-mui_ht.d.ts.map +1 -1
  264. package/dist/types/properties/ts/odyssey-react-mui_hu.d.ts +1 -0
  265. package/dist/types/properties/ts/odyssey-react-mui_hu.d.ts.map +1 -1
  266. package/dist/types/properties/ts/odyssey-react-mui_id.d.ts +1 -0
  267. package/dist/types/properties/ts/odyssey-react-mui_id.d.ts.map +1 -1
  268. package/dist/types/properties/ts/odyssey-react-mui_it.d.ts +1 -0
  269. package/dist/types/properties/ts/odyssey-react-mui_it.d.ts.map +1 -1
  270. package/dist/types/properties/ts/odyssey-react-mui_ja.d.ts +1 -0
  271. package/dist/types/properties/ts/odyssey-react-mui_ja.d.ts.map +1 -1
  272. package/dist/types/properties/ts/odyssey-react-mui_ko.d.ts +1 -0
  273. package/dist/types/properties/ts/odyssey-react-mui_ko.d.ts.map +1 -1
  274. package/dist/types/properties/ts/odyssey-react-mui_ms.d.ts +1 -0
  275. package/dist/types/properties/ts/odyssey-react-mui_ms.d.ts.map +1 -1
  276. package/dist/types/properties/ts/odyssey-react-mui_nb.d.ts +1 -0
  277. package/dist/types/properties/ts/odyssey-react-mui_nb.d.ts.map +1 -1
  278. package/dist/types/properties/ts/odyssey-react-mui_nl_NL.d.ts +1 -0
  279. package/dist/types/properties/ts/odyssey-react-mui_nl_NL.d.ts.map +1 -1
  280. package/dist/types/properties/ts/odyssey-react-mui_pl.d.ts +1 -0
  281. package/dist/types/properties/ts/odyssey-react-mui_pl.d.ts.map +1 -1
  282. package/dist/types/properties/ts/odyssey-react-mui_pt_BR.d.ts +1 -0
  283. package/dist/types/properties/ts/odyssey-react-mui_pt_BR.d.ts.map +1 -1
  284. package/dist/types/properties/ts/odyssey-react-mui_ro.d.ts +1 -0
  285. package/dist/types/properties/ts/odyssey-react-mui_ro.d.ts.map +1 -1
  286. package/dist/types/properties/ts/odyssey-react-mui_ru.d.ts +1 -0
  287. package/dist/types/properties/ts/odyssey-react-mui_ru.d.ts.map +1 -1
  288. package/dist/types/properties/ts/odyssey-react-mui_sv.d.ts +1 -0
  289. package/dist/types/properties/ts/odyssey-react-mui_sv.d.ts.map +1 -1
  290. package/dist/types/properties/ts/odyssey-react-mui_th.d.ts +1 -0
  291. package/dist/types/properties/ts/odyssey-react-mui_th.d.ts.map +1 -1
  292. package/dist/types/properties/ts/odyssey-react-mui_tr.d.ts +1 -0
  293. package/dist/types/properties/ts/odyssey-react-mui_tr.d.ts.map +1 -1
  294. package/dist/types/properties/ts/odyssey-react-mui_uk.d.ts +1 -0
  295. package/dist/types/properties/ts/odyssey-react-mui_uk.d.ts.map +1 -1
  296. package/dist/types/properties/ts/odyssey-react-mui_vi.d.ts +1 -0
  297. package/dist/types/properties/ts/odyssey-react-mui_vi.d.ts.map +1 -1
  298. package/dist/types/properties/ts/odyssey-react-mui_zh_CN.d.ts +1 -0
  299. package/dist/types/properties/ts/odyssey-react-mui_zh_CN.d.ts.map +1 -1
  300. package/dist/types/properties/ts/odyssey-react-mui_zh_TW.d.ts +1 -0
  301. package/dist/types/properties/ts/odyssey-react-mui_zh_TW.d.ts.map +1 -1
  302. package/dist/types/theme/pxToRem.d.ts +13 -0
  303. package/dist/types/theme/pxToRem.d.ts.map +1 -0
  304. package/dist/types/theme/theme.d.ts +2 -0
  305. package/dist/types/theme/theme.d.ts.map +1 -1
  306. package/dist/types/theme/useMediaQuery.d.ts +13 -0
  307. package/dist/types/theme/useMediaQuery.d.ts.map +1 -0
  308. package/dist/types/ui-shell/AppSwitcher/AppSwitcher.d.ts.map +1 -1
  309. package/dist/types/ui-shell/NarrowUiShellContent.d.ts +17 -0
  310. package/dist/types/ui-shell/NarrowUiShellContent.d.ts.map +1 -0
  311. package/dist/types/ui-shell/SideNav/SideNav.d.ts +1 -3
  312. package/dist/types/ui-shell/SideNav/SideNav.d.ts.map +1 -1
  313. package/dist/types/ui-shell/SideNav/SideNavHeader.d.ts.map +1 -1
  314. package/dist/types/ui-shell/SideNav/SideNavItemContent.d.ts.map +1 -1
  315. package/dist/types/ui-shell/SideNav/SideNavToggleButton.d.ts.map +1 -1
  316. package/dist/types/ui-shell/SideNav/types.d.ts +7 -1
  317. package/dist/types/ui-shell/SideNav/types.d.ts.map +1 -1
  318. package/dist/types/ui-shell/TopNav/HamburgerMenuIcon.d.ts +16 -0
  319. package/dist/types/ui-shell/TopNav/HamburgerMenuIcon.d.ts.map +1 -0
  320. package/dist/types/ui-shell/TopNav/TopNav.d.ts +0 -1
  321. package/dist/types/ui-shell/TopNav/TopNav.d.ts.map +1 -1
  322. package/dist/types/ui-shell/UiShell.d.ts +20 -7
  323. package/dist/types/ui-shell/UiShell.d.ts.map +1 -1
  324. package/dist/types/ui-shell/UiShellProvider.d.ts +8 -6
  325. package/dist/types/ui-shell/UiShellProvider.d.ts.map +1 -1
  326. package/dist/types/ui-shell/WideUiShellContent.d.ts +16 -0
  327. package/dist/types/ui-shell/WideUiShellContent.d.ts.map +1 -0
  328. package/dist/types/ui-shell/index.d.ts +3 -1
  329. package/dist/types/ui-shell/index.d.ts.map +1 -1
  330. package/dist/types/ui-shell/renderUiShell.d.ts +7 -11
  331. package/dist/types/ui-shell/renderUiShell.d.ts.map +1 -1
  332. package/dist/types/ui-shell/{UiShellContent.d.ts → uiShellContentTypes.d.ts} +45 -31
  333. package/dist/types/ui-shell/uiShellContentTypes.d.ts.map +1 -0
  334. package/dist/types/ui-shell/uiShellSharedConstants.d.ts +17 -0
  335. package/dist/types/ui-shell/uiShellSharedConstants.d.ts.map +1 -0
  336. package/dist/types/ui-shell/useMatchAppElementToUiShellAppArea.d.ts +38 -0
  337. package/dist/types/ui-shell/useMatchAppElementToUiShellAppArea.d.ts.map +1 -0
  338. package/dist/types/ui-shell/useScrollState.d.ts +0 -1
  339. package/dist/types/ui-shell/useScrollState.d.ts.map +1 -1
  340. package/dist/types/ui-shell/useUiShellBreakpoints.d.ts +18 -0
  341. package/dist/types/ui-shell/useUiShellBreakpoints.d.ts.map +1 -0
  342. package/dist/types/web-component/createReactRootElements.d.ts +6 -4
  343. package/dist/types/web-component/createReactRootElements.d.ts.map +1 -1
  344. package/dist/types/web-component/renderReactInWebComponent.d.ts +12 -5
  345. package/dist/types/web-component/renderReactInWebComponent.d.ts.map +1 -1
  346. package/package.json +4 -4
  347. package/dist/cjs/ui-shell/UiShellContent.cjs +0 -242
  348. package/dist/cjs/ui-shell/UiShellContent.cjs.map +0 -1
  349. package/dist/esm/ui-shell/UiShellContent.js +0 -234
  350. package/dist/esm/ui-shell/UiShellContent.js.map +0 -1
  351. package/dist/types/ui-shell/UiShellContent.d.ts.map +0 -1
@@ -27,9 +27,8 @@ import { SideNavToggleButton } from "./SideNavToggleButton.js";
27
27
  import { SortableList } from "./SortableList/SortableList.js";
28
28
  import { Overline } from "../../Typography.js";
29
29
  import { useUiShellContext } from "../../ui-shell/UiShellProvider.js";
30
+ import { SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION, SIDE_NAV_WIDTH, UI_SHELL_BASE_Z_INDEX, UI_SHELL_OVERLAY_Z_INDEX } from "../uiShellSharedConstants.js";
30
31
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
31
- export const DEFAULT_SIDE_NAV_WIDTH = "300px";
32
- export const SIDENAV_COLLAPSE_ICON_POSITION = "77px";
33
32
  const StyledCollapsibleContent = styled("div", {
34
33
  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSideNavCollapsed"
35
34
  })(({
@@ -37,8 +36,8 @@ const StyledCollapsibleContent = styled("div", {
37
36
  isSideNavCollapsed
38
37
  }) => ({
39
38
  position: "relative",
40
- display: "inline-grid",
41
- gridTemplateColumns: DEFAULT_SIDE_NAV_WIDTH,
39
+ display: "grid",
40
+ gridTemplateColumns: SIDE_NAV_WIDTH,
42
41
  height: "100%",
43
42
  transition: `grid-template-columns ${odysseyDesignTokens.TransitionDurationMain}, opacity 300ms`,
44
43
  transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,
@@ -54,7 +53,7 @@ const StyledOpacityTransitionContainer = styled("div", {
54
53
  odysseyDesignTokens,
55
54
  isSideNavCollapsed
56
55
  }) => ({
57
- display: "inline-grid",
56
+ display: "grid",
58
57
  gridTemplateRows: "max-content 1fr max-content",
59
58
  height: "100%",
60
59
  transition: `opacity 50ms`,
@@ -64,7 +63,7 @@ const StyledOpacityTransitionContainer = styled("div", {
64
63
  opacity: 0
65
64
  })
66
65
  }));
67
- const StyledSideNav = styled("nav", {
66
+ const StyledSideNavContainer = styled("nav", {
68
67
  shouldForwardProp: prop => prop !== "backgroundColor" && prop !== "odysseyDesignTokens" && prop !== "isAppContentWhiteBackground" && prop !== "isSideNavCollapsed"
69
68
  })(({
70
69
  backgroundColor,
@@ -72,10 +71,10 @@ const StyledSideNav = styled("nav", {
72
71
  isSideNavCollapsed,
73
72
  odysseyDesignTokens
74
73
  }) => ({
75
- position: "relative",
76
- display: "inline-block",
77
- height: "100%",
78
74
  backgroundColor: backgroundColor || odysseyDesignTokens.HueNeutralWhite,
75
+ height: "100%",
76
+ position: "relative",
77
+ width: "fit-content",
79
78
  ...(isAppContentWhiteBackground && {
80
79
  borderRightWidth: odysseyDesignTokens.BorderWidthMain,
81
80
  borderRightStyle: odysseyDesignTokens.BorderStyleMain,
@@ -92,7 +91,7 @@ const StyledSideNav = styled("nav", {
92
91
  transform: `translateX(0)`,
93
92
  transition: `opacity ${odysseyDesignTokens.TransitionDurationMain}, transform ${odysseyDesignTokens.TransitionDurationMain}`,
94
93
  width: odysseyDesignTokens.Spacing2,
95
- zIndex: 2
94
+ zIndex: UI_SHELL_OVERLAY_Z_INDEX
96
95
  },
97
96
  "&:has([data-sidenav-toggle='true']:hover), &:has([data-sidenav-toggle='true']:focus-visible)": {
98
97
  ...(isSideNavCollapsed && {
@@ -107,13 +106,13 @@ const StyledSideNav = styled("nav", {
107
106
  },
108
107
  "[data-sidenav-toggle='true']": {
109
108
  position: "absolute",
110
- top: SIDENAV_COLLAPSE_ICON_POSITION,
109
+ top: SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION,
111
110
  right: 0,
112
111
  transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,
113
112
  transform: `translate3d(100%, 0, 0)`
114
113
  }
115
114
  }));
116
- const SideNavHeaderContainer = styled("div", {
115
+ const StyledSideNavHeaderContainer = styled("div", {
117
116
  shouldForwardProp: prop => prop !== "borderColor" && prop !== "hasContentScrolled" && prop !== "odysseyDesignTokens"
118
117
  })(({
119
118
  borderColor,
@@ -130,24 +129,23 @@ const SideNavHeaderContainer = styled("div", {
130
129
  })
131
130
  })
132
131
  }));
133
- const SideNavListContainer = styled("ul")(() => ({
132
+ const StyledSideNavListContainer = styled("ul")(() => ({
134
133
  padding: 0,
135
134
  listStyle: "none",
136
135
  listStyleType: "none",
137
136
  margin: 0
138
137
  }));
139
- const SideNavScrollableContainer = styled("div", {
138
+ const StyledSideNavScrollableContainer = styled("div", {
140
139
  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
141
140
  })(({
142
141
  odysseyDesignTokens
143
142
  }) => ({
144
- display: "grid",
143
+ display: "inline-grid",
145
144
  gridTemplateRows: "1fr max-content",
146
- flex: "1 1 100%",
147
145
  overflowY: "auto",
148
146
  paddingInline: odysseyDesignTokens.Spacing2
149
147
  }));
150
- const SectionHeaderContainer = styled("li", {
148
+ const StyledSectionHeaderContainer = styled("li", {
151
149
  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "contrastFontColor"
152
150
  })(({
153
151
  contrastFontColor,
@@ -158,7 +156,7 @@ const SectionHeaderContainer = styled("li", {
158
156
  marginBlock: `${odysseyDesignTokens.Spacing3}`,
159
157
  color: contrastFontColor || odysseyDesignTokens.HueNeutral600
160
158
  }));
161
- const SideNavFooter = styled("div", {
159
+ const StyledSideNavFooter = styled("div", {
162
160
  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "sideNavBackgroundColor"
163
161
  })(({
164
162
  odysseyDesignTokens,
@@ -171,7 +169,7 @@ const SideNavFooter = styled("div", {
171
169
  backgroundColor: sideNavBackgroundColor
172
170
  })
173
171
  }));
174
- const PersistentSideNavFooter = styled(SideNavFooter, {
172
+ const StyledPersistentSideNavFooter = styled(StyledSideNavFooter, {
175
173
  shouldForwardProp: prop => prop !== "isContentScrollable" && prop !== "odysseyDesignTokens" && prop !== "sideNavBackgroundColor"
176
174
  })(({
177
175
  isContentScrollable,
@@ -181,7 +179,7 @@ const PersistentSideNavFooter = styled(SideNavFooter, {
181
179
  transitionProperty: "box-shadow",
182
180
  transitionDuration: odysseyDesignTokens.TransitionDurationMain,
183
181
  transitionTiming: odysseyDesignTokens.TransitionTimingMain,
184
- zIndex: 2,
182
+ zIndex: UI_SHELL_BASE_Z_INDEX,
185
183
  ...(isContentScrollable && {
186
184
  boxShadow: "0px -8px 8px -8px rgba(39, 39, 39, 0.08)"
187
185
  }),
@@ -189,7 +187,7 @@ const PersistentSideNavFooter = styled(SideNavFooter, {
189
187
  backgroundColor: sideNavBackgroundColor
190
188
  })
191
189
  }));
192
- const SideNavFooterItemsContainer = styled("div", {
190
+ const StyledSideNavFooterItemsContainer = styled("div", {
193
191
  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "sideNavContrastColors"
194
192
  })(({
195
193
  odysseyDesignTokens,
@@ -220,7 +218,7 @@ const SideNavFooterItemsContainer = styled("div", {
220
218
  })
221
219
  }
222
220
  }));
223
- const LoadingItemContainer = styled("div", {
221
+ const StyledLoadingItemContainer = styled("div", {
224
222
  shouldForwardProp: prop => prop !== "odysseyDesignTokens"
225
223
  })(({
226
224
  odysseyDesignTokens
@@ -234,7 +232,7 @@ const LoadingItemContainer = styled("div", {
234
232
  const getHasScrollableContent = scrollableContainer => scrollableContainer.scrollHeight > scrollableContainer.clientHeight;
235
233
  const LoadingItem = () => {
236
234
  const odysseyDesignTokens = useOdysseyDesignTokens();
237
- return _jsxs(LoadingItemContainer, {
235
+ return _jsxs(StyledLoadingItemContainer, {
238
236
  odysseyDesignTokens: odysseyDesignTokens,
239
237
  children: [_jsx(_Skeleton, {
240
238
  variant: "circular",
@@ -255,13 +253,14 @@ const SideNav = ({
255
253
  isCollapsed = false,
256
254
  isCompact,
257
255
  isLoading,
256
+ isObtrusive,
258
257
  logoProps,
259
258
  onCollapse,
260
259
  onExpand,
261
260
  onSort,
262
261
  sideNavItems
263
262
  }) => {
264
- const [isSideNavCollapsed, setSideNavCollapsed] = useState(isCollapsed);
263
+ const [isSideNavCollapsed, setIsSideNavCollapsed] = useState(isCollapsed);
265
264
  const [hasContentScrolled, setHasContentScrolled] = useState(false);
266
265
  const [isContentScrollable, setIsContentScrollable] = useState(false);
267
266
  const [sideNavItemsList, updateSideNavItemsList] = useState(sideNavItems);
@@ -275,7 +274,7 @@ const SideNav = ({
275
274
  const intersectionObserverRef = useRef(null);
276
275
  const blankElement = useMemo(() => _jsx("div", {}), []);
277
276
  useEffect(() => updateSideNavItemsList(sideNavItems), [sideNavItems]);
278
- useEffect(() => setSideNavCollapsed(isCollapsed), [isCollapsed]);
277
+ useEffect(() => setIsSideNavCollapsed(isCollapsed), [isCollapsed]);
279
278
  useEffect(() => {
280
279
  const updateIsContentScrollable = () => {
281
280
  if (scrollableContentRef.current && scrollableContentRef.current.parentElement) {
@@ -360,7 +359,10 @@ const SideNav = ({
360
359
  } : item;
361
360
  });
362
361
  updateSideNavItemsList(updatedSideNavItems);
363
- }, [sideNavItemsList]);
362
+ if (isCollapsed || isObtrusive) {
363
+ uiShellContext?.publishSideNavItemClicked();
364
+ }
365
+ }, [isCollapsed, isObtrusive, sideNavItemsList, uiShellContext]);
364
366
  const processedSideNavItems = useMemo(() => {
365
367
  return sideNavItemsList?.map(item => ({
366
368
  ...item,
@@ -388,19 +390,33 @@ const SideNav = ({
388
390
  }));
389
391
  }, [getRefIfThisIsFirstNodeWithIsSelected, sideNavItemsList, sideNavItemContentProviderValue, setSelectedItem]);
390
392
  const sideNavExpandClickHandler = useCallback(() => {
391
- if (isSideNavCollapsed) {
392
- onExpand?.();
393
- } else {
394
- onCollapse?.();
395
- }
396
- setSideNavCollapsed(!isSideNavCollapsed);
397
- }, [isSideNavCollapsed, setSideNavCollapsed, onExpand, onCollapse]);
393
+ setIsSideNavCollapsed(isSideNavCollapsed => {
394
+ if (isSideNavCollapsed) {
395
+ onExpand?.();
396
+ } else {
397
+ onCollapse?.();
398
+ }
399
+ return !isSideNavCollapsed;
400
+ });
401
+ }, [onExpand, onCollapse]);
398
402
  const sideNavExpandKeyHandler = useCallback(event => {
399
403
  if (event?.key === "Enter" || event?.code === "Space") {
400
404
  event.preventDefault();
401
405
  sideNavExpandClickHandler();
402
406
  }
403
407
  }, [sideNavExpandClickHandler]);
408
+ useEffect(() => {
409
+ if (isCollapsed) {
410
+ const unsubscribe = uiShellContext?.subscribeSideNavItemClicked(() => {
411
+ onCollapse?.();
412
+ setIsSideNavCollapsed(true);
413
+ });
414
+ return () => {
415
+ unsubscribe?.();
416
+ };
417
+ }
418
+ return () => {};
419
+ }, [isCollapsed, onCollapse, uiShellContext]);
404
420
  const setSortedItems = useCallback((parentId, activeId, activeIndex, overIndex) => {
405
421
  const sortedSideNavItems = sideNavItemsList.map(item => item.id === parentId && item.nestedNavItems ? {
406
422
  ...item,
@@ -409,7 +425,7 @@ const SideNav = ({
409
425
  updateSideNavItemsList(sortedSideNavItems);
410
426
  onSort?.(sortedSideNavItems, parentId, activeId, activeIndex, overIndex);
411
427
  }, [onSort, sideNavItemsList]);
412
- return _jsxs(StyledSideNav, {
428
+ return _jsxs(StyledSideNavContainer, {
413
429
  "aria-label": t("navigation.label"),
414
430
  backgroundColor: uiShellContext?.sideNavBackgroundColor,
415
431
  id: "side-nav-expandable",
@@ -429,19 +445,21 @@ const SideNav = ({
429
445
  children: _jsxs(StyledOpacityTransitionContainer, {
430
446
  isSideNavCollapsed: isSideNavCollapsed,
431
447
  odysseyDesignTokens: odysseyDesignTokens,
432
- children: [_jsx(SideNavHeaderContainer, {
448
+ children: [appName || isLoading || logoProps ? _jsx(StyledSideNavHeaderContainer, {
433
449
  hasContentScrolled: hasContentScrolled,
434
450
  odysseyDesignTokens: odysseyDesignTokens,
435
451
  borderColor: uiShellContext?.sideNavContrastColors?.fontColor,
436
- children: _jsx(SideNavHeader, {
452
+ children: isLoading && !appName && !logoProps ? _jsx(SideNavHeader, {
453
+ isLoading: isLoading
454
+ }) : _jsx(SideNavHeader, {
437
455
  appName: appName,
438
456
  isLoading: isLoading,
439
457
  logoProps: logoProps
440
458
  })
441
- }), _jsxs(SideNavScrollableContainer, {
459
+ }) : _jsx("div", {}), _jsxs(StyledSideNavScrollableContainer, {
442
460
  odysseyDesignTokens: odysseyDesignTokens,
443
461
  "data-se": "scrollable-region",
444
- children: [_jsx(SideNavListContainer, {
462
+ children: [_jsx(StyledSideNavListContainer, {
445
463
  role: "none",
446
464
  ref: scrollableContentRef,
447
465
  children: isLoading ? Array(6).fill(null).map((_, index) => _jsx(LoadingItem, {}, index)) : processedSideNavItems?.map(item => {
@@ -459,7 +477,7 @@ const SideNav = ({
459
477
  if (isSectionHeader) {
460
478
  return _jsx(ErrorBoundary, {
461
479
  fallback: blankElement,
462
- children: _jsx(SectionHeaderContainer, {
480
+ children: _jsx(StyledSectionHeaderContainer, {
463
481
  contrastFontColor: uiShellContext?.sideNavContrastColors?.fontColor,
464
482
  id: id,
465
483
  odysseyDesignTokens: odysseyDesignTokens,
@@ -484,7 +502,7 @@ const SideNav = ({
484
502
  isExpanded: isExpanded,
485
503
  startIcon: startIcon,
486
504
  isDisabled: isDisabled,
487
- children: _jsx(SideNavListContainer, {
505
+ children: _jsx(StyledSideNavListContainer, {
488
506
  role: "none",
489
507
  children: isSortable ? _jsx(SortableList, {
490
508
  parentId: item.id,
@@ -518,10 +536,10 @@ const SideNav = ({
518
536
  });
519
537
  }
520
538
  })
521
- }), !isLoading && footerItems && !hasCustomFooter && _jsx(SideNavFooter, {
539
+ }), !isLoading && footerItems && !hasCustomFooter && _jsx(StyledSideNavFooter, {
522
540
  odysseyDesignTokens: odysseyDesignTokens,
523
541
  sideNavBackgroundColor: uiShellContext?.sideNavBackgroundColor,
524
- children: _jsx(SideNavFooterItemsContainer, {
542
+ children: _jsx(StyledSideNavFooterItemsContainer, {
525
543
  odysseyDesignTokens: odysseyDesignTokens,
526
544
  sideNavContrastColors: uiShellContext?.sideNavContrastColors,
527
545
  children: _jsx(SideNavFooterContent, {
@@ -529,7 +547,7 @@ const SideNav = ({
529
547
  })
530
548
  })
531
549
  })]
532
- }), !isLoading && !footerItems && hasCustomFooter && _jsx(PersistentSideNavFooter, {
550
+ }), !isLoading && !footerItems && hasCustomFooter && _jsx(StyledPersistentSideNavFooter, {
533
551
  isContentScrollable: isContentScrollable,
534
552
  odysseyDesignTokens: odysseyDesignTokens,
535
553
  sideNavBackgroundColor: uiShellContext?.sideNavBackgroundColor,
@@ -1 +1 @@
1
- {"version":3,"file":"SideNav.js","names":["styled","memo","useMemo","useState","useCallback","useRef","useEffect","createElement","_createElement","useTranslation","arrayMove","ErrorBoundary","NavAccordion","useOdysseyDesignTokens","OdysseyThemeProvider","SideNavHeader","SideNavItemContent","StyledSideNavListItem","SideNavFooterContent","SideNavItemContentContext","SideNavToggleButton","SortableList","Overline","useUiShellContext","jsx","_jsx","jsxs","_jsxs","DEFAULT_SIDE_NAV_WIDTH","SIDENAV_COLLAPSE_ICON_POSITION","StyledCollapsibleContent","shouldForwardProp","prop","odysseyDesignTokens","isSideNavCollapsed","position","display","gridTemplateColumns","height","transition","TransitionDurationMain","transitionTimingFunction","TransitionTimingMain","overflow","opacity","StyledOpacityTransitionContainer","gridTemplateRows","StyledSideNav","backgroundColor","isAppContentWhiteBackground","HueNeutralWhite","borderRightWidth","BorderWidthMain","borderRightStyle","BorderStyleMain","borderRightColor","HueNeutral100","HueNeutral200","content","right","top","transform","width","Spacing2","zIndex","Spacing3","SideNavHeaderContainer","borderColor","hasContentScrolled","flexShrink","borderBottomWidth","borderBottomStyle","borderBottomColor","concat","SideNavListContainer","padding","listStyle","listStyleType","margin","SideNavScrollableContainer","flex","overflowY","paddingInline","SectionHeaderContainer","contrastFontColor","paddingBlock","Spacing1","Spacing4","marginBlock","color","HueNeutral600","SideNavFooter","sideNavBackgroundColor","PersistentSideNavFooter","isContentScrollable","transitionProperty","transitionDuration","transitionTiming","boxShadow","SideNavFooterItemsContainer","sideNavContrastColors","flexWrap","alignItems","fontSize","TypographySizeOverline","fontColor","textDecoration","HueNeutral900","LoadingItemContainer","gap","getHasScrollableContent","scrollableContainer","scrollHeight","clientHeight","LoadingItem","children","_Skeleton","variant","SideNav","appName","footerComponent","footerItems","hasCustomFooter","isCollapsible","isCollapsed","isCompact","isLoading","logoProps","onCollapse","onExpand","onSort","sideNavItems","setSideNavCollapsed","setHasContentScrolled","setIsContentScrollable","sideNavItemsList","updateSideNavItemsList","uiShellContext","t","scrollableContentRef","resizeObserverRef","intersectionObserverRef","blankElement","updateIsContentScrollable","current","parentElement","resizeObserverDebounceTimer","ResizeObserver","cancelAnimationFrame","requestAnimationFrame","observe","IntersectionObserver","entries","isIntersecting","slice","sort","a","b","time","at","root","threshold","ulElement","liElement","Array","from","disconnect","scrollIntoViewRef","firstSideNavItemIdWithIsSelected","flattenedItems","flatMap","sideNavItem","nestedNavItems","firstItemWithIsSelected","find","isSelected","id","scrollIntoView","getRefIfThisIsFirstNodeWithIsSelected","itemId","undefined","sideNavItemContentProviderValue","depth","setSelectedItem","selectedItemId","updatedSideNavItems","map","item","childItem","processedSideNavItems","childNavItems","childProps","isDisabled","isSortable","navItem","Provider","value","scrollRef","onItemSelected","translate","sideNavExpandClickHandler","sideNavExpandKeyHandler","event","key","code","preventDefault","setSortedItems","parentId","activeId","activeIndex","overIndex","sortedSideNavItems","appBackgroundColor","ariaControls","onClick","onKeyDown","role","ref","fill","_","index","label","isSectionHeader","startIcon","isDefaultExpanded","isExpanded","fallback","component","disabled","items","onChange","renderItem","sortableItem","Item","MemoizedSideNav","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNav.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 {\n memo,\n useMemo,\n useState,\n useCallback,\n useRef,\n useEffect,\n KeyboardEventHandler,\n} from \"react\";\nimport { Skeleton } from \"@mui/material\";\nimport { useTranslation } from \"react-i18next\";\nimport { arrayMove } from \"@dnd-kit/sortable\";\nimport { UniqueIdentifier } from \"@dnd-kit/core\";\nimport { ErrorBoundary } from \"react-error-boundary\";\nimport { Property } from \"csstype\";\n\nimport { ContrastColors } from \"../../createContrastColors.js\";\nimport { NavAccordion } from \"./NavAccordion.js\";\nimport {\n DesignTokens,\n useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { OdysseyThemeProvider } from \"../../OdysseyThemeProvider.js\";\nimport type { SideNavProps } from \"./types.js\";\nimport { SideNavHeader } from \"./SideNavHeader.js\";\nimport {\n SideNavItemContent,\n StyledSideNavListItem,\n} from \"./SideNavItemContent.js\";\nimport { SideNavFooterContent } from \"./SideNavFooterContent.js\";\nimport { SideNavItemContentContext } from \"./SideNavItemContentContext.js\";\nimport { SideNavToggleButton } from \"./SideNavToggleButton.js\";\nimport { SortableList } from \"./SortableList/SortableList.js\";\nimport { Overline } from \"../../Typography.js\";\nimport {\n UiShellColors,\n useUiShellContext,\n} from \"../../ui-shell/UiShellProvider.js\";\n\nexport const DEFAULT_SIDE_NAV_WIDTH = \"300px\";\n\n// The side nav collapse icon is placed absolutely from the top (Logo container + nav header height)\n// to align it in the middle of the nav header text\nexport const SIDENAV_COLLAPSE_ICON_POSITION = \"77px\";\n\nconst StyledCollapsibleContent = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" && prop !== \"isSideNavCollapsed\",\n})<{\n odysseyDesignTokens: DesignTokens;\n isSideNavCollapsed: boolean;\n}>(({ odysseyDesignTokens, isSideNavCollapsed }) => ({\n position: \"relative\",\n display: \"inline-grid\",\n gridTemplateColumns: DEFAULT_SIDE_NAV_WIDTH,\n height: \"100%\",\n transition: `grid-template-columns ${odysseyDesignTokens.TransitionDurationMain}, opacity 300ms`,\n transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,\n overflow: \"hidden\",\n\n ...(isSideNavCollapsed && {\n gridTemplateColumns: 0,\n opacity: 0,\n }),\n}));\n\nconst StyledOpacityTransitionContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" && prop !== \"isSideNavCollapsed\",\n})(\n ({\n odysseyDesignTokens,\n isSideNavCollapsed,\n }: {\n odysseyDesignTokens: DesignTokens;\n isSideNavCollapsed: boolean;\n }) => ({\n display: \"inline-grid\",\n gridTemplateRows: \"max-content 1fr max-content\",\n height: \"100%\",\n transition: `opacity 50ms`,\n transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,\n overflow: \"hidden\",\n\n ...(isSideNavCollapsed && {\n opacity: 0,\n }),\n }),\n);\n\nconst StyledSideNav = styled(\"nav\", {\n shouldForwardProp: (prop) =>\n prop !== \"backgroundColor\" &&\n prop !== \"odysseyDesignTokens\" &&\n prop !== \"isAppContentWhiteBackground\" &&\n prop !== \"isSideNavCollapsed\",\n})<{\n isAppContentWhiteBackground: boolean;\n backgroundColor?: UiShellColors[\"sideNavBackgroundColor\"];\n isSideNavCollapsed: boolean;\n odysseyDesignTokens: DesignTokens;\n}>(\n ({\n backgroundColor,\n isAppContentWhiteBackground,\n isSideNavCollapsed,\n odysseyDesignTokens,\n }) => ({\n position: \"relative\",\n display: \"inline-block\",\n height: \"100%\",\n backgroundColor: backgroundColor || odysseyDesignTokens.HueNeutralWhite,\n\n ...(isAppContentWhiteBackground && {\n borderRightWidth: odysseyDesignTokens.BorderWidthMain,\n borderRightStyle:\n odysseyDesignTokens.BorderStyleMain as Property.BorderRightStyle,\n borderRightColor: odysseyDesignTokens.HueNeutral100,\n }),\n\n \"&::after\": {\n backgroundColor: odysseyDesignTokens.HueNeutral200,\n content: \"''\",\n height: \"100%\",\n opacity: 0,\n position: \"absolute\",\n right: 0,\n top: 0,\n transform: `translateX(0)`,\n transition: `opacity ${odysseyDesignTokens.TransitionDurationMain}, transform ${odysseyDesignTokens.TransitionDurationMain}`,\n width: odysseyDesignTokens.Spacing2,\n zIndex: 2,\n },\n\n \"&:has([data-sidenav-toggle='true']:hover), &:has([data-sidenav-toggle='true']:focus-visible)\":\n {\n ...(isSideNavCollapsed && {\n \"&::after\": {\n opacity: 1,\n transform: `translateX(100%)`,\n },\n\n \"[data-sidenav-toggle='true']\": {\n transform: `translate3d(calc(100% + ${odysseyDesignTokens.Spacing3}), 0, 0)`,\n },\n }),\n },\n\n \"[data-sidenav-toggle='true']\": {\n position: \"absolute\",\n top: SIDENAV_COLLAPSE_ICON_POSITION,\n right: 0,\n transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,\n transform: `translate3d(100%, 0, 0)`,\n },\n }),\n);\n\nconst SideNavHeaderContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"borderColor\" &&\n prop !== \"hasContentScrolled\" &&\n prop !== \"odysseyDesignTokens\",\n})(\n ({\n borderColor,\n hasContentScrolled,\n odysseyDesignTokens,\n }: {\n borderColor: ContrastColors[\"fontColor\"];\n hasContentScrolled: boolean;\n odysseyDesignTokens: DesignTokens;\n }) => ({\n flexShrink: 0,\n // The bottom border should appear only if the scrollable region has been scrolled\n ...(hasContentScrolled && {\n borderBottomWidth: odysseyDesignTokens.BorderWidthMain,\n borderBottomStyle:\n odysseyDesignTokens.BorderStyleMain as Property.BorderBottomStyle,\n borderBottomColor: odysseyDesignTokens.HueNeutral100,\n\n ...(borderColor && {\n borderBottomColor: borderColor.concat(\"15\"),\n }),\n }),\n }),\n);\n\nconst SideNavListContainer = styled(\"ul\")(() => ({\n padding: 0,\n listStyle: \"none\",\n listStyleType: \"none\",\n margin: 0,\n}));\n\nconst SideNavScrollableContainer = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n display: \"grid\",\n gridTemplateRows: \"1fr max-content\",\n flex: \"1 1 100%\",\n overflowY: \"auto\",\n paddingInline: odysseyDesignTokens.Spacing2,\n}));\n\nconst SectionHeaderContainer = styled(\"li\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" && prop !== \"contrastFontColor\",\n})(\n ({\n contrastFontColor,\n odysseyDesignTokens,\n }: {\n contrastFontColor: ContrastColors[\"fontColor\"];\n odysseyDesignTokens: DesignTokens;\n }) => ({\n paddingBlock: odysseyDesignTokens.Spacing1,\n paddingInline: odysseyDesignTokens.Spacing4,\n marginBlock: `${odysseyDesignTokens.Spacing3}`,\n color: contrastFontColor || odysseyDesignTokens.HueNeutral600,\n }),\n);\n\nconst SideNavFooter = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" && prop !== \"sideNavBackgroundColor\",\n})(\n ({\n odysseyDesignTokens,\n sideNavBackgroundColor,\n }: {\n odysseyDesignTokens: DesignTokens;\n sideNavBackgroundColor?: UiShellColors[\"sideNavBackgroundColor\"];\n }) => ({\n flexShrink: 0,\n padding: odysseyDesignTokens.Spacing4,\n backgroundColor: odysseyDesignTokens.HueNeutralWhite,\n\n ...(sideNavBackgroundColor && {\n backgroundColor: sideNavBackgroundColor,\n }),\n }),\n);\n\nconst PersistentSideNavFooter = styled(SideNavFooter, {\n shouldForwardProp: (prop) =>\n prop !== \"isContentScrollable\" &&\n prop !== \"odysseyDesignTokens\" &&\n prop !== \"sideNavBackgroundColor\",\n})(\n ({\n isContentScrollable,\n odysseyDesignTokens,\n sideNavBackgroundColor,\n }: {\n isContentScrollable: boolean;\n odysseyDesignTokens: DesignTokens;\n sideNavBackgroundColor?: UiShellColors[\"sideNavBackgroundColor\"];\n }) => ({\n transitionProperty: \"box-shadow\",\n transitionDuration: odysseyDesignTokens.TransitionDurationMain,\n transitionTiming: odysseyDesignTokens.TransitionTimingMain,\n zIndex: 2,\n // The box shadow should appear above the footer only if the scrollable region has overflow\n ...(isContentScrollable && {\n boxShadow: \"0px -8px 8px -8px rgba(39, 39, 39, 0.08)\",\n }),\n ...(sideNavBackgroundColor && {\n backgroundColor: sideNavBackgroundColor,\n }),\n }),\n);\n\nconst SideNavFooterItemsContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" && prop !== \"sideNavContrastColors\",\n})<{\n odysseyDesignTokens: DesignTokens;\n sideNavContrastColors: UiShellColors[\"sideNavContrastColors\"];\n}>(({ odysseyDesignTokens, sideNavContrastColors }) => ({\n display: \"flex\",\n flexWrap: \"wrap\",\n alignItems: \"center\",\n fontSize: odysseyDesignTokens.TypographySizeOverline,\n\n \"a, span\": {\n color: odysseyDesignTokens.HueNeutral600,\n transition: `color ${odysseyDesignTokens.TransitionDurationMain}`,\n\n \"&:visited\": {\n color: odysseyDesignTokens.HueNeutral600,\n\n ...(sideNavContrastColors?.fontColor && {\n color: sideNavContrastColors?.fontColor,\n }),\n },\n\n \"&:hover\": {\n textDecoration: \"none\",\n color: odysseyDesignTokens.HueNeutral900,\n\n ...(sideNavContrastColors?.fontColor && {\n color: sideNavContrastColors?.fontColor,\n }),\n },\n\n ...(sideNavContrastColors?.fontColor && {\n color: sideNavContrastColors?.fontColor,\n }),\n },\n}));\n\nconst LoadingItemContainer = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n alignItems: \"center\",\n display: \"flex\",\n gap: odysseyDesignTokens.Spacing2,\n paddingBlock: odysseyDesignTokens.Spacing2,\n paddingInline: odysseyDesignTokens.Spacing4,\n}));\n\nconst getHasScrollableContent = (scrollableContainer: HTMLElement) =>\n scrollableContainer.scrollHeight > scrollableContainer.clientHeight;\n\nconst LoadingItem = () => {\n const odysseyDesignTokens: DesignTokens = useOdysseyDesignTokens();\n return (\n <LoadingItemContainer odysseyDesignTokens={odysseyDesignTokens}>\n <Skeleton\n variant=\"circular\"\n width={odysseyDesignTokens.Spacing4}\n height={odysseyDesignTokens.Spacing4}\n />\n <Skeleton variant=\"rounded\" width=\"100%\" />\n </LoadingItemContainer>\n );\n};\n\nconst SideNav = ({\n appName,\n footerComponent,\n footerItems,\n hasCustomFooter,\n isCollapsible,\n isCollapsed = false,\n isCompact,\n isLoading,\n logoProps,\n onCollapse,\n onExpand,\n onSort,\n sideNavItems,\n}: SideNavProps) => {\n const [isSideNavCollapsed, setSideNavCollapsed] = useState(isCollapsed);\n const [hasContentScrolled, setHasContentScrolled] = useState(false);\n const [isContentScrollable, setIsContentScrollable] = useState(false);\n const [sideNavItemsList, updateSideNavItemsList] = useState(sideNavItems);\n\n const uiShellContext = useUiShellContext();\n const odysseyDesignTokens: DesignTokens = useOdysseyDesignTokens();\n const { t } = useTranslation();\n\n const scrollableContentRef = useRef<HTMLUListElement>(null);\n const resizeObserverRef = useRef<ResizeObserver | null>(null);\n const intersectionObserverRef = useRef<IntersectionObserver | null>(null);\n\n const blankElement = useMemo(() => <div />, []);\n\n // The default value (sideNavItems) passed to useState is ONLY used by the useState hook for\n // the very first value. Subsequent updates to the prop (sideNavItems) need to cause the state\n // to update!\n useEffect(() => updateSideNavItemsList(sideNavItems), [sideNavItems]);\n\n // update sidenav collapse status\n useEffect(() => setSideNavCollapsed(isCollapsed), [isCollapsed]);\n\n useEffect(() => {\n // This is called directly in this effect AND perhaps as a result of the ResizeObserver\n const updateIsContentScrollable = () => {\n if (\n scrollableContentRef.current &&\n scrollableContentRef.current.parentElement\n ) {\n setIsContentScrollable(\n getHasScrollableContent(scrollableContentRef.current.parentElement),\n );\n }\n };\n\n // If the window is resized, we may need to re-determine if the scrollable container has overflow\n // Setup a ResizeObserver to know if the size of the scrollableContent changes\n let resizeObserverDebounceTimer: ReturnType<typeof requestAnimationFrame>;\n if (!resizeObserverRef.current) {\n resizeObserverRef.current = new ResizeObserver(() => {\n cancelAnimationFrame(resizeObserverDebounceTimer);\n resizeObserverDebounceTimer = requestAnimationFrame(\n updateIsContentScrollable,\n );\n });\n }\n\n if (resizeObserverRef.current && scrollableContentRef.current) {\n // Observe the <ul> itself (in case it changes size due to the content expanding)\n resizeObserverRef.current.observe(scrollableContentRef.current);\n if (scrollableContentRef.current.parentElement) {\n // ALSO observe the parent (<SideNavScrollableContainer>) in case the window resizes\n resizeObserverRef.current.observe(\n scrollableContentRef.current.parentElement,\n );\n }\n }\n\n // Determine if the scrollable container has overflow or not on load\n updateIsContentScrollable();\n\n // Finally, we only want to have the border on the bottom of the header iff the user has scrolled\n // the scrollable container\n if (!intersectionObserverRef.current && scrollableContentRef.current) {\n intersectionObserverRef.current = new IntersectionObserver(\n (entries) => {\n // If isIntersecting is true, then we're at the top of the scroll container\n // If isIntersecting is false, some scrolling has occurred.\n // The entries must be sorted by time and we only really need to look at the latest one\n const isIntersecting = entries\n .slice()\n .sort((a, b) => a.time - b.time)\n .at(0)?.isIntersecting;\n setHasContentScrolled(!isIntersecting);\n },\n {\n root: scrollableContentRef.current.parentElement,\n threshold: 1.0,\n },\n );\n }\n\n if (intersectionObserverRef.current && scrollableContentRef.current) {\n const ulElement = scrollableContentRef.current;\n const [liElement] = Array.from(ulElement?.children || []);\n\n if (liElement) {\n intersectionObserverRef.current.observe(liElement);\n }\n }\n\n // Cleanup when unmounted:\n return () => {\n if (resizeObserverRef.current) {\n resizeObserverRef.current.disconnect();\n resizeObserverRef.current = null;\n }\n if (intersectionObserverRef.current) {\n intersectionObserverRef.current.disconnect();\n intersectionObserverRef.current = null;\n }\n cancelAnimationFrame(resizeObserverDebounceTimer); // Ensure timer is cleared on component unmount\n };\n }, [sideNavItemsList]);\n\n const scrollIntoViewRef = useRef<HTMLLIElement>(null);\n /**\n * Look through the sideNavItems and determine which is the first node\n * with isSelected. This should be the node we set a ref on in order to\n * call scrollIntoView in the effect\n */\n const firstSideNavItemIdWithIsSelected = useMemo(() => {\n const flattenedItems = sideNavItemsList.flatMap((sideNavItem) =>\n sideNavItem.nestedNavItems\n ? [sideNavItem, ...sideNavItem.nestedNavItems]\n : sideNavItem,\n );\n const firstItemWithIsSelected = flattenedItems.find(\n (sideNavItem) => sideNavItem.isSelected,\n );\n return firstItemWithIsSelected?.id;\n }, [sideNavItemsList]);\n /**\n * Once we've rendered and if we have an item to scroll to, do the scroll action.\n * This must rely on checking firstSideNavItemIdWithIsSelected or it will not run\n * once the actual ref is populated.\n */\n useEffect(() => {\n if (firstSideNavItemIdWithIsSelected && scrollIntoViewRef.current) {\n scrollIntoViewRef.current.scrollIntoView();\n }\n }, [firstSideNavItemIdWithIsSelected]);\n\n /**\n * We only want to put a ref on a node iff it is the first selected node.\n * This function returns the ref only if the ID provided matches the first\n * selected node, otherwise returns undefined (so that the node has no ref)\n */\n const getRefIfThisIsFirstNodeWithIsSelected = useCallback(\n (itemId: string) =>\n itemId === firstSideNavItemIdWithIsSelected\n ? scrollIntoViewRef\n : undefined,\n [firstSideNavItemIdWithIsSelected],\n );\n\n const sideNavItemContentProviderValue = useMemo(\n () => ({ isCompact, depth: 1 }),\n [isCompact],\n );\n\n const setSelectedItem = useCallback(\n (selectedItemId: string) => {\n const updatedSideNavItems = sideNavItemsList.map((item) => {\n if (item.id === selectedItemId) {\n item.isSelected = true;\n } else if (item.isSelected) {\n delete item.isSelected;\n }\n\n return item.nestedNavItems\n ? {\n ...item,\n nestedNavItems: item.nestedNavItems.map((childItem) => {\n if (childItem.id === selectedItemId) {\n childItem.isSelected = true;\n } else if (childItem.isSelected) {\n delete childItem.isSelected;\n }\n return childItem;\n }),\n }\n : item;\n });\n updateSideNavItemsList(updatedSideNavItems);\n },\n [sideNavItemsList],\n );\n\n const processedSideNavItems = useMemo(() => {\n return sideNavItemsList?.map((item) => ({\n ...item,\n childNavItems: item.nestedNavItems?.map((childProps) => {\n return {\n id: childProps.id,\n isSelected: childProps.isSelected,\n isDisabled: childProps.isDisabled,\n isSortable: childProps.isSortable,\n navItem: (\n <SideNavItemContentContext.Provider\n value={{\n ...sideNavItemContentProviderValue,\n depth: 2,\n isSortable: item.isSortable,\n }}\n key={childProps.id}\n >\n <SideNavItemContent\n {...childProps}\n scrollRef={getRefIfThisIsFirstNodeWithIsSelected(childProps.id)}\n onItemSelected={setSelectedItem}\n translate={childProps.translate}\n />\n </SideNavItemContentContext.Provider>\n ),\n };\n }),\n }));\n }, [\n getRefIfThisIsFirstNodeWithIsSelected,\n sideNavItemsList,\n sideNavItemContentProviderValue,\n setSelectedItem,\n ]);\n\n const sideNavExpandClickHandler = useCallback(() => {\n if (isSideNavCollapsed) {\n onExpand?.();\n } else {\n onCollapse?.();\n }\n\n setSideNavCollapsed(!isSideNavCollapsed);\n }, [isSideNavCollapsed, setSideNavCollapsed, onExpand, onCollapse]);\n\n const sideNavExpandKeyHandler = useCallback<\n KeyboardEventHandler<HTMLButtonElement>\n >(\n (event) => {\n if (event?.key === \"Enter\" || event?.code === \"Space\") {\n event.preventDefault();\n sideNavExpandClickHandler();\n }\n },\n [sideNavExpandClickHandler],\n );\n\n const setSortedItems = useCallback(\n (\n parentId: string,\n activeId: UniqueIdentifier,\n activeIndex: number,\n overIndex: number,\n ) => {\n const sortedSideNavItems = sideNavItemsList.map((item) =>\n item.id === parentId && item.nestedNavItems\n ? {\n ...item,\n nestedNavItems: arrayMove(\n item.nestedNavItems,\n activeIndex,\n overIndex,\n ),\n }\n : item,\n );\n updateSideNavItemsList(sortedSideNavItems);\n onSort?.(sortedSideNavItems, parentId, activeId, activeIndex, overIndex);\n },\n [onSort, sideNavItemsList],\n );\n\n return (\n <StyledSideNav\n aria-label={t(\"navigation.label\")}\n backgroundColor={uiShellContext?.sideNavBackgroundColor}\n id=\"side-nav-expandable\"\n isAppContentWhiteBackground={\n uiShellContext?.appBackgroundColor ===\n odysseyDesignTokens.HueNeutralWhite\n }\n isSideNavCollapsed={isSideNavCollapsed}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n {isCollapsible && (\n <SideNavToggleButton\n ariaControls=\"side-nav-expandable\"\n isSideNavCollapsed={isSideNavCollapsed}\n onClick={sideNavExpandClickHandler}\n onKeyDown={sideNavExpandKeyHandler}\n />\n )}\n <OdysseyThemeProvider>\n <StyledCollapsibleContent\n data-se=\"collapsible-region\"\n isSideNavCollapsed={isSideNavCollapsed}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n <StyledOpacityTransitionContainer\n isSideNavCollapsed={isSideNavCollapsed}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n <SideNavHeaderContainer\n hasContentScrolled={hasContentScrolled}\n odysseyDesignTokens={odysseyDesignTokens}\n borderColor={uiShellContext?.sideNavContrastColors?.fontColor}\n >\n <SideNavHeader\n appName={appName}\n isLoading={isLoading}\n logoProps={logoProps}\n />\n </SideNavHeaderContainer>\n <SideNavScrollableContainer\n odysseyDesignTokens={odysseyDesignTokens}\n data-se=\"scrollable-region\"\n >\n <SideNavListContainer role=\"none\" ref={scrollableContentRef}>\n {isLoading\n ? Array(6)\n .fill(null)\n .map((_, index) => <LoadingItem key={index} />)\n : processedSideNavItems?.map((item) => {\n const {\n id,\n label,\n isSectionHeader,\n startIcon,\n childNavItems,\n isSortable,\n isDefaultExpanded,\n isDisabled,\n isExpanded,\n } = item;\n\n if (isSectionHeader) {\n return (\n <ErrorBoundary fallback={blankElement}>\n <SectionHeaderContainer\n contrastFontColor={\n uiShellContext?.sideNavContrastColors?.fontColor\n }\n id={id}\n key={id}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n <Overline component=\"h3\">{label}</Overline>\n </SectionHeaderContainer>\n </ErrorBoundary>\n );\n } else if (childNavItems) {\n return (\n <ErrorBoundary fallback={blankElement}>\n <StyledSideNavListItem\n id={id}\n key={id}\n odysseyDesignTokens={odysseyDesignTokens}\n disabled={isDisabled}\n aria-disabled={isDisabled}\n >\n <NavAccordion\n label={label}\n isCompact={isCompact}\n isDefaultExpanded={isDefaultExpanded}\n isExpanded={isExpanded}\n startIcon={startIcon}\n isDisabled={isDisabled}\n >\n <SideNavListContainer role=\"none\">\n {isSortable ? (\n <SortableList\n parentId={item.id}\n items={childNavItems}\n onChange={setSortedItems}\n renderItem={(sortableItem) => (\n <SortableList.Item\n id={sortableItem.id}\n isDisabled={sortableItem.isDisabled}\n isSelected={sortableItem.isSelected}\n isSortable={sortableItem.isSortable}\n >\n {sortableItem.navItem}\n </SortableList.Item>\n )}\n />\n ) : (\n childNavItems.map((item) => item.navItem)\n )}\n </SideNavListContainer>\n </NavAccordion>\n </StyledSideNavListItem>\n </ErrorBoundary>\n );\n } else {\n return (\n <ErrorBoundary fallback={blankElement}>\n <SideNavItemContentContext.Provider\n key={item.id}\n value={sideNavItemContentProviderValue}\n >\n <SideNavItemContent\n {...item}\n key={item.id}\n onItemSelected={setSelectedItem}\n scrollRef={getRefIfThisIsFirstNodeWithIsSelected(\n item.id,\n )}\n startIcon={item.startIcon}\n />\n </SideNavItemContentContext.Provider>\n </ErrorBoundary>\n );\n }\n })}\n </SideNavListContainer>\n {!isLoading && footerItems && !hasCustomFooter && (\n <SideNavFooter\n odysseyDesignTokens={odysseyDesignTokens}\n sideNavBackgroundColor={\n uiShellContext?.sideNavBackgroundColor\n }\n >\n <SideNavFooterItemsContainer\n odysseyDesignTokens={odysseyDesignTokens}\n sideNavContrastColors={\n uiShellContext?.sideNavContrastColors\n }\n >\n <SideNavFooterContent footerItems={footerItems} />\n </SideNavFooterItemsContainer>\n </SideNavFooter>\n )}\n </SideNavScrollableContainer>\n {!isLoading && !footerItems && hasCustomFooter && (\n <PersistentSideNavFooter\n isContentScrollable={isContentScrollable}\n odysseyDesignTokens={odysseyDesignTokens}\n sideNavBackgroundColor={uiShellContext?.sideNavBackgroundColor}\n >\n {footerComponent}\n </PersistentSideNavFooter>\n )}\n </StyledOpacityTransitionContainer>\n </StyledCollapsibleContent>\n </OdysseyThemeProvider>\n </StyledSideNav>\n );\n};\n\nconst MemoizedSideNav = memo(SideNav);\nMemoizedSideNav.displayName = \"SideNav\";\n\nexport { MemoizedSideNav as SideNav };\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"SideNav.js","names":["styled","memo","useMemo","useState","useCallback","useRef","useEffect","createElement","_createElement","useTranslation","arrayMove","ErrorBoundary","NavAccordion","useOdysseyDesignTokens","OdysseyThemeProvider","SideNavHeader","SideNavItemContent","StyledSideNavListItem","SideNavFooterContent","SideNavItemContentContext","SideNavToggleButton","SortableList","Overline","useUiShellContext","SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION","SIDE_NAV_WIDTH","UI_SHELL_BASE_Z_INDEX","UI_SHELL_OVERLAY_Z_INDEX","jsx","_jsx","jsxs","_jsxs","StyledCollapsibleContent","shouldForwardProp","prop","odysseyDesignTokens","isSideNavCollapsed","position","display","gridTemplateColumns","height","transition","TransitionDurationMain","transitionTimingFunction","TransitionTimingMain","overflow","opacity","StyledOpacityTransitionContainer","gridTemplateRows","StyledSideNavContainer","backgroundColor","isAppContentWhiteBackground","HueNeutralWhite","width","borderRightWidth","BorderWidthMain","borderRightStyle","BorderStyleMain","borderRightColor","HueNeutral100","HueNeutral200","content","right","top","transform","Spacing2","zIndex","Spacing3","StyledSideNavHeaderContainer","borderColor","hasContentScrolled","flexShrink","borderBottomWidth","borderBottomStyle","borderBottomColor","concat","StyledSideNavListContainer","padding","listStyle","listStyleType","margin","StyledSideNavScrollableContainer","overflowY","paddingInline","StyledSectionHeaderContainer","contrastFontColor","paddingBlock","Spacing1","Spacing4","marginBlock","color","HueNeutral600","StyledSideNavFooter","sideNavBackgroundColor","StyledPersistentSideNavFooter","isContentScrollable","transitionProperty","transitionDuration","transitionTiming","boxShadow","StyledSideNavFooterItemsContainer","sideNavContrastColors","flexWrap","alignItems","fontSize","TypographySizeOverline","fontColor","textDecoration","HueNeutral900","StyledLoadingItemContainer","gap","getHasScrollableContent","scrollableContainer","scrollHeight","clientHeight","LoadingItem","children","_Skeleton","variant","SideNav","appName","footerComponent","footerItems","hasCustomFooter","isCollapsible","isCollapsed","isCompact","isLoading","isObtrusive","logoProps","onCollapse","onExpand","onSort","sideNavItems","setIsSideNavCollapsed","setHasContentScrolled","setIsContentScrollable","sideNavItemsList","updateSideNavItemsList","uiShellContext","t","scrollableContentRef","resizeObserverRef","intersectionObserverRef","blankElement","updateIsContentScrollable","current","parentElement","resizeObserverDebounceTimer","ResizeObserver","cancelAnimationFrame","requestAnimationFrame","observe","IntersectionObserver","entries","isIntersecting","slice","sort","a","b","time","at","root","threshold","ulElement","liElement","Array","from","disconnect","scrollIntoViewRef","firstSideNavItemIdWithIsSelected","flattenedItems","flatMap","sideNavItem","nestedNavItems","firstItemWithIsSelected","find","isSelected","id","scrollIntoView","getRefIfThisIsFirstNodeWithIsSelected","itemId","undefined","sideNavItemContentProviderValue","depth","setSelectedItem","selectedItemId","updatedSideNavItems","map","item","childItem","publishSideNavItemClicked","processedSideNavItems","childNavItems","childProps","isDisabled","isSortable","navItem","Provider","value","scrollRef","onItemSelected","translate","sideNavExpandClickHandler","sideNavExpandKeyHandler","event","key","code","preventDefault","unsubscribe","subscribeSideNavItemClicked","setSortedItems","parentId","activeId","activeIndex","overIndex","sortedSideNavItems","appBackgroundColor","ariaControls","onClick","onKeyDown","role","ref","fill","_","index","label","isSectionHeader","startIcon","isDefaultExpanded","isExpanded","fallback","component","disabled","items","onChange","renderItem","sortableItem","Item","MemoizedSideNav","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNav.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 {\n memo,\n useMemo,\n useState,\n useCallback,\n useRef,\n useEffect,\n KeyboardEventHandler,\n CSSProperties,\n} from \"react\";\nimport { Skeleton } from \"@mui/material\";\nimport { useTranslation } from \"react-i18next\";\nimport { arrayMove } from \"@dnd-kit/sortable\";\nimport { UniqueIdentifier } from \"@dnd-kit/core\";\nimport { ErrorBoundary } from \"react-error-boundary\";\nimport { Property } from \"csstype\";\n\nimport { ContrastColors } from \"../../createContrastColors.js\";\nimport { NavAccordion } from \"./NavAccordion.js\";\nimport {\n DesignTokens,\n useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { OdysseyThemeProvider } from \"../../OdysseyThemeProvider.js\";\nimport type { SideNavProps } from \"./types.js\";\nimport { SideNavHeader } from \"./SideNavHeader.js\";\nimport {\n SideNavItemContent,\n StyledSideNavListItem,\n} from \"./SideNavItemContent.js\";\nimport { SideNavFooterContent } from \"./SideNavFooterContent.js\";\nimport { SideNavItemContentContext } from \"./SideNavItemContentContext.js\";\nimport { SideNavToggleButton } from \"./SideNavToggleButton.js\";\nimport { SortableList } from \"./SortableList/SortableList.js\";\nimport { Overline } from \"../../Typography.js\";\nimport {\n UiShellColors,\n useUiShellContext,\n} from \"../../ui-shell/UiShellProvider.js\";\nimport {\n SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION,\n SIDE_NAV_WIDTH,\n UI_SHELL_BASE_Z_INDEX,\n UI_SHELL_OVERLAY_Z_INDEX,\n} from \"../uiShellSharedConstants.js\";\n\nconst StyledCollapsibleContent = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" && prop !== \"isSideNavCollapsed\",\n})<{\n odysseyDesignTokens: DesignTokens;\n isSideNavCollapsed: boolean;\n}>(({ odysseyDesignTokens, isSideNavCollapsed }) => ({\n position: \"relative\",\n display: \"grid\",\n gridTemplateColumns: SIDE_NAV_WIDTH,\n height: \"100%\",\n transition: `grid-template-columns ${odysseyDesignTokens.TransitionDurationMain}, opacity 300ms`,\n transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,\n overflow: \"hidden\",\n\n ...(isSideNavCollapsed &&\n ({\n gridTemplateColumns: 0,\n opacity: 0,\n } as CSSProperties)),\n}));\n\nconst StyledOpacityTransitionContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" && prop !== \"isSideNavCollapsed\",\n})(\n ({\n odysseyDesignTokens,\n isSideNavCollapsed,\n }: {\n odysseyDesignTokens: DesignTokens;\n isSideNavCollapsed: boolean;\n }) => ({\n display: \"grid\",\n gridTemplateRows: \"max-content 1fr max-content\",\n height: \"100%\",\n transition: `opacity 50ms`,\n transitionTimingFunction: odysseyDesignTokens.TransitionTimingMain,\n overflow: \"hidden\",\n\n ...(isSideNavCollapsed &&\n ({\n opacity: 0,\n } as CSSProperties)),\n }),\n);\n\nconst StyledSideNavContainer = styled(\"nav\", {\n shouldForwardProp: (prop) =>\n prop !== \"backgroundColor\" &&\n prop !== \"odysseyDesignTokens\" &&\n prop !== \"isAppContentWhiteBackground\" &&\n prop !== \"isSideNavCollapsed\",\n})<{\n isAppContentWhiteBackground: boolean;\n backgroundColor?: UiShellColors[\"sideNavBackgroundColor\"];\n isSideNavCollapsed: boolean;\n odysseyDesignTokens: DesignTokens;\n}>(\n ({\n backgroundColor,\n isAppContentWhiteBackground,\n isSideNavCollapsed,\n odysseyDesignTokens,\n }) => ({\n backgroundColor: backgroundColor || odysseyDesignTokens.HueNeutralWhite,\n height: \"100%\",\n position: \"relative\",\n width: \"fit-content\",\n\n ...(isAppContentWhiteBackground &&\n ({\n borderRightWidth: odysseyDesignTokens.BorderWidthMain,\n borderRightStyle:\n odysseyDesignTokens.BorderStyleMain as Property.BorderRightStyle,\n borderRightColor: odysseyDesignTokens.HueNeutral100,\n } as CSSProperties)),\n\n \"&::after\": {\n backgroundColor: odysseyDesignTokens.HueNeutral200,\n content: \"''\",\n height: \"100%\",\n opacity: 0,\n position: \"absolute\",\n right: 0,\n top: 0,\n transform: `translateX(0)`,\n transition: `opacity ${odysseyDesignTokens.TransitionDurationMain}, transform ${odysseyDesignTokens.TransitionDurationMain}`,\n width: odysseyDesignTokens.Spacing2,\n zIndex: UI_SHELL_OVERLAY_Z_INDEX,\n },\n\n \"&:has([data-sidenav-toggle='true']:hover), &:has([data-sidenav-toggle='true']:focus-visible)\":\n {\n ...(isSideNavCollapsed &&\n ({\n \"&::after\": {\n opacity: 1,\n transform: `translateX(100%)`,\n } as CSSProperties,\n\n \"[data-sidenav-toggle='true']\": {\n transform: `translate3d(calc(100% + ${odysseyDesignTokens.Spacing3}), 0, 0)`,\n } as CSSProperties,\n } as CSSProperties)),\n },\n\n \"[data-sidenav-toggle='true']\": {\n position: \"absolute\",\n top: SIDE_NAV_VISIBILITY_TOGGLE_ICON_POSITION,\n right: 0,\n transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,\n transform: `translate3d(100%, 0, 0)`,\n },\n }),\n);\n\nconst StyledSideNavHeaderContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"borderColor\" &&\n prop !== \"hasContentScrolled\" &&\n prop !== \"odysseyDesignTokens\",\n})<{\n borderColor: ContrastColors[\"fontColor\"];\n hasContentScrolled: boolean;\n odysseyDesignTokens: DesignTokens;\n}>(({ borderColor, hasContentScrolled, odysseyDesignTokens }) => ({\n flexShrink: 0,\n // The bottom border should appear only if the scrollable region has been scrolled\n ...(hasContentScrolled &&\n ({\n borderBottomWidth: odysseyDesignTokens.BorderWidthMain,\n borderBottomStyle: odysseyDesignTokens.BorderStyleMain,\n borderBottomColor: odysseyDesignTokens.HueNeutral100,\n\n ...(borderColor &&\n ({\n borderBottomColor: borderColor.concat(\"15\"),\n } as CSSProperties)),\n } as CSSProperties)),\n}));\n\nconst StyledSideNavListContainer = styled(\"ul\")(() => ({\n padding: 0,\n listStyle: \"none\",\n listStyleType: \"none\",\n margin: 0,\n}));\n\nconst StyledSideNavScrollableContainer = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n display: \"inline-grid\",\n gridTemplateRows: \"1fr max-content\",\n overflowY: \"auto\",\n paddingInline: odysseyDesignTokens.Spacing2,\n}));\n\nconst StyledSectionHeaderContainer = styled(\"li\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" && prop !== \"contrastFontColor\",\n})(\n ({\n contrastFontColor,\n odysseyDesignTokens,\n }: {\n contrastFontColor: ContrastColors[\"fontColor\"];\n odysseyDesignTokens: DesignTokens;\n }) => ({\n paddingBlock: odysseyDesignTokens.Spacing1,\n paddingInline: odysseyDesignTokens.Spacing4,\n marginBlock: `${odysseyDesignTokens.Spacing3}`,\n color: contrastFontColor || odysseyDesignTokens.HueNeutral600,\n }),\n);\n\nconst StyledSideNavFooter = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" && prop !== \"sideNavBackgroundColor\",\n})(\n ({\n odysseyDesignTokens,\n sideNavBackgroundColor,\n }: {\n odysseyDesignTokens: DesignTokens;\n sideNavBackgroundColor?: UiShellColors[\"sideNavBackgroundColor\"];\n }) => ({\n flexShrink: 0,\n padding: odysseyDesignTokens.Spacing4,\n backgroundColor: odysseyDesignTokens.HueNeutralWhite,\n\n ...(sideNavBackgroundColor &&\n ({\n backgroundColor: sideNavBackgroundColor,\n } as CSSProperties)),\n }),\n);\n\nconst StyledPersistentSideNavFooter = styled(StyledSideNavFooter, {\n shouldForwardProp: (prop) =>\n prop !== \"isContentScrollable\" &&\n prop !== \"odysseyDesignTokens\" &&\n prop !== \"sideNavBackgroundColor\",\n})(\n ({\n isContentScrollable,\n odysseyDesignTokens,\n sideNavBackgroundColor,\n }: {\n isContentScrollable: boolean;\n odysseyDesignTokens: DesignTokens;\n sideNavBackgroundColor?: UiShellColors[\"sideNavBackgroundColor\"];\n }) => ({\n transitionProperty: \"box-shadow\",\n transitionDuration: odysseyDesignTokens.TransitionDurationMain,\n transitionTiming: odysseyDesignTokens.TransitionTimingMain,\n zIndex: UI_SHELL_BASE_Z_INDEX,\n\n // The box shadow should appear above the footer only if the scrollable region has overflow\n ...(isContentScrollable &&\n ({\n boxShadow: \"0px -8px 8px -8px rgba(39, 39, 39, 0.08)\",\n } as CSSProperties)),\n\n ...(sideNavBackgroundColor &&\n ({\n backgroundColor: sideNavBackgroundColor,\n } as CSSProperties)),\n }),\n);\n\nconst StyledSideNavFooterItemsContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" && prop !== \"sideNavContrastColors\",\n})<{\n odysseyDesignTokens: DesignTokens;\n sideNavContrastColors: UiShellColors[\"sideNavContrastColors\"];\n}>(({ odysseyDesignTokens, sideNavContrastColors }) => ({\n display: \"flex\",\n flexWrap: \"wrap\",\n alignItems: \"center\",\n fontSize: odysseyDesignTokens.TypographySizeOverline,\n\n \"a, span\": {\n color: odysseyDesignTokens.HueNeutral600,\n transition: `color ${odysseyDesignTokens.TransitionDurationMain}`,\n\n \"&:visited\": {\n color: odysseyDesignTokens.HueNeutral600,\n\n ...(sideNavContrastColors?.fontColor &&\n ({\n color: sideNavContrastColors?.fontColor,\n } as CSSProperties)),\n },\n\n \"&:hover\": {\n textDecoration: \"none\",\n color: odysseyDesignTokens.HueNeutral900,\n\n ...(sideNavContrastColors?.fontColor &&\n ({\n color: sideNavContrastColors?.fontColor,\n } as CSSProperties)),\n },\n\n ...(sideNavContrastColors?.fontColor &&\n ({\n color: sideNavContrastColors?.fontColor,\n } as CSSProperties)),\n },\n}));\n\nconst StyledLoadingItemContainer = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{ odysseyDesignTokens: DesignTokens }>(({ odysseyDesignTokens }) => ({\n alignItems: \"center\",\n display: \"flex\",\n gap: odysseyDesignTokens.Spacing2,\n paddingBlock: odysseyDesignTokens.Spacing2,\n paddingInline: odysseyDesignTokens.Spacing4,\n}));\n\nconst getHasScrollableContent = (scrollableContainer: HTMLElement) =>\n scrollableContainer.scrollHeight > scrollableContainer.clientHeight;\n\nconst LoadingItem = () => {\n const odysseyDesignTokens: DesignTokens = useOdysseyDesignTokens();\n return (\n <StyledLoadingItemContainer odysseyDesignTokens={odysseyDesignTokens}>\n <Skeleton\n variant=\"circular\"\n width={odysseyDesignTokens.Spacing4}\n height={odysseyDesignTokens.Spacing4}\n />\n <Skeleton variant=\"rounded\" width=\"100%\" />\n </StyledLoadingItemContainer>\n );\n};\n\nconst SideNav = ({\n appName,\n footerComponent,\n footerItems,\n hasCustomFooter,\n isCollapsible,\n isCollapsed = false,\n isCompact,\n isLoading,\n isObtrusive,\n logoProps,\n onCollapse,\n onExpand,\n onSort,\n sideNavItems,\n}: SideNavProps) => {\n const [isSideNavCollapsed, setIsSideNavCollapsed] = useState(isCollapsed);\n const [hasContentScrolled, setHasContentScrolled] = useState(false);\n const [isContentScrollable, setIsContentScrollable] = useState(false);\n const [sideNavItemsList, updateSideNavItemsList] = useState(sideNavItems);\n\n const uiShellContext = useUiShellContext();\n const odysseyDesignTokens: DesignTokens = useOdysseyDesignTokens();\n const { t } = useTranslation();\n\n const scrollableContentRef = useRef<HTMLUListElement>(null);\n const resizeObserverRef = useRef<ResizeObserver | null>(null);\n const intersectionObserverRef = useRef<IntersectionObserver | null>(null);\n\n const blankElement = useMemo(() => <div />, []);\n\n // The default value (sideNavItems) passed to useState is ONLY used by the useState hook for\n // the very first value. Subsequent updates to the prop (sideNavItems) need to cause the state\n // to update!\n useEffect(() => updateSideNavItemsList(sideNavItems), [sideNavItems]);\n\n // update sidenav collapse status\n useEffect(() => setIsSideNavCollapsed(isCollapsed), [isCollapsed]);\n\n useEffect(() => {\n // This is called directly in this effect AND perhaps as a result of the ResizeObserver\n const updateIsContentScrollable = () => {\n if (\n scrollableContentRef.current &&\n scrollableContentRef.current.parentElement\n ) {\n setIsContentScrollable(\n getHasScrollableContent(scrollableContentRef.current.parentElement),\n );\n }\n };\n\n // If the window is resized, we may need to re-determine if the scrollable container has overflow\n // Setup a ResizeObserver to know if the size of the scrollableContent changes\n let resizeObserverDebounceTimer: ReturnType<typeof requestAnimationFrame>;\n if (!resizeObserverRef.current) {\n resizeObserverRef.current = new ResizeObserver(() => {\n cancelAnimationFrame(resizeObserverDebounceTimer);\n resizeObserverDebounceTimer = requestAnimationFrame(\n updateIsContentScrollable,\n );\n });\n }\n\n if (resizeObserverRef.current && scrollableContentRef.current) {\n // Observe the <ul> itself (in case it changes size due to the content expanding)\n resizeObserverRef.current.observe(scrollableContentRef.current);\n if (scrollableContentRef.current.parentElement) {\n // ALSO observe the parent (<SideNavScrollableContainer>) in case the window resizes\n resizeObserverRef.current.observe(\n scrollableContentRef.current.parentElement,\n );\n }\n }\n\n // Determine if the scrollable container has overflow or not on load\n updateIsContentScrollable();\n\n // Finally, we only want to have the border on the bottom of the header iff the user has scrolled\n // the scrollable container\n if (!intersectionObserverRef.current && scrollableContentRef.current) {\n intersectionObserverRef.current = new IntersectionObserver(\n (entries) => {\n // If isIntersecting is true, then we're at the top of the scroll container\n // If isIntersecting is false, some scrolling has occurred.\n // The entries must be sorted by time and we only really need to look at the latest one\n const isIntersecting = entries\n .slice()\n .sort((a, b) => a.time - b.time)\n .at(0)?.isIntersecting;\n setHasContentScrolled(!isIntersecting);\n },\n {\n root: scrollableContentRef.current.parentElement,\n threshold: 1.0,\n },\n );\n }\n\n if (intersectionObserverRef.current && scrollableContentRef.current) {\n const ulElement = scrollableContentRef.current;\n const [liElement] = Array.from(ulElement?.children || []);\n\n if (liElement) {\n intersectionObserverRef.current.observe(liElement);\n }\n }\n\n // Cleanup when unmounted:\n return () => {\n if (resizeObserverRef.current) {\n resizeObserverRef.current.disconnect();\n resizeObserverRef.current = null;\n }\n if (intersectionObserverRef.current) {\n intersectionObserverRef.current.disconnect();\n intersectionObserverRef.current = null;\n }\n cancelAnimationFrame(resizeObserverDebounceTimer); // Ensure timer is cleared on component unmount\n };\n }, [sideNavItemsList]);\n\n const scrollIntoViewRef = useRef<HTMLLIElement>(null);\n /**\n * Look through the sideNavItems and determine which is the first node\n * with isSelected. This should be the node we set a ref on in order to\n * call scrollIntoView in the effect\n */\n const firstSideNavItemIdWithIsSelected = useMemo(() => {\n const flattenedItems = sideNavItemsList.flatMap((sideNavItem) =>\n sideNavItem.nestedNavItems\n ? [sideNavItem, ...sideNavItem.nestedNavItems]\n : sideNavItem,\n );\n const firstItemWithIsSelected = flattenedItems.find(\n (sideNavItem) => sideNavItem.isSelected,\n );\n return firstItemWithIsSelected?.id;\n }, [sideNavItemsList]);\n /**\n * Once we've rendered and if we have an item to scroll to, do the scroll action.\n * This must rely on checking firstSideNavItemIdWithIsSelected or it will not run\n * once the actual ref is populated.\n */\n useEffect(() => {\n if (firstSideNavItemIdWithIsSelected && scrollIntoViewRef.current) {\n scrollIntoViewRef.current.scrollIntoView();\n }\n }, [firstSideNavItemIdWithIsSelected]);\n\n /**\n * We only want to put a ref on a node iff it is the first selected node.\n * This function returns the ref only if the ID provided matches the first\n * selected node, otherwise returns undefined (so that the node has no ref)\n */\n const getRefIfThisIsFirstNodeWithIsSelected = useCallback(\n (itemId: string) =>\n itemId === firstSideNavItemIdWithIsSelected\n ? scrollIntoViewRef\n : undefined,\n [firstSideNavItemIdWithIsSelected],\n );\n\n const sideNavItemContentProviderValue = useMemo(\n () => ({ isCompact, depth: 1 }),\n [isCompact],\n );\n\n const setSelectedItem = useCallback(\n (selectedItemId: string) => {\n const updatedSideNavItems = sideNavItemsList.map((item) => {\n if (item.id === selectedItemId) {\n item.isSelected = true;\n } else if (item.isSelected) {\n delete item.isSelected;\n }\n\n return item.nestedNavItems\n ? {\n ...item,\n nestedNavItems: item.nestedNavItems.map((childItem) => {\n if (childItem.id === selectedItemId) {\n childItem.isSelected = true;\n } else if (childItem.isSelected) {\n delete childItem.isSelected;\n }\n return childItem;\n }),\n }\n : item;\n });\n updateSideNavItemsList(updatedSideNavItems);\n\n if (isCollapsed || isObtrusive) {\n uiShellContext?.publishSideNavItemClicked();\n }\n },\n [isCollapsed, isObtrusive, sideNavItemsList, uiShellContext],\n );\n\n const processedSideNavItems = useMemo(() => {\n return sideNavItemsList?.map((item) => ({\n ...item,\n childNavItems: item.nestedNavItems?.map((childProps) => {\n return {\n id: childProps.id,\n isSelected: childProps.isSelected,\n isDisabled: childProps.isDisabled,\n isSortable: childProps.isSortable,\n navItem: (\n <SideNavItemContentContext.Provider\n value={{\n ...sideNavItemContentProviderValue,\n depth: 2,\n isSortable: item.isSortable,\n }}\n key={childProps.id}\n >\n <SideNavItemContent\n {...childProps}\n scrollRef={getRefIfThisIsFirstNodeWithIsSelected(childProps.id)}\n onItemSelected={setSelectedItem}\n translate={childProps.translate}\n />\n </SideNavItemContentContext.Provider>\n ),\n };\n }),\n }));\n }, [\n getRefIfThisIsFirstNodeWithIsSelected,\n sideNavItemsList,\n sideNavItemContentProviderValue,\n setSelectedItem,\n ]);\n\n const sideNavExpandClickHandler = useCallback(() => {\n setIsSideNavCollapsed((isSideNavCollapsed) => {\n if (isSideNavCollapsed) {\n onExpand?.();\n } else {\n onCollapse?.();\n }\n\n return !isSideNavCollapsed;\n });\n }, [onExpand, onCollapse]);\n\n const sideNavExpandKeyHandler = useCallback<\n KeyboardEventHandler<HTMLButtonElement>\n >(\n (event) => {\n if (event?.key === \"Enter\" || event?.code === \"Space\") {\n event.preventDefault();\n sideNavExpandClickHandler();\n }\n },\n [sideNavExpandClickHandler],\n );\n\n useEffect(() => {\n if (isCollapsed) {\n const unsubscribe = uiShellContext?.subscribeSideNavItemClicked(() => {\n onCollapse?.();\n setIsSideNavCollapsed(true);\n });\n\n return () => {\n unsubscribe?.();\n };\n }\n\n return () => {};\n }, [isCollapsed, onCollapse, uiShellContext]);\n\n const setSortedItems = useCallback(\n (\n parentId: string,\n activeId: UniqueIdentifier,\n activeIndex: number,\n overIndex: number,\n ) => {\n const sortedSideNavItems = sideNavItemsList.map((item) =>\n item.id === parentId && item.nestedNavItems\n ? {\n ...item,\n nestedNavItems: arrayMove(\n item.nestedNavItems,\n activeIndex,\n overIndex,\n ),\n }\n : item,\n );\n updateSideNavItemsList(sortedSideNavItems);\n onSort?.(sortedSideNavItems, parentId, activeId, activeIndex, overIndex);\n },\n [onSort, sideNavItemsList],\n );\n\n return (\n <StyledSideNavContainer\n aria-label={t(\"navigation.label\")}\n backgroundColor={uiShellContext?.sideNavBackgroundColor}\n id=\"side-nav-expandable\"\n isAppContentWhiteBackground={\n uiShellContext?.appBackgroundColor ===\n odysseyDesignTokens.HueNeutralWhite\n }\n isSideNavCollapsed={isSideNavCollapsed}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n {isCollapsible && (\n <SideNavToggleButton\n ariaControls=\"side-nav-expandable\"\n isSideNavCollapsed={isSideNavCollapsed}\n onClick={sideNavExpandClickHandler}\n onKeyDown={sideNavExpandKeyHandler}\n />\n )}\n\n <OdysseyThemeProvider>\n <StyledCollapsibleContent\n data-se=\"collapsible-region\"\n isSideNavCollapsed={isSideNavCollapsed}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n <StyledOpacityTransitionContainer\n isSideNavCollapsed={isSideNavCollapsed}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n {appName || isLoading || logoProps ? (\n <StyledSideNavHeaderContainer\n hasContentScrolled={hasContentScrolled}\n odysseyDesignTokens={odysseyDesignTokens}\n borderColor={uiShellContext?.sideNavContrastColors?.fontColor}\n >\n {isLoading && !appName && !logoProps ? (\n <SideNavHeader isLoading={isLoading} />\n ) : (\n <SideNavHeader\n appName={appName}\n isLoading={isLoading}\n logoProps={logoProps}\n />\n )}\n </StyledSideNavHeaderContainer>\n ) : (\n <div />\n )}\n\n <StyledSideNavScrollableContainer\n odysseyDesignTokens={odysseyDesignTokens}\n data-se=\"scrollable-region\"\n >\n <StyledSideNavListContainer\n role=\"none\"\n ref={scrollableContentRef}\n >\n {isLoading\n ? Array(6)\n .fill(null)\n .map((_, index) => <LoadingItem key={index} />)\n : processedSideNavItems?.map((item) => {\n const {\n id,\n label,\n isSectionHeader,\n startIcon,\n childNavItems,\n isSortable,\n isDefaultExpanded,\n isDisabled,\n isExpanded,\n } = item;\n\n if (isSectionHeader) {\n return (\n <ErrorBoundary fallback={blankElement}>\n <StyledSectionHeaderContainer\n contrastFontColor={\n uiShellContext?.sideNavContrastColors?.fontColor\n }\n id={id}\n key={id}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n <Overline component=\"h3\">{label}</Overline>\n </StyledSectionHeaderContainer>\n </ErrorBoundary>\n );\n } else if (childNavItems) {\n return (\n <ErrorBoundary fallback={blankElement}>\n <StyledSideNavListItem\n id={id}\n key={id}\n odysseyDesignTokens={odysseyDesignTokens}\n disabled={isDisabled}\n aria-disabled={isDisabled}\n >\n <NavAccordion\n label={label}\n isCompact={isCompact}\n isDefaultExpanded={isDefaultExpanded}\n isExpanded={isExpanded}\n startIcon={startIcon}\n isDisabled={isDisabled}\n >\n <StyledSideNavListContainer role=\"none\">\n {isSortable ? (\n <SortableList\n parentId={item.id}\n items={childNavItems}\n onChange={setSortedItems}\n renderItem={(sortableItem) => (\n <SortableList.Item\n id={sortableItem.id}\n isDisabled={sortableItem.isDisabled}\n isSelected={sortableItem.isSelected}\n isSortable={sortableItem.isSortable}\n >\n {sortableItem.navItem}\n </SortableList.Item>\n )}\n />\n ) : (\n childNavItems.map((item) => item.navItem)\n )}\n </StyledSideNavListContainer>\n </NavAccordion>\n </StyledSideNavListItem>\n </ErrorBoundary>\n );\n } else {\n return (\n <ErrorBoundary fallback={blankElement}>\n <SideNavItemContentContext.Provider\n key={item.id}\n value={sideNavItemContentProviderValue}\n >\n <SideNavItemContent\n {...item}\n key={item.id}\n onItemSelected={setSelectedItem}\n scrollRef={getRefIfThisIsFirstNodeWithIsSelected(\n item.id,\n )}\n startIcon={item.startIcon}\n />\n </SideNavItemContentContext.Provider>\n </ErrorBoundary>\n );\n }\n })}\n </StyledSideNavListContainer>\n {!isLoading && footerItems && !hasCustomFooter && (\n <StyledSideNavFooter\n odysseyDesignTokens={odysseyDesignTokens}\n sideNavBackgroundColor={\n uiShellContext?.sideNavBackgroundColor\n }\n >\n <StyledSideNavFooterItemsContainer\n odysseyDesignTokens={odysseyDesignTokens}\n sideNavContrastColors={\n uiShellContext?.sideNavContrastColors\n }\n >\n <SideNavFooterContent footerItems={footerItems} />\n </StyledSideNavFooterItemsContainer>\n </StyledSideNavFooter>\n )}\n </StyledSideNavScrollableContainer>\n {!isLoading && !footerItems && hasCustomFooter && (\n <StyledPersistentSideNavFooter\n isContentScrollable={isContentScrollable}\n odysseyDesignTokens={odysseyDesignTokens}\n sideNavBackgroundColor={uiShellContext?.sideNavBackgroundColor}\n >\n {footerComponent}\n </StyledPersistentSideNavFooter>\n )}\n </StyledOpacityTransitionContainer>\n </StyledCollapsibleContent>\n </OdysseyThemeProvider>\n </StyledSideNavContainer>\n );\n};\n\nconst MemoizedSideNav = memo(SideNav);\nMemoizedSideNav.displayName = \"SideNav\";\n\nexport { MemoizedSideNav as SideNav };\n"],"mappings":"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","ignoreList":[]}
@@ -16,18 +16,19 @@ import { memo } from "react";
16
16
  import { useOdysseyDesignTokens } from "../../OdysseyDesignTokensContext.js";
17
17
  import { SideNavLogo } from "./SideNavLogo.js";
18
18
  import { Heading5 } from "../../Typography.js";
19
- import { TOP_NAV_HEIGHT } from "../TopNav/index.js";
20
19
  import { useUiShellContext } from "../../ui-shell/UiShellProvider.js";
20
+ import { TOP_NAV_HEIGHT, UI_SHELL_BASE_Z_INDEX } from "../uiShellSharedConstants.js";
21
21
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
22
22
  const SideNavHeaderContainer = styled("div")({
23
23
  position: "relative",
24
24
  display: "flex",
25
25
  flexDirection: "column",
26
- zIndex: 1
26
+ zIndex: UI_SHELL_BASE_Z_INDEX
27
27
  });
28
28
  const SideNavLogoContainer = styled("div", {
29
- shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isSameBackgroundAsMain"
29
+ shouldForwardProp: prop => prop !== "headerBackgroundColor" && prop !== "isSameBackgroundAsMain" && prop !== "odysseyDesignTokens"
30
30
  })(({
31
+ headerBackgroundColor,
31
32
  isSameBackgroundAsMain,
32
33
  odysseyDesignTokens
33
34
  }) => ({
@@ -36,7 +37,7 @@ const SideNavLogoContainer = styled("div", {
36
37
  height: TOP_NAV_HEIGHT,
37
38
  paddingBlock: odysseyDesignTokens.Spacing4,
38
39
  paddingInline: odysseyDesignTokens.Spacing5,
39
- backgroundColor: isSameBackgroundAsMain ? "transparent" : odysseyDesignTokens.HueNeutralWhite,
40
+ backgroundColor: isSameBackgroundAsMain ? headerBackgroundColor : odysseyDesignTokens.HueNeutralWhite,
40
41
  "svg, img": {
41
42
  maxHeight: "100%",
42
43
  width: "auto",
@@ -71,7 +72,9 @@ const SideNavHeader = ({
71
72
  return _jsxs(SideNavHeaderContainer, {
72
73
  children: [_jsx(SideNavLogoContainer, {
73
74
  isSameBackgroundAsMain: logoProps?.isSameBackgroundAsMain,
75
+ headerBackgroundColor: uiShellContext?.sideNavBackgroundColor,
74
76
  odysseyDesignTokens: odysseyDesignTokens,
77
+ "data-se": "sidenav-header-logo-container",
75
78
  children: isLoading ? _jsx(_Skeleton, {
76
79
  variant: "rounded",
77
80
  height: 24,