@okta/odyssey-react-mui 1.32.4 → 1.34.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 (363) 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/Buttons/BaseButton.cjs +1 -1
  6. package/dist/cjs/Buttons/BaseButton.cjs.map +1 -1
  7. package/dist/cjs/DatePickers/datePickerTheme.cjs +1 -1
  8. package/dist/cjs/DatePickers/datePickerTheme.cjs.map +1 -1
  9. package/dist/cjs/OdysseyProvider.cjs +2 -2
  10. package/dist/cjs/OdysseyProvider.cjs.map +1 -1
  11. package/dist/cjs/OdysseyThemeProvider.cjs +2 -2
  12. package/dist/cjs/OdysseyThemeProvider.cjs.map +1 -1
  13. package/dist/cjs/hexToRgb.cjs.map +1 -1
  14. package/dist/cjs/labs/DatePickers/DateTimePicker.cjs.map +1 -1
  15. package/dist/cjs/labs/OdysseyPickers/PickerWithOptionAdornment.cjs.map +1 -1
  16. package/dist/cjs/properties/ts/odyssey-react-mui.cjs +1 -0
  17. package/dist/cjs/properties/ts/odyssey-react-mui.cjs.map +1 -1
  18. package/dist/cjs/properties/ts/odyssey-react-mui_cs.cjs +1 -0
  19. package/dist/cjs/properties/ts/odyssey-react-mui_cs.cjs.map +1 -1
  20. package/dist/cjs/properties/ts/odyssey-react-mui_da.cjs +1 -0
  21. package/dist/cjs/properties/ts/odyssey-react-mui_da.cjs.map +1 -1
  22. package/dist/cjs/properties/ts/odyssey-react-mui_de.cjs +1 -0
  23. package/dist/cjs/properties/ts/odyssey-react-mui_de.cjs.map +1 -1
  24. package/dist/cjs/properties/ts/odyssey-react-mui_el.cjs +1 -0
  25. package/dist/cjs/properties/ts/odyssey-react-mui_el.cjs.map +1 -1
  26. package/dist/cjs/properties/ts/odyssey-react-mui_es.cjs +1 -0
  27. package/dist/cjs/properties/ts/odyssey-react-mui_es.cjs.map +1 -1
  28. package/dist/cjs/properties/ts/odyssey-react-mui_fi.cjs +1 -0
  29. package/dist/cjs/properties/ts/odyssey-react-mui_fi.cjs.map +1 -1
  30. package/dist/cjs/properties/ts/odyssey-react-mui_fr.cjs +1 -0
  31. package/dist/cjs/properties/ts/odyssey-react-mui_fr.cjs.map +1 -1
  32. package/dist/cjs/properties/ts/odyssey-react-mui_ht.cjs +1 -0
  33. package/dist/cjs/properties/ts/odyssey-react-mui_ht.cjs.map +1 -1
  34. package/dist/cjs/properties/ts/odyssey-react-mui_hu.cjs +1 -0
  35. package/dist/cjs/properties/ts/odyssey-react-mui_hu.cjs.map +1 -1
  36. package/dist/cjs/properties/ts/odyssey-react-mui_id.cjs +1 -0
  37. package/dist/cjs/properties/ts/odyssey-react-mui_id.cjs.map +1 -1
  38. package/dist/cjs/properties/ts/odyssey-react-mui_it.cjs +1 -0
  39. package/dist/cjs/properties/ts/odyssey-react-mui_it.cjs.map +1 -1
  40. package/dist/cjs/properties/ts/odyssey-react-mui_ja.cjs +1 -0
  41. package/dist/cjs/properties/ts/odyssey-react-mui_ja.cjs.map +1 -1
  42. package/dist/cjs/properties/ts/odyssey-react-mui_ko.cjs +1 -0
  43. package/dist/cjs/properties/ts/odyssey-react-mui_ko.cjs.map +1 -1
  44. package/dist/cjs/properties/ts/odyssey-react-mui_ms.cjs +1 -0
  45. package/dist/cjs/properties/ts/odyssey-react-mui_ms.cjs.map +1 -1
  46. package/dist/cjs/properties/ts/odyssey-react-mui_nb.cjs +1 -0
  47. package/dist/cjs/properties/ts/odyssey-react-mui_nb.cjs.map +1 -1
  48. package/dist/cjs/properties/ts/odyssey-react-mui_nl_NL.cjs +1 -0
  49. package/dist/cjs/properties/ts/odyssey-react-mui_nl_NL.cjs.map +1 -1
  50. package/dist/cjs/properties/ts/odyssey-react-mui_pl.cjs +1 -0
  51. package/dist/cjs/properties/ts/odyssey-react-mui_pl.cjs.map +1 -1
  52. package/dist/cjs/properties/ts/odyssey-react-mui_pt_BR.cjs +1 -0
  53. package/dist/cjs/properties/ts/odyssey-react-mui_pt_BR.cjs.map +1 -1
  54. package/dist/cjs/properties/ts/odyssey-react-mui_ro.cjs +1 -0
  55. package/dist/cjs/properties/ts/odyssey-react-mui_ro.cjs.map +1 -1
  56. package/dist/cjs/properties/ts/odyssey-react-mui_ru.cjs +1 -0
  57. package/dist/cjs/properties/ts/odyssey-react-mui_ru.cjs.map +1 -1
  58. package/dist/cjs/properties/ts/odyssey-react-mui_sv.cjs +1 -0
  59. package/dist/cjs/properties/ts/odyssey-react-mui_sv.cjs.map +1 -1
  60. package/dist/cjs/properties/ts/odyssey-react-mui_th.cjs +1 -0
  61. package/dist/cjs/properties/ts/odyssey-react-mui_th.cjs.map +1 -1
  62. package/dist/cjs/properties/ts/odyssey-react-mui_tr.cjs +1 -0
  63. package/dist/cjs/properties/ts/odyssey-react-mui_tr.cjs.map +1 -1
  64. package/dist/cjs/properties/ts/odyssey-react-mui_uk.cjs +1 -0
  65. package/dist/cjs/properties/ts/odyssey-react-mui_uk.cjs.map +1 -1
  66. package/dist/cjs/properties/ts/odyssey-react-mui_vi.cjs +1 -0
  67. package/dist/cjs/properties/ts/odyssey-react-mui_vi.cjs.map +1 -1
  68. package/dist/cjs/properties/ts/odyssey-react-mui_zh_CN.cjs +1 -0
  69. package/dist/cjs/properties/ts/odyssey-react-mui_zh_CN.cjs.map +1 -1
  70. package/dist/cjs/properties/ts/odyssey-react-mui_zh_TW.cjs +1 -0
  71. package/dist/cjs/properties/ts/odyssey-react-mui_zh_TW.cjs.map +1 -1
  72. package/dist/cjs/theme/pxToRem.cjs +21 -0
  73. package/dist/cjs/theme/pxToRem.cjs.map +1 -0
  74. package/dist/cjs/theme/theme.cjs +22 -0
  75. package/dist/cjs/theme/theme.cjs.map +1 -1
  76. package/dist/cjs/theme/useMediaQuery.cjs +34 -0
  77. package/dist/cjs/theme/useMediaQuery.cjs.map +1 -0
  78. package/dist/cjs/ui-shell/AppSwitcher/AppSwitcher.cjs +3 -3
  79. package/dist/cjs/ui-shell/AppSwitcher/AppSwitcher.cjs.map +1 -1
  80. package/dist/cjs/ui-shell/NarrowUiShellContent.cjs +353 -0
  81. package/dist/cjs/ui-shell/NarrowUiShellContent.cjs.map +1 -0
  82. package/dist/cjs/ui-shell/SideNav/SideNav.cjs +62 -44
  83. package/dist/cjs/ui-shell/SideNav/SideNav.cjs.map +1 -1
  84. package/dist/cjs/ui-shell/SideNav/SideNavHeader.cjs +8 -5
  85. package/dist/cjs/ui-shell/SideNav/SideNavHeader.cjs.map +1 -1
  86. package/dist/cjs/ui-shell/SideNav/SideNavItemContent.cjs +3 -0
  87. package/dist/cjs/ui-shell/SideNav/SideNavItemContent.cjs.map +1 -1
  88. package/dist/cjs/ui-shell/SideNav/SideNavLogo.cjs +5 -5
  89. package/dist/cjs/ui-shell/SideNav/SideNavLogo.cjs.map +1 -1
  90. package/dist/cjs/ui-shell/SideNav/SideNavToggleButton.cjs +2 -1
  91. package/dist/cjs/ui-shell/SideNav/SideNavToggleButton.cjs.map +1 -1
  92. package/dist/cjs/ui-shell/SideNav/types.cjs.map +1 -1
  93. package/dist/cjs/ui-shell/TopNav/HamburgerMenuIcon.cjs +37 -0
  94. package/dist/cjs/ui-shell/TopNav/HamburgerMenuIcon.cjs.map +1 -0
  95. package/dist/cjs/ui-shell/TopNav/TopNav.cjs +5 -5
  96. package/dist/cjs/ui-shell/TopNav/TopNav.cjs.map +1 -1
  97. package/dist/cjs/ui-shell/UiShell.cjs +43 -18
  98. package/dist/cjs/ui-shell/UiShell.cjs.map +1 -1
  99. package/dist/cjs/ui-shell/UiShellProvider.cjs +14 -4
  100. package/dist/cjs/ui-shell/UiShellProvider.cjs.map +1 -1
  101. package/dist/cjs/ui-shell/WideUiShellContent.cjs +171 -0
  102. package/dist/cjs/ui-shell/WideUiShellContent.cjs.map +1 -0
  103. package/dist/cjs/ui-shell/index.cjs +37 -9
  104. package/dist/cjs/ui-shell/index.cjs.map +1 -1
  105. package/dist/cjs/ui-shell/renderUiShell.cjs +32 -20
  106. package/dist/cjs/ui-shell/renderUiShell.cjs.map +1 -1
  107. package/dist/cjs/ui-shell/uiShellContentTypes.cjs +20 -0
  108. package/dist/cjs/ui-shell/uiShellContentTypes.cjs.map +1 -0
  109. package/dist/cjs/ui-shell/uiShellSharedConstants.cjs +23 -0
  110. package/dist/cjs/ui-shell/uiShellSharedConstants.cjs.map +1 -0
  111. package/dist/cjs/ui-shell/useMatchAppElementToUiShellAppArea.cjs +108 -0
  112. package/dist/cjs/ui-shell/useMatchAppElementToUiShellAppArea.cjs.map +1 -0
  113. package/dist/cjs/ui-shell/useScrollState.cjs +2 -4
  114. package/dist/cjs/ui-shell/useScrollState.cjs.map +1 -1
  115. package/dist/cjs/ui-shell/useUiShellBreakpoints.cjs +41 -0
  116. package/dist/cjs/ui-shell/useUiShellBreakpoints.cjs.map +1 -0
  117. package/dist/cjs/web-component/createReactRootElements.cjs.map +1 -1
  118. package/dist/cjs/web-component/renderReactInWebComponent.cjs +6 -1
  119. package/dist/cjs/web-component/renderReactInWebComponent.cjs.map +1 -1
  120. package/dist/esm/Autocomplete.js +1 -1
  121. package/dist/esm/Autocomplete.js.map +1 -1
  122. package/dist/esm/Breadcrumbs.js +23 -7
  123. package/dist/esm/Breadcrumbs.js.map +1 -1
  124. package/dist/esm/Buttons/BaseButton.js +1 -1
  125. package/dist/esm/Buttons/BaseButton.js.map +1 -1
  126. package/dist/esm/DatePickers/datePickerTheme.js +1 -1
  127. package/dist/esm/DatePickers/datePickerTheme.js.map +1 -1
  128. package/dist/esm/OdysseyProvider.js +2 -2
  129. package/dist/esm/OdysseyProvider.js.map +1 -1
  130. package/dist/esm/OdysseyThemeProvider.js +2 -2
  131. package/dist/esm/OdysseyThemeProvider.js.map +1 -1
  132. package/dist/esm/hexToRgb.js.map +1 -1
  133. package/dist/esm/labs/DatePickers/DateTimePicker.js.map +1 -1
  134. package/dist/esm/labs/OdysseyPickers/PickerWithOptionAdornment.js.map +1 -1
  135. package/dist/esm/properties/ts/odyssey-react-mui.js +1 -0
  136. package/dist/esm/properties/ts/odyssey-react-mui.js.map +1 -1
  137. package/dist/esm/properties/ts/odyssey-react-mui_cs.js +1 -0
  138. package/dist/esm/properties/ts/odyssey-react-mui_cs.js.map +1 -1
  139. package/dist/esm/properties/ts/odyssey-react-mui_da.js +1 -0
  140. package/dist/esm/properties/ts/odyssey-react-mui_da.js.map +1 -1
  141. package/dist/esm/properties/ts/odyssey-react-mui_de.js +1 -0
  142. package/dist/esm/properties/ts/odyssey-react-mui_de.js.map +1 -1
  143. package/dist/esm/properties/ts/odyssey-react-mui_el.js +1 -0
  144. package/dist/esm/properties/ts/odyssey-react-mui_el.js.map +1 -1
  145. package/dist/esm/properties/ts/odyssey-react-mui_es.js +1 -0
  146. package/dist/esm/properties/ts/odyssey-react-mui_es.js.map +1 -1
  147. package/dist/esm/properties/ts/odyssey-react-mui_fi.js +1 -0
  148. package/dist/esm/properties/ts/odyssey-react-mui_fi.js.map +1 -1
  149. package/dist/esm/properties/ts/odyssey-react-mui_fr.js +1 -0
  150. package/dist/esm/properties/ts/odyssey-react-mui_fr.js.map +1 -1
  151. package/dist/esm/properties/ts/odyssey-react-mui_ht.js +1 -0
  152. package/dist/esm/properties/ts/odyssey-react-mui_ht.js.map +1 -1
  153. package/dist/esm/properties/ts/odyssey-react-mui_hu.js +1 -0
  154. package/dist/esm/properties/ts/odyssey-react-mui_hu.js.map +1 -1
  155. package/dist/esm/properties/ts/odyssey-react-mui_id.js +1 -0
  156. package/dist/esm/properties/ts/odyssey-react-mui_id.js.map +1 -1
  157. package/dist/esm/properties/ts/odyssey-react-mui_it.js +1 -0
  158. package/dist/esm/properties/ts/odyssey-react-mui_it.js.map +1 -1
  159. package/dist/esm/properties/ts/odyssey-react-mui_ja.js +1 -0
  160. package/dist/esm/properties/ts/odyssey-react-mui_ja.js.map +1 -1
  161. package/dist/esm/properties/ts/odyssey-react-mui_ko.js +1 -0
  162. package/dist/esm/properties/ts/odyssey-react-mui_ko.js.map +1 -1
  163. package/dist/esm/properties/ts/odyssey-react-mui_ms.js +1 -0
  164. package/dist/esm/properties/ts/odyssey-react-mui_ms.js.map +1 -1
  165. package/dist/esm/properties/ts/odyssey-react-mui_nb.js +1 -0
  166. package/dist/esm/properties/ts/odyssey-react-mui_nb.js.map +1 -1
  167. package/dist/esm/properties/ts/odyssey-react-mui_nl_NL.js +1 -0
  168. package/dist/esm/properties/ts/odyssey-react-mui_nl_NL.js.map +1 -1
  169. package/dist/esm/properties/ts/odyssey-react-mui_pl.js +1 -0
  170. package/dist/esm/properties/ts/odyssey-react-mui_pl.js.map +1 -1
  171. package/dist/esm/properties/ts/odyssey-react-mui_pt_BR.js +1 -0
  172. package/dist/esm/properties/ts/odyssey-react-mui_pt_BR.js.map +1 -1
  173. package/dist/esm/properties/ts/odyssey-react-mui_ro.js +1 -0
  174. package/dist/esm/properties/ts/odyssey-react-mui_ro.js.map +1 -1
  175. package/dist/esm/properties/ts/odyssey-react-mui_ru.js +1 -0
  176. package/dist/esm/properties/ts/odyssey-react-mui_ru.js.map +1 -1
  177. package/dist/esm/properties/ts/odyssey-react-mui_sv.js +1 -0
  178. package/dist/esm/properties/ts/odyssey-react-mui_sv.js.map +1 -1
  179. package/dist/esm/properties/ts/odyssey-react-mui_th.js +1 -0
  180. package/dist/esm/properties/ts/odyssey-react-mui_th.js.map +1 -1
  181. package/dist/esm/properties/ts/odyssey-react-mui_tr.js +1 -0
  182. package/dist/esm/properties/ts/odyssey-react-mui_tr.js.map +1 -1
  183. package/dist/esm/properties/ts/odyssey-react-mui_uk.js +1 -0
  184. package/dist/esm/properties/ts/odyssey-react-mui_uk.js.map +1 -1
  185. package/dist/esm/properties/ts/odyssey-react-mui_vi.js +1 -0
  186. package/dist/esm/properties/ts/odyssey-react-mui_vi.js.map +1 -1
  187. package/dist/esm/properties/ts/odyssey-react-mui_zh_CN.js +1 -0
  188. package/dist/esm/properties/ts/odyssey-react-mui_zh_CN.js.map +1 -1
  189. package/dist/esm/properties/ts/odyssey-react-mui_zh_TW.js +1 -0
  190. package/dist/esm/properties/ts/odyssey-react-mui_zh_TW.js.map +1 -1
  191. package/dist/esm/theme/pxToRem.js +14 -0
  192. package/dist/esm/theme/pxToRem.js.map +1 -0
  193. package/dist/esm/theme/theme.js +2 -0
  194. package/dist/esm/theme/theme.js.map +1 -1
  195. package/dist/esm/theme/useMediaQuery.js +27 -0
  196. package/dist/esm/theme/useMediaQuery.js.map +1 -0
  197. package/dist/esm/ui-shell/AppSwitcher/AppSwitcher.js +2 -2
  198. package/dist/esm/ui-shell/AppSwitcher/AppSwitcher.js.map +1 -1
  199. package/dist/esm/ui-shell/NarrowUiShellContent.js +347 -0
  200. package/dist/esm/ui-shell/NarrowUiShellContent.js.map +1 -0
  201. package/dist/esm/ui-shell/SideNav/SideNav.js +61 -43
  202. package/dist/esm/ui-shell/SideNav/SideNav.js.map +1 -1
  203. package/dist/esm/ui-shell/SideNav/SideNavHeader.js +7 -4
  204. package/dist/esm/ui-shell/SideNav/SideNavHeader.js.map +1 -1
  205. package/dist/esm/ui-shell/SideNav/SideNavItemContent.js +3 -0
  206. package/dist/esm/ui-shell/SideNav/SideNavItemContent.js.map +1 -1
  207. package/dist/esm/ui-shell/SideNav/SideNavLogo.js +5 -5
  208. package/dist/esm/ui-shell/SideNav/SideNavLogo.js.map +1 -1
  209. package/dist/esm/ui-shell/SideNav/SideNavToggleButton.js +2 -1
  210. package/dist/esm/ui-shell/SideNav/SideNavToggleButton.js.map +1 -1
  211. package/dist/esm/ui-shell/SideNav/types.js.map +1 -1
  212. package/dist/esm/ui-shell/TopNav/HamburgerMenuIcon.js +32 -0
  213. package/dist/esm/ui-shell/TopNav/HamburgerMenuIcon.js.map +1 -0
  214. package/dist/esm/ui-shell/TopNav/TopNav.js +2 -2
  215. package/dist/esm/ui-shell/TopNav/TopNav.js.map +1 -1
  216. package/dist/esm/ui-shell/UiShell.js +43 -18
  217. package/dist/esm/ui-shell/UiShell.js.map +1 -1
  218. package/dist/esm/ui-shell/UiShellProvider.js +12 -3
  219. package/dist/esm/ui-shell/UiShellProvider.js.map +1 -1
  220. package/dist/esm/ui-shell/WideUiShellContent.js +165 -0
  221. package/dist/esm/ui-shell/WideUiShellContent.js.map +1 -0
  222. package/dist/esm/ui-shell/index.js +3 -1
  223. package/dist/esm/ui-shell/index.js.map +1 -1
  224. package/dist/esm/ui-shell/renderUiShell.js +32 -20
  225. package/dist/esm/ui-shell/renderUiShell.js.map +1 -1
  226. package/dist/esm/ui-shell/uiShellContentTypes.js +14 -0
  227. package/dist/esm/ui-shell/uiShellContentTypes.js.map +1 -0
  228. package/dist/esm/ui-shell/uiShellSharedConstants.js +17 -0
  229. package/dist/esm/ui-shell/uiShellSharedConstants.js.map +1 -0
  230. package/dist/esm/ui-shell/useMatchAppElementToUiShellAppArea.js +99 -0
  231. package/dist/esm/ui-shell/useMatchAppElementToUiShellAppArea.js.map +1 -0
  232. package/dist/esm/ui-shell/useScrollState.js +3 -5
  233. package/dist/esm/ui-shell/useScrollState.js.map +1 -1
  234. package/dist/esm/ui-shell/useUiShellBreakpoints.js +34 -0
  235. package/dist/esm/ui-shell/useUiShellBreakpoints.js.map +1 -0
  236. package/dist/esm/web-component/createReactRootElements.js.map +1 -1
  237. package/dist/esm/web-component/renderReactInWebComponent.js +6 -1
  238. package/dist/esm/web-component/renderReactInWebComponent.js.map +1 -1
  239. package/dist/index.cjs +1 -1
  240. package/dist/index.mjs +1 -1
  241. package/dist/index.scss +1 -1
  242. package/dist/tsconfig.production.tsbuildinfo +1 -1
  243. package/dist/types/Autocomplete.d.ts +1 -1
  244. package/dist/types/Breadcrumbs.d.ts +4 -3
  245. package/dist/types/Breadcrumbs.d.ts.map +1 -1
  246. package/dist/types/Buttons/BaseButton.d.ts +1 -1
  247. package/dist/types/OdysseyProvider.d.ts +1 -1
  248. package/dist/types/OdysseyProvider.d.ts.map +1 -1
  249. package/dist/types/OdysseyThemeProvider.d.ts.map +1 -1
  250. package/dist/types/OdysseyTranslationProvider.d.ts +1 -1
  251. package/dist/types/OdysseyTranslationProvider.d.ts.map +1 -1
  252. package/dist/types/hexToRgb.d.ts.map +1 -1
  253. package/dist/types/i18n.d.ts +28 -0
  254. package/dist/types/i18n.d.ts.map +1 -1
  255. package/dist/types/labs/DatePickers/DateTimePicker.d.ts.map +1 -1
  256. package/dist/types/properties/ts/odyssey-react-mui.d.ts +1 -0
  257. package/dist/types/properties/ts/odyssey-react-mui.d.ts.map +1 -1
  258. package/dist/types/properties/ts/odyssey-react-mui_cs.d.ts +1 -0
  259. package/dist/types/properties/ts/odyssey-react-mui_cs.d.ts.map +1 -1
  260. package/dist/types/properties/ts/odyssey-react-mui_da.d.ts +1 -0
  261. package/dist/types/properties/ts/odyssey-react-mui_da.d.ts.map +1 -1
  262. package/dist/types/properties/ts/odyssey-react-mui_de.d.ts +1 -0
  263. package/dist/types/properties/ts/odyssey-react-mui_de.d.ts.map +1 -1
  264. package/dist/types/properties/ts/odyssey-react-mui_el.d.ts +1 -0
  265. package/dist/types/properties/ts/odyssey-react-mui_el.d.ts.map +1 -1
  266. package/dist/types/properties/ts/odyssey-react-mui_es.d.ts +1 -0
  267. package/dist/types/properties/ts/odyssey-react-mui_es.d.ts.map +1 -1
  268. package/dist/types/properties/ts/odyssey-react-mui_fi.d.ts +1 -0
  269. package/dist/types/properties/ts/odyssey-react-mui_fi.d.ts.map +1 -1
  270. package/dist/types/properties/ts/odyssey-react-mui_fr.d.ts +1 -0
  271. package/dist/types/properties/ts/odyssey-react-mui_fr.d.ts.map +1 -1
  272. package/dist/types/properties/ts/odyssey-react-mui_ht.d.ts +1 -0
  273. package/dist/types/properties/ts/odyssey-react-mui_ht.d.ts.map +1 -1
  274. package/dist/types/properties/ts/odyssey-react-mui_hu.d.ts +1 -0
  275. package/dist/types/properties/ts/odyssey-react-mui_hu.d.ts.map +1 -1
  276. package/dist/types/properties/ts/odyssey-react-mui_id.d.ts +1 -0
  277. package/dist/types/properties/ts/odyssey-react-mui_id.d.ts.map +1 -1
  278. package/dist/types/properties/ts/odyssey-react-mui_it.d.ts +1 -0
  279. package/dist/types/properties/ts/odyssey-react-mui_it.d.ts.map +1 -1
  280. package/dist/types/properties/ts/odyssey-react-mui_ja.d.ts +1 -0
  281. package/dist/types/properties/ts/odyssey-react-mui_ja.d.ts.map +1 -1
  282. package/dist/types/properties/ts/odyssey-react-mui_ko.d.ts +1 -0
  283. package/dist/types/properties/ts/odyssey-react-mui_ko.d.ts.map +1 -1
  284. package/dist/types/properties/ts/odyssey-react-mui_ms.d.ts +1 -0
  285. package/dist/types/properties/ts/odyssey-react-mui_ms.d.ts.map +1 -1
  286. package/dist/types/properties/ts/odyssey-react-mui_nb.d.ts +1 -0
  287. package/dist/types/properties/ts/odyssey-react-mui_nb.d.ts.map +1 -1
  288. package/dist/types/properties/ts/odyssey-react-mui_nl_NL.d.ts +1 -0
  289. package/dist/types/properties/ts/odyssey-react-mui_nl_NL.d.ts.map +1 -1
  290. package/dist/types/properties/ts/odyssey-react-mui_pl.d.ts +1 -0
  291. package/dist/types/properties/ts/odyssey-react-mui_pl.d.ts.map +1 -1
  292. package/dist/types/properties/ts/odyssey-react-mui_pt_BR.d.ts +1 -0
  293. package/dist/types/properties/ts/odyssey-react-mui_pt_BR.d.ts.map +1 -1
  294. package/dist/types/properties/ts/odyssey-react-mui_ro.d.ts +1 -0
  295. package/dist/types/properties/ts/odyssey-react-mui_ro.d.ts.map +1 -1
  296. package/dist/types/properties/ts/odyssey-react-mui_ru.d.ts +1 -0
  297. package/dist/types/properties/ts/odyssey-react-mui_ru.d.ts.map +1 -1
  298. package/dist/types/properties/ts/odyssey-react-mui_sv.d.ts +1 -0
  299. package/dist/types/properties/ts/odyssey-react-mui_sv.d.ts.map +1 -1
  300. package/dist/types/properties/ts/odyssey-react-mui_th.d.ts +1 -0
  301. package/dist/types/properties/ts/odyssey-react-mui_th.d.ts.map +1 -1
  302. package/dist/types/properties/ts/odyssey-react-mui_tr.d.ts +1 -0
  303. package/dist/types/properties/ts/odyssey-react-mui_tr.d.ts.map +1 -1
  304. package/dist/types/properties/ts/odyssey-react-mui_uk.d.ts +1 -0
  305. package/dist/types/properties/ts/odyssey-react-mui_uk.d.ts.map +1 -1
  306. package/dist/types/properties/ts/odyssey-react-mui_vi.d.ts +1 -0
  307. package/dist/types/properties/ts/odyssey-react-mui_vi.d.ts.map +1 -1
  308. package/dist/types/properties/ts/odyssey-react-mui_zh_CN.d.ts +1 -0
  309. package/dist/types/properties/ts/odyssey-react-mui_zh_CN.d.ts.map +1 -1
  310. package/dist/types/properties/ts/odyssey-react-mui_zh_TW.d.ts +1 -0
  311. package/dist/types/properties/ts/odyssey-react-mui_zh_TW.d.ts.map +1 -1
  312. package/dist/types/theme/pxToRem.d.ts +13 -0
  313. package/dist/types/theme/pxToRem.d.ts.map +1 -0
  314. package/dist/types/theme/theme.d.ts +2 -0
  315. package/dist/types/theme/theme.d.ts.map +1 -1
  316. package/dist/types/theme/useMediaQuery.d.ts +13 -0
  317. package/dist/types/theme/useMediaQuery.d.ts.map +1 -0
  318. package/dist/types/ui-shell/AppSwitcher/AppSwitcher.d.ts.map +1 -1
  319. package/dist/types/ui-shell/NarrowUiShellContent.d.ts +17 -0
  320. package/dist/types/ui-shell/NarrowUiShellContent.d.ts.map +1 -0
  321. package/dist/types/ui-shell/SideNav/SideNav.d.ts +1 -3
  322. package/dist/types/ui-shell/SideNav/SideNav.d.ts.map +1 -1
  323. package/dist/types/ui-shell/SideNav/SideNavHeader.d.ts.map +1 -1
  324. package/dist/types/ui-shell/SideNav/SideNavItemContent.d.ts.map +1 -1
  325. package/dist/types/ui-shell/SideNav/SideNavLogo.d.ts +1 -1
  326. package/dist/types/ui-shell/SideNav/SideNavLogo.d.ts.map +1 -1
  327. package/dist/types/ui-shell/SideNav/SideNavToggleButton.d.ts.map +1 -1
  328. package/dist/types/ui-shell/SideNav/types.d.ts +7 -1
  329. package/dist/types/ui-shell/SideNav/types.d.ts.map +1 -1
  330. package/dist/types/ui-shell/TopNav/HamburgerMenuIcon.d.ts +16 -0
  331. package/dist/types/ui-shell/TopNav/HamburgerMenuIcon.d.ts.map +1 -0
  332. package/dist/types/ui-shell/TopNav/TopNav.d.ts +0 -1
  333. package/dist/types/ui-shell/TopNav/TopNav.d.ts.map +1 -1
  334. package/dist/types/ui-shell/UiShell.d.ts +12 -14
  335. package/dist/types/ui-shell/UiShell.d.ts.map +1 -1
  336. package/dist/types/ui-shell/UiShellProvider.d.ts +37 -8
  337. package/dist/types/ui-shell/UiShellProvider.d.ts.map +1 -1
  338. package/dist/types/ui-shell/WideUiShellContent.d.ts +16 -0
  339. package/dist/types/ui-shell/WideUiShellContent.d.ts.map +1 -0
  340. package/dist/types/ui-shell/index.d.ts +3 -1
  341. package/dist/types/ui-shell/index.d.ts.map +1 -1
  342. package/dist/types/ui-shell/renderUiShell.d.ts +9 -11
  343. package/dist/types/ui-shell/renderUiShell.d.ts.map +1 -1
  344. package/dist/types/ui-shell/{UiShellContent.d.ts → uiShellContentTypes.d.ts} +45 -31
  345. package/dist/types/ui-shell/uiShellContentTypes.d.ts.map +1 -0
  346. package/dist/types/ui-shell/uiShellSharedConstants.d.ts +18 -0
  347. package/dist/types/ui-shell/uiShellSharedConstants.d.ts.map +1 -0
  348. package/dist/types/ui-shell/useMatchAppElementToUiShellAppArea.d.ts +38 -0
  349. package/dist/types/ui-shell/useMatchAppElementToUiShellAppArea.d.ts.map +1 -0
  350. package/dist/types/ui-shell/useScrollState.d.ts +0 -1
  351. package/dist/types/ui-shell/useScrollState.d.ts.map +1 -1
  352. package/dist/types/ui-shell/useUiShellBreakpoints.d.ts +18 -0
  353. package/dist/types/ui-shell/useUiShellBreakpoints.d.ts.map +1 -0
  354. package/dist/types/web-component/createReactRootElements.d.ts +6 -4
  355. package/dist/types/web-component/createReactRootElements.d.ts.map +1 -1
  356. package/dist/types/web-component/renderReactInWebComponent.d.ts +12 -5
  357. package/dist/types/web-component/renderReactInWebComponent.d.ts.map +1 -1
  358. package/package.json +6 -6
  359. package/dist/cjs/ui-shell/UiShellContent.cjs +0 -242
  360. package/dist/cjs/ui-shell/UiShellContent.cjs.map +0 -1
  361. package/dist/esm/ui-shell/UiShellContent.js +0 -234
  362. package/dist/esm/ui-shell/UiShellContent.js.map +0 -1
  363. package/dist/types/ui-shell/UiShellContent.d.ts.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"SideNavHeader.cjs","names":["_styled","_interopRequireDefault","require","_react","_OdysseyDesignTokensContext","_SideNavLogo","_Typography","_index","_UiShellProvider","_jsxRuntime","e","__esModule","default","SideNavHeaderContainer","styled","position","display","flexDirection","zIndex","SideNavLogoContainer","shouldForwardProp","prop","isSameBackgroundAsMain","odysseyDesignTokens","alignItems","height","TOP_NAV_HEIGHT","paddingBlock","Spacing4","paddingInline","Spacing5","backgroundColor","HueNeutralWhite","maxHeight","width","maxWidth","SideNavHeadingContainer","contrastFontColor","justifyContent","margin","color","SideNavHeader","appName","isLoading","logoProps","useOdysseyDesignTokens","uiShellContext","useUiShellContext","jsxs","children","jsx","_Skeleton2","variant","SideNavLogo","sideNavContrastColors","fontColor","Heading5","component","MemoizedSideNavHeader","exports","memo","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavHeader.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport { memo } from \"react\";\nimport { Skeleton } from \"@mui/material\";\n\nimport {\n type DesignTokens,\n useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { SideNavLogo } from \"./SideNavLogo.js\";\nimport { SideNavLogoProps, SideNavProps } from \"./types.js\";\nimport { Heading5 } from \"../../Typography.js\";\nimport { TOP_NAV_HEIGHT } from \"../TopNav/index.js\";\nimport { ContrastColors } from \"../../createContrastColors.js\";\nimport { useUiShellContext } from \"../../ui-shell/UiShellProvider.js\";\n\nconst SideNavHeaderContainer = styled(\"div\")({\n position: \"relative\",\n display: \"flex\",\n flexDirection: \"column\",\n zIndex: 1,\n});\n\nconst SideNavLogoContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" && prop !== \"isSameBackgroundAsMain\",\n})<{\n isSameBackgroundAsMain: SideNavLogoProps[\"isSameBackgroundAsMain\"];\n odysseyDesignTokens: DesignTokens;\n}>(({ isSameBackgroundAsMain, odysseyDesignTokens }) => ({\n display: \"flex\",\n alignItems: \"center\",\n height: TOP_NAV_HEIGHT,\n paddingBlock: odysseyDesignTokens.Spacing4,\n paddingInline: odysseyDesignTokens.Spacing5,\n backgroundColor: isSameBackgroundAsMain\n ? \"transparent\"\n : odysseyDesignTokens.HueNeutralWhite,\n\n \"svg, img\": {\n maxHeight: \"100%\",\n width: \"auto\",\n maxWidth: \"100%\",\n },\n}));\n\nconst SideNavHeadingContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" && prop !== \"contrastFontColor\",\n})(\n ({\n contrastFontColor,\n odysseyDesignTokens,\n }: {\n contrastFontColor: ContrastColors[\"fontColor\"];\n odysseyDesignTokens: DesignTokens;\n }) => ({\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n paddingBlock: odysseyDesignTokens.Spacing4,\n paddingInline: odysseyDesignTokens.Spacing5,\n width: \"100%\",\n\n [\"& .MuiTypography-root\"]: {\n margin: 0,\n width: \"100%\",\n color: contrastFontColor || \"inherit\",\n },\n }),\n);\n\nexport type SideNavHeaderProps = {\n /**\n * The app's name.\n */\n appName?: string;\n /**\n * If the side nav currently has no items, it will be loading.\n */\n isLoading?: boolean;\n} & Pick<SideNavProps, \"logoProps\">;\n\nconst SideNavHeader = ({\n appName,\n isLoading,\n logoProps,\n}: SideNavHeaderProps) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n const uiShellContext = useUiShellContext();\n\n return (\n <SideNavHeaderContainer>\n <SideNavLogoContainer\n isSameBackgroundAsMain={logoProps?.isSameBackgroundAsMain}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n {isLoading ? (\n // The skeleton takes the hardcoded dimensions of the Okta logo\n <Skeleton variant=\"rounded\" height={24} width={67} />\n ) : (\n <SideNavLogo {...logoProps} />\n )}\n </SideNavLogoContainer>\n\n {appName && (\n <SideNavHeadingContainer\n contrastFontColor={uiShellContext?.sideNavContrastColors?.fontColor}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n <Heading5 component=\"h2\">\n {isLoading ? <Skeleton /> : appName}\n </Heading5>\n </SideNavHeadingContainer>\n )}\n </SideNavHeaderContainer>\n );\n};\n\nconst MemoizedSideNavHeader = memo(SideNavHeader);\nMemoizedSideNavHeader.displayName = \"SideNavHeader\";\n\nexport { MemoizedSideNavHeader as SideNavHeader };\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"SideNavHeader.cjs","names":["_styled","_interopRequireDefault","require","_react","_OdysseyDesignTokensContext","_SideNavLogo","_Typography","_UiShellProvider","_uiShellSharedConstants","_jsxRuntime","e","__esModule","default","SideNavHeaderContainer","styled","position","display","flexDirection","zIndex","UI_SHELL_BASE_Z_INDEX","SideNavLogoContainer","shouldForwardProp","prop","headerBackgroundColor","isSameBackgroundAsMain","odysseyDesignTokens","alignItems","height","TOP_NAV_HEIGHT","paddingBlock","Spacing4","paddingInline","Spacing5","backgroundColor","HueNeutralWhite","maxHeight","width","maxWidth","SideNavHeadingContainer","contrastFontColor","justifyContent","margin","color","SideNavHeader","appName","isLoading","logoProps","useOdysseyDesignTokens","uiShellContext","useUiShellContext","jsxs","children","jsx","sideNavBackgroundColor","_Skeleton2","variant","SideNavLogo","sideNavContrastColors","fontColor","Heading5","component","MemoizedSideNavHeader","exports","memo","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavHeader.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport { memo } from \"react\";\nimport { Skeleton } from \"@mui/material\";\n\nimport {\n type DesignTokens,\n useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { SideNavLogo } from \"./SideNavLogo.js\";\nimport { SideNavLogoProps, SideNavProps } from \"./types.js\";\nimport { Heading5 } from \"../../Typography.js\";\nimport { ContrastColors } from \"../../createContrastColors.js\";\nimport {\n UiShellColors,\n useUiShellContext,\n} from \"../../ui-shell/UiShellProvider.js\";\nimport {\n TOP_NAV_HEIGHT,\n UI_SHELL_BASE_Z_INDEX,\n} from \"../uiShellSharedConstants.js\";\n\nconst SideNavHeaderContainer = styled(\"div\")({\n position: \"relative\",\n display: \"flex\",\n flexDirection: \"column\",\n zIndex: UI_SHELL_BASE_Z_INDEX,\n});\n\nconst SideNavLogoContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"headerBackgroundColor\" &&\n prop !== \"isSameBackgroundAsMain\" &&\n prop !== \"odysseyDesignTokens\",\n})<{\n headerBackgroundColor?: UiShellColors[\"sideNavBackgroundColor\"];\n isSameBackgroundAsMain: SideNavLogoProps[\"isSameBackgroundAsMain\"];\n odysseyDesignTokens: DesignTokens;\n}>(\n ({ headerBackgroundColor, isSameBackgroundAsMain, odysseyDesignTokens }) => ({\n display: \"flex\",\n alignItems: \"center\",\n height: TOP_NAV_HEIGHT,\n paddingBlock: odysseyDesignTokens.Spacing4,\n paddingInline: odysseyDesignTokens.Spacing5,\n backgroundColor: isSameBackgroundAsMain\n ? headerBackgroundColor\n : odysseyDesignTokens.HueNeutralWhite,\n\n \"svg, img\": {\n maxHeight: \"100%\",\n width: \"auto\",\n maxWidth: \"100%\",\n },\n }),\n);\n\nconst SideNavHeadingContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" && prop !== \"contrastFontColor\",\n})(\n ({\n contrastFontColor,\n odysseyDesignTokens,\n }: {\n contrastFontColor: ContrastColors[\"fontColor\"];\n odysseyDesignTokens: DesignTokens;\n }) => ({\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n paddingBlock: odysseyDesignTokens.Spacing4,\n paddingInline: odysseyDesignTokens.Spacing5,\n width: \"100%\",\n\n [\"& .MuiTypography-root\"]: {\n margin: 0,\n width: \"100%\",\n color: contrastFontColor || \"inherit\",\n },\n }),\n);\n\nexport type SideNavHeaderProps = {\n /**\n * The app's name.\n */\n appName?: string;\n /**\n * If the side nav currently has no items, it will be loading.\n */\n isLoading?: boolean;\n} & Pick<SideNavProps, \"logoProps\">;\n\nconst SideNavHeader = ({\n appName,\n isLoading,\n logoProps,\n}: SideNavHeaderProps) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n const uiShellContext = useUiShellContext();\n\n return (\n <SideNavHeaderContainer>\n <SideNavLogoContainer\n isSameBackgroundAsMain={logoProps?.isSameBackgroundAsMain}\n headerBackgroundColor={uiShellContext?.sideNavBackgroundColor}\n odysseyDesignTokens={odysseyDesignTokens}\n data-se=\"sidenav-header-logo-container\"\n >\n {isLoading ? (\n // The skeleton takes the hardcoded dimensions of the Okta logo\n <Skeleton variant=\"rounded\" height={24} width={67} />\n ) : (\n <SideNavLogo {...logoProps} />\n )}\n </SideNavLogoContainer>\n\n {appName && (\n <SideNavHeadingContainer\n contrastFontColor={uiShellContext?.sideNavContrastColors?.fontColor}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n <Heading5 component=\"h2\">\n {isLoading ? <Skeleton /> : appName}\n </Heading5>\n </SideNavHeadingContainer>\n )}\n </SideNavHeaderContainer>\n );\n};\n\nconst MemoizedSideNavHeader = memo(SideNavHeader);\nMemoizedSideNavHeader.displayName = \"SideNavHeader\";\n\nexport { MemoizedSideNavHeader as SideNavHeader };\n"],"mappings":"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","ignoreList":[]}
@@ -224,6 +224,7 @@ const SideNavItemContent = ({
224
224
  odysseyDesignTokens: odysseyDesignTokens,
225
225
  sideNavContrastColors: uiShellContext?.sideNavContrastColors,
226
226
  isActiveDropTarget: false,
227
+ "data-se": "tb--sidenav-text-container",
227
228
  children: (0, _jsxRuntime.jsx)(_SideNavItemLinkContent.SideNavItemLinkContent, {
228
229
  count: count,
229
230
  label: label,
@@ -244,6 +245,7 @@ const SideNavItemContent = ({
244
245
  sideNavContrastColors: uiShellContext?.sideNavContrastColors,
245
246
  tabIndex: 0,
246
247
  isActiveDropTarget: isActiveDropTarget,
248
+ "data-se": "tb--sidenav-text-container",
247
249
  children: (0, _jsxRuntime.jsx)(_SideNavItemLinkContent.SideNavItemLinkContent, {
248
250
  count: count,
249
251
  label: label,
@@ -263,6 +265,7 @@ const SideNavItemContent = ({
263
265
  sideNavContrastColors: uiShellContext?.sideNavContrastColors,
264
266
  target: target,
265
267
  isActiveDropTarget: isActiveDropTarget,
268
+ "data-se": "tb--sidenav-text-container",
266
269
  children: [(0, _jsxRuntime.jsx)(_SideNavItemLinkContent.SideNavItemLinkContent, {
267
270
  count: count,
268
271
  label: label,
@@ -1 +1 @@
1
- {"version":3,"file":"SideNavItemContent.cjs","names":["_styled","_interopRequireDefault","require","_react","_OdysseyDesignTokensContext","_SideNavItemLinkContent","_SideNavItemContentContext","_index","_UiShellProvider","_jsxRuntime","e","__esModule","default","StyledSideNavListItem","exports","styled","shouldForwardProp","prop","isSelected","odysseyDesignTokens","sideNavContrastColors","display","alignItems","backgroundColor","borderRadius","BorderRadiusMain","transition","TransitionDurationMain","color","fontColor","TypographyColorAction","itemSelectedBackgroundColor","HueBlue50","scrollToNode","node","scrollIntoView","behavior","block","inline","getBaseNavItemContentStyles","isDisabled","isActiveDropTarget","width","textDecoration","TypographyColorHeading","minHeight","paddingBlock","Spacing3","paddingInlineEnd","Spacing4","cursor","itemHoverBackgroundColor","HueNeutral50","fontWeight","TypographyWeightBodyBold","TypographyColorDisabled","itemDisabledFontColor","outline","boxShadow","focusRingColor","PalettePrimaryMain","getNavItemContentStyles","contextValue","paddingInlineStart","depth","Spacing6","isCompact","Spacing1","NavItemContentContainer","StyledNavItemLink","_Link2","SideNavItemContent","count","id","label","href","target","startIcon","severity","statusLabel","endIcon","onClick","scrollRef","onItemSelected","translate","uiShellContext","useUiShellContext","sidenavItemContentContext","useSideNavItemContent","useMemo","useOdysseyDesignTokens","setIsActiveDropTarget","useState","localScrollRef","useRef","useImperativeHandle","current","itemClickHandler","useCallback","event","sideNavItemContentKeyHandler","key","preventDefault","jsx","undefined","disabled","ref","onDragOver","onDragLeave","onDrop","children","SideNavItemLinkContent","onKeyDown","role","tabIndex","jsxs","className","ExternalLinkIcon","MemoizedSideNavItemContent","memo","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavItemContent.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport {\n KeyboardEventHandler,\n memo,\n MouseEventHandler,\n useCallback,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { Link as NavItemLink } from \"@mui/material\";\nimport {\n type DesignTokens,\n useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { SideNavItemLinkContent } from \"./SideNavItemLinkContent.js\";\nimport type { SideNavItem } from \"./types.js\";\nimport {\n SideNavItemContentContextValue,\n useSideNavItemContent,\n} from \"./SideNavItemContentContext.js\";\nimport { ExternalLinkIcon } from \"../../icons.generated/index.js\";\nimport {\n UiShellColors,\n useUiShellContext,\n} from \"../../ui-shell/UiShellProvider.js\";\n\nexport const StyledSideNavListItem = styled(\"li\", {\n shouldForwardProp: (prop) =>\n prop !== \"isSelected\" &&\n prop !== \"odysseyDesignTokens\" &&\n prop !== \"sideNavContrastColors\",\n})<{\n sideNavContrastColors?: UiShellColors[\"sideNavContrastColors\"];\n odysseyDesignTokens: DesignTokens;\n isSelected?: boolean;\n itemSelectedBackgroundColor?: string;\n disabled?: boolean;\n}>(({ isSelected, odysseyDesignTokens, sideNavContrastColors }) => ({\n display: \"flex\",\n alignItems: \"center\",\n backgroundColor: \"unset\",\n borderRadius: odysseyDesignTokens.BorderRadiusMain,\n transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,\n\n ...(isSelected && {\n color: sideNavContrastColors?.fontColor\n ? `${sideNavContrastColors.fontColor}`\n : `${odysseyDesignTokens.TypographyColorAction}`,\n backgroundColor:\n sideNavContrastColors?.itemSelectedBackgroundColor ||\n odysseyDesignTokens.HueBlue50,\n }),\n}));\n\nconst scrollToNode = (node: HTMLElement | null) => {\n if (node) {\n node?.scrollIntoView({\n behavior: \"instant\",\n block: \"center\",\n inline: \"nearest\",\n });\n }\n};\n\ntype ScrollIntoViewHandle = {\n scrollIntoView: () => void;\n};\n\nexport const getBaseNavItemContentStyles = ({\n isDisabled,\n isSelected,\n odysseyDesignTokens,\n sideNavContrastColors,\n isActiveDropTarget,\n}: {\n isSelected?: boolean;\n isDisabled?: boolean;\n odysseyDesignTokens: DesignTokens;\n sideNavContrastColors: UiShellColors[\"sideNavContrastColors\"];\n isActiveDropTarget: boolean;\n}) => ({\n display: \"flex\",\n alignItems: \"center\",\n width: \"100%\",\n textDecoration: \"none\",\n // !important needed here to override more specific base link styling\n color: sideNavContrastColors?.fontColor\n ? `${sideNavContrastColors?.fontColor} !important`\n : `${odysseyDesignTokens.TypographyColorHeading} !important`,\n minHeight: \"unset\",\n paddingBlock: odysseyDesignTokens.Spacing3,\n paddingInlineEnd: odysseyDesignTokens.Spacing4,\n borderRadius: odysseyDesignTokens.BorderRadiusMain,\n transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,\n cursor: \"pointer\",\n ...(isActiveDropTarget && {\n backgroundColor:\n sideNavContrastColors?.itemHoverBackgroundColor ||\n odysseyDesignTokens.HueNeutral50,\n }),\n\n // When hover or focus of the drag handle, apply general hover styles\n \"&:hover, li:has(> button:hover, > button:focus, > button:focus-visible) &\": {\n textDecoration: \"none\",\n backgroundColor:\n sideNavContrastColors?.itemHoverBackgroundColor ||\n odysseyDesignTokens.HueNeutral50,\n\n ...(isSelected && {\n backgroundColor:\n sideNavContrastColors?.itemSelectedBackgroundColor ||\n odysseyDesignTokens.HueBlue50,\n color:\n sideNavContrastColors?.fontColor ||\n odysseyDesignTokens.TypographyColorAction,\n }),\n\n ...(isDisabled && {\n backgroundColor: \"unset\",\n }),\n },\n\n ...(isSelected && {\n color: sideNavContrastColors?.fontColor\n ? `${sideNavContrastColors?.fontColor} !important`\n : `${odysseyDesignTokens.TypographyColorAction} !important`,\n fontWeight: odysseyDesignTokens.TypographyWeightBodyBold,\n }),\n\n ...(isDisabled && {\n cursor: \"default\",\n color: `${odysseyDesignTokens.TypographyColorDisabled} !important`,\n\n ...(sideNavContrastColors?.itemDisabledFontColor && {\n color: `${sideNavContrastColors?.itemDisabledFontColor} !important`,\n }),\n }),\n\n \"&:focus-visible\": {\n outline: \"none\",\n boxShadow: `inset 0 0 0 2px ${sideNavContrastColors?.focusRingColor || odysseyDesignTokens.PalettePrimaryMain}`,\n },\n});\n\nexport const getNavItemContentStyles = ({\n odysseyDesignTokens,\n contextValue,\n}: {\n odysseyDesignTokens: DesignTokens;\n contextValue: SideNavItemContentContextValue;\n}) => ({\n paddingInlineStart: `calc(${odysseyDesignTokens.Spacing4} * ${contextValue.depth} + ${odysseyDesignTokens.Spacing6})`,\n\n ...(contextValue.depth === 1 && {\n paddingInlineStart: odysseyDesignTokens.Spacing4,\n }),\n\n ...(contextValue.isCompact && {\n paddingBlock: odysseyDesignTokens.Spacing1,\n }),\n});\n\nconst NavItemContentContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" &&\n prop != \"contextValue\" &&\n prop !== \"isDisabled\" &&\n prop !== \"sideNavContrastColors\" &&\n prop !== \"isSelected\" &&\n prop !== \"isActiveDropTarget\",\n})<{\n contextValue: SideNavItemContentContextValue;\n odysseyDesignTokens: DesignTokens;\n sideNavContrastColors: UiShellColors[\"sideNavContrastColors\"];\n isSelected?: boolean;\n isDisabled?: boolean;\n isActiveDropTarget: boolean;\n}>(\n ({\n isDisabled,\n isSelected,\n contextValue,\n odysseyDesignTokens,\n sideNavContrastColors,\n isActiveDropTarget,\n }) => ({\n ...getBaseNavItemContentStyles({\n isDisabled,\n isSelected,\n odysseyDesignTokens,\n sideNavContrastColors,\n isActiveDropTarget,\n }),\n\n ...getNavItemContentStyles({\n odysseyDesignTokens,\n contextValue,\n }),\n }),\n);\n\nconst StyledNavItemLink = styled(NavItemLink, {\n shouldForwardProp: (prop) =>\n prop != \"contextValue\" &&\n prop !== \"isDisabled\" &&\n prop !== \"isSelected\" &&\n prop !== \"odysseyDesignTokens\" &&\n prop !== \"sideNavContrastColors\" &&\n prop !== \"isActiveDropTarget\",\n})<{\n contextValue: SideNavItemContentContextValue;\n odysseyDesignTokens: DesignTokens;\n sideNavContrastColors: UiShellColors[\"sideNavContrastColors\"];\n isSelected?: boolean;\n isDisabled?: boolean;\n isActiveDropTarget: boolean;\n}>(\n ({\n isDisabled,\n isSelected,\n contextValue,\n odysseyDesignTokens,\n sideNavContrastColors,\n isActiveDropTarget,\n }) => ({\n ...getBaseNavItemContentStyles({\n isDisabled,\n isSelected,\n odysseyDesignTokens,\n sideNavContrastColors,\n isActiveDropTarget,\n }),\n\n ...getNavItemContentStyles({\n odysseyDesignTokens,\n contextValue,\n }),\n }),\n);\n\nconst SideNavItemContent = ({\n count,\n id,\n label,\n href,\n target,\n startIcon,\n severity,\n statusLabel,\n endIcon,\n onClick,\n isDisabled,\n isSelected,\n scrollRef,\n onItemSelected,\n translate,\n}: Pick<\n SideNavItem,\n | \"count\"\n | \"id\"\n | \"label\"\n | \"href\"\n | \"target\"\n | \"startIcon\"\n | \"severity\"\n | \"statusLabel\"\n | \"endIcon\"\n | \"onClick\"\n | \"isDisabled\"\n | \"isSelected\"\n | \"translate\"\n> & {\n /**\n * The ref used to scroll to this item\n */\n scrollRef?: React.RefObject<ScrollIntoViewHandle>;\n onItemSelected?: (selectedItemId: string) => void;\n}) => {\n const uiShellContext = useUiShellContext();\n const sidenavItemContentContext = useSideNavItemContent();\n const contextValue = useMemo(\n () => sidenavItemContentContext,\n [sidenavItemContentContext],\n );\n\n const odysseyDesignTokens = useOdysseyDesignTokens();\n const [isActiveDropTarget, setIsActiveDropTarget] = useState(false);\n\n const localScrollRef = useRef<HTMLLIElement>(null);\n useImperativeHandle(scrollRef, () => {\n return {\n scrollIntoView: () => {\n scrollToNode(localScrollRef.current);\n },\n };\n }, []);\n\n const itemClickHandler = useCallback<\n MouseEventHandler<HTMLDivElement | HTMLAnchorElement>\n >(\n (event) => {\n onItemSelected?.(id);\n onClick?.(event);\n },\n [id, onClick, onItemSelected],\n );\n\n const sideNavItemContentKeyHandler = useCallback<\n KeyboardEventHandler<HTMLDivElement>\n >(\n (event) => {\n if (event?.key === \"Enter\") {\n event.preventDefault();\n onItemSelected?.(id);\n onClick?.(event);\n }\n },\n [id, onClick, onItemSelected],\n );\n\n return (\n <StyledSideNavListItem\n aria-disabled={isDisabled}\n aria-current={isSelected ? \"page\" : undefined}\n disabled={isDisabled}\n id={id}\n isSelected={isSelected}\n key={id}\n odysseyDesignTokens={odysseyDesignTokens}\n ref={localScrollRef}\n sideNavContrastColors={uiShellContext?.sideNavContrastColors}\n onDragOver={() => {\n setIsActiveDropTarget(true);\n }}\n onDragLeave={() => {\n setIsActiveDropTarget(false);\n }}\n onDrop={() => {\n setIsActiveDropTarget(false);\n }}\n >\n {\n // Use Link for nav items with links and div for disabled or non-link items\n isDisabled ? (\n <NavItemContentContainer\n contextValue={contextValue}\n isDisabled={isDisabled}\n isSelected={isSelected}\n odysseyDesignTokens={odysseyDesignTokens}\n sideNavContrastColors={uiShellContext?.sideNavContrastColors}\n isActiveDropTarget={false}\n >\n <SideNavItemLinkContent\n count={count}\n label={label}\n startIcon={startIcon}\n endIcon={endIcon}\n statusLabel={statusLabel}\n severity={severity}\n translate={translate}\n />\n </NavItemContentContainer>\n ) : !href ? (\n <NavItemContentContainer\n contextValue={contextValue}\n isDisabled={isDisabled}\n isSelected={isSelected}\n onClick={itemClickHandler}\n onKeyDown={sideNavItemContentKeyHandler}\n odysseyDesignTokens={odysseyDesignTokens}\n role=\"button\"\n sideNavContrastColors={uiShellContext?.sideNavContrastColors}\n tabIndex={0}\n isActiveDropTarget={isActiveDropTarget}\n >\n <SideNavItemLinkContent\n count={count}\n label={label}\n startIcon={startIcon}\n endIcon={endIcon}\n statusLabel={statusLabel}\n severity={severity}\n translate={translate}\n />\n </NavItemContentContainer>\n ) : (\n <StyledNavItemLink\n contextValue={contextValue}\n href={href}\n isDisabled={isDisabled}\n isSelected={isSelected}\n odysseyDesignTokens={odysseyDesignTokens}\n onClick={itemClickHandler}\n sideNavContrastColors={uiShellContext?.sideNavContrastColors}\n target={target}\n isActiveDropTarget={isActiveDropTarget}\n >\n <SideNavItemLinkContent\n count={count}\n label={label}\n startIcon={startIcon}\n endIcon={endIcon}\n statusLabel={statusLabel}\n severity={severity}\n translate={translate}\n />\n {target === \"_blank\" && (\n <span className=\"Link-indicator\" role=\"presentation\">\n <ExternalLinkIcon />\n </span>\n )}\n </StyledNavItemLink>\n )\n }\n </StyledSideNavListItem>\n );\n};\n\nconst MemoizedSideNavItemContent = memo(SideNavItemContent);\nMemoizedSideNavItemContent.displayName = \"SideNavItemContent\";\n\nexport { MemoizedSideNavItemContent as SideNavItemContent };\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"SideNavItemContent.cjs","names":["_styled","_interopRequireDefault","require","_react","_OdysseyDesignTokensContext","_SideNavItemLinkContent","_SideNavItemContentContext","_index","_UiShellProvider","_jsxRuntime","e","__esModule","default","StyledSideNavListItem","exports","styled","shouldForwardProp","prop","isSelected","odysseyDesignTokens","sideNavContrastColors","display","alignItems","backgroundColor","borderRadius","BorderRadiusMain","transition","TransitionDurationMain","color","fontColor","TypographyColorAction","itemSelectedBackgroundColor","HueBlue50","scrollToNode","node","scrollIntoView","behavior","block","inline","getBaseNavItemContentStyles","isDisabled","isActiveDropTarget","width","textDecoration","TypographyColorHeading","minHeight","paddingBlock","Spacing3","paddingInlineEnd","Spacing4","cursor","itemHoverBackgroundColor","HueNeutral50","fontWeight","TypographyWeightBodyBold","TypographyColorDisabled","itemDisabledFontColor","outline","boxShadow","focusRingColor","PalettePrimaryMain","getNavItemContentStyles","contextValue","paddingInlineStart","depth","Spacing6","isCompact","Spacing1","NavItemContentContainer","StyledNavItemLink","_Link2","SideNavItemContent","count","id","label","href","target","startIcon","severity","statusLabel","endIcon","onClick","scrollRef","onItemSelected","translate","uiShellContext","useUiShellContext","sidenavItemContentContext","useSideNavItemContent","useMemo","useOdysseyDesignTokens","setIsActiveDropTarget","useState","localScrollRef","useRef","useImperativeHandle","current","itemClickHandler","useCallback","event","sideNavItemContentKeyHandler","key","preventDefault","jsx","undefined","disabled","ref","onDragOver","onDragLeave","onDrop","children","SideNavItemLinkContent","onKeyDown","role","tabIndex","jsxs","className","ExternalLinkIcon","MemoizedSideNavItemContent","memo","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavItemContent.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport {\n KeyboardEventHandler,\n memo,\n MouseEventHandler,\n useCallback,\n useImperativeHandle,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { Link as NavItemLink } from \"@mui/material\";\nimport {\n type DesignTokens,\n useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { SideNavItemLinkContent } from \"./SideNavItemLinkContent.js\";\nimport type { SideNavItem } from \"./types.js\";\nimport {\n SideNavItemContentContextValue,\n useSideNavItemContent,\n} from \"./SideNavItemContentContext.js\";\nimport { ExternalLinkIcon } from \"../../icons.generated/index.js\";\nimport {\n UiShellColors,\n useUiShellContext,\n} from \"../../ui-shell/UiShellProvider.js\";\n\nexport const StyledSideNavListItem = styled(\"li\", {\n shouldForwardProp: (prop) =>\n prop !== \"isSelected\" &&\n prop !== \"odysseyDesignTokens\" &&\n prop !== \"sideNavContrastColors\",\n})<{\n sideNavContrastColors?: UiShellColors[\"sideNavContrastColors\"];\n odysseyDesignTokens: DesignTokens;\n isSelected?: boolean;\n itemSelectedBackgroundColor?: string;\n disabled?: boolean;\n}>(({ isSelected, odysseyDesignTokens, sideNavContrastColors }) => ({\n display: \"flex\",\n alignItems: \"center\",\n backgroundColor: \"unset\",\n borderRadius: odysseyDesignTokens.BorderRadiusMain,\n transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,\n\n ...(isSelected && {\n color: sideNavContrastColors?.fontColor\n ? `${sideNavContrastColors.fontColor}`\n : `${odysseyDesignTokens.TypographyColorAction}`,\n backgroundColor:\n sideNavContrastColors?.itemSelectedBackgroundColor ||\n odysseyDesignTokens.HueBlue50,\n }),\n}));\n\nconst scrollToNode = (node: HTMLElement | null) => {\n if (node) {\n node?.scrollIntoView({\n behavior: \"instant\",\n block: \"center\",\n inline: \"nearest\",\n });\n }\n};\n\ntype ScrollIntoViewHandle = {\n scrollIntoView: () => void;\n};\n\nexport const getBaseNavItemContentStyles = ({\n isDisabled,\n isSelected,\n odysseyDesignTokens,\n sideNavContrastColors,\n isActiveDropTarget,\n}: {\n isSelected?: boolean;\n isDisabled?: boolean;\n odysseyDesignTokens: DesignTokens;\n sideNavContrastColors: UiShellColors[\"sideNavContrastColors\"];\n isActiveDropTarget: boolean;\n}) => ({\n display: \"flex\",\n alignItems: \"center\",\n width: \"100%\",\n textDecoration: \"none\",\n // !important needed here to override more specific base link styling\n color: sideNavContrastColors?.fontColor\n ? `${sideNavContrastColors?.fontColor} !important`\n : `${odysseyDesignTokens.TypographyColorHeading} !important`,\n minHeight: \"unset\",\n paddingBlock: odysseyDesignTokens.Spacing3,\n paddingInlineEnd: odysseyDesignTokens.Spacing4,\n borderRadius: odysseyDesignTokens.BorderRadiusMain,\n transition: `backgroundColor ${odysseyDesignTokens.TransitionDurationMain}, color ${odysseyDesignTokens.TransitionDurationMain}`,\n cursor: \"pointer\",\n ...(isActiveDropTarget && {\n backgroundColor:\n sideNavContrastColors?.itemHoverBackgroundColor ||\n odysseyDesignTokens.HueNeutral50,\n }),\n\n // When hover or focus of the drag handle, apply general hover styles\n \"&:hover, li:has(> button:hover, > button:focus, > button:focus-visible) &\": {\n textDecoration: \"none\",\n backgroundColor:\n sideNavContrastColors?.itemHoverBackgroundColor ||\n odysseyDesignTokens.HueNeutral50,\n\n ...(isSelected && {\n backgroundColor:\n sideNavContrastColors?.itemSelectedBackgroundColor ||\n odysseyDesignTokens.HueBlue50,\n color:\n sideNavContrastColors?.fontColor ||\n odysseyDesignTokens.TypographyColorAction,\n }),\n\n ...(isDisabled && {\n backgroundColor: \"unset\",\n }),\n },\n\n ...(isSelected && {\n color: sideNavContrastColors?.fontColor\n ? `${sideNavContrastColors?.fontColor} !important`\n : `${odysseyDesignTokens.TypographyColorAction} !important`,\n fontWeight: odysseyDesignTokens.TypographyWeightBodyBold,\n }),\n\n ...(isDisabled && {\n cursor: \"default\",\n color: `${odysseyDesignTokens.TypographyColorDisabled} !important`,\n\n ...(sideNavContrastColors?.itemDisabledFontColor && {\n color: `${sideNavContrastColors?.itemDisabledFontColor} !important`,\n }),\n }),\n\n \"&:focus-visible\": {\n outline: \"none\",\n boxShadow: `inset 0 0 0 2px ${sideNavContrastColors?.focusRingColor || odysseyDesignTokens.PalettePrimaryMain}`,\n },\n});\n\nexport const getNavItemContentStyles = ({\n odysseyDesignTokens,\n contextValue,\n}: {\n odysseyDesignTokens: DesignTokens;\n contextValue: SideNavItemContentContextValue;\n}) => ({\n paddingInlineStart: `calc(${odysseyDesignTokens.Spacing4} * ${contextValue.depth} + ${odysseyDesignTokens.Spacing6})`,\n\n ...(contextValue.depth === 1 && {\n paddingInlineStart: odysseyDesignTokens.Spacing4,\n }),\n\n ...(contextValue.isCompact && {\n paddingBlock: odysseyDesignTokens.Spacing1,\n }),\n});\n\nconst NavItemContentContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" &&\n prop != \"contextValue\" &&\n prop !== \"isDisabled\" &&\n prop !== \"sideNavContrastColors\" &&\n prop !== \"isSelected\" &&\n prop !== \"isActiveDropTarget\",\n})<{\n contextValue: SideNavItemContentContextValue;\n odysseyDesignTokens: DesignTokens;\n sideNavContrastColors: UiShellColors[\"sideNavContrastColors\"];\n isSelected?: boolean;\n isDisabled?: boolean;\n isActiveDropTarget: boolean;\n}>(\n ({\n isDisabled,\n isSelected,\n contextValue,\n odysseyDesignTokens,\n sideNavContrastColors,\n isActiveDropTarget,\n }) => ({\n ...getBaseNavItemContentStyles({\n isDisabled,\n isSelected,\n odysseyDesignTokens,\n sideNavContrastColors,\n isActiveDropTarget,\n }),\n\n ...getNavItemContentStyles({\n odysseyDesignTokens,\n contextValue,\n }),\n }),\n);\n\nconst StyledNavItemLink = styled(NavItemLink, {\n shouldForwardProp: (prop) =>\n prop != \"contextValue\" &&\n prop !== \"isDisabled\" &&\n prop !== \"isSelected\" &&\n prop !== \"odysseyDesignTokens\" &&\n prop !== \"sideNavContrastColors\" &&\n prop !== \"isActiveDropTarget\",\n})<{\n contextValue: SideNavItemContentContextValue;\n odysseyDesignTokens: DesignTokens;\n sideNavContrastColors: UiShellColors[\"sideNavContrastColors\"];\n isSelected?: boolean;\n isDisabled?: boolean;\n isActiveDropTarget: boolean;\n}>(\n ({\n isDisabled,\n isSelected,\n contextValue,\n odysseyDesignTokens,\n sideNavContrastColors,\n isActiveDropTarget,\n }) => ({\n ...getBaseNavItemContentStyles({\n isDisabled,\n isSelected,\n odysseyDesignTokens,\n sideNavContrastColors,\n isActiveDropTarget,\n }),\n\n ...getNavItemContentStyles({\n odysseyDesignTokens,\n contextValue,\n }),\n }),\n);\n\nconst SideNavItemContent = ({\n count,\n id,\n label,\n href,\n target,\n startIcon,\n severity,\n statusLabel,\n endIcon,\n onClick,\n isDisabled,\n isSelected,\n scrollRef,\n onItemSelected,\n translate,\n}: Pick<\n SideNavItem,\n | \"count\"\n | \"id\"\n | \"label\"\n | \"href\"\n | \"target\"\n | \"startIcon\"\n | \"severity\"\n | \"statusLabel\"\n | \"endIcon\"\n | \"onClick\"\n | \"isDisabled\"\n | \"isSelected\"\n | \"translate\"\n> & {\n /**\n * The ref used to scroll to this item\n */\n scrollRef?: React.RefObject<ScrollIntoViewHandle>;\n onItemSelected?: (selectedItemId: string) => void;\n}) => {\n const uiShellContext = useUiShellContext();\n const sidenavItemContentContext = useSideNavItemContent();\n const contextValue = useMemo(\n () => sidenavItemContentContext,\n [sidenavItemContentContext],\n );\n\n const odysseyDesignTokens = useOdysseyDesignTokens();\n const [isActiveDropTarget, setIsActiveDropTarget] = useState(false);\n\n const localScrollRef = useRef<HTMLLIElement>(null);\n useImperativeHandle(scrollRef, () => {\n return {\n scrollIntoView: () => {\n scrollToNode(localScrollRef.current);\n },\n };\n }, []);\n\n const itemClickHandler = useCallback<\n MouseEventHandler<HTMLDivElement | HTMLAnchorElement>\n >(\n (event) => {\n onItemSelected?.(id);\n onClick?.(event);\n },\n [id, onClick, onItemSelected],\n );\n\n const sideNavItemContentKeyHandler = useCallback<\n KeyboardEventHandler<HTMLDivElement>\n >(\n (event) => {\n if (event?.key === \"Enter\") {\n event.preventDefault();\n onItemSelected?.(id);\n onClick?.(event);\n }\n },\n [id, onClick, onItemSelected],\n );\n\n return (\n <StyledSideNavListItem\n aria-disabled={isDisabled}\n aria-current={isSelected ? \"page\" : undefined}\n disabled={isDisabled}\n id={id}\n isSelected={isSelected}\n key={id}\n odysseyDesignTokens={odysseyDesignTokens}\n ref={localScrollRef}\n sideNavContrastColors={uiShellContext?.sideNavContrastColors}\n onDragOver={() => {\n setIsActiveDropTarget(true);\n }}\n onDragLeave={() => {\n setIsActiveDropTarget(false);\n }}\n onDrop={() => {\n setIsActiveDropTarget(false);\n }}\n >\n {\n // Use Link for nav items with links and div for disabled or non-link items\n isDisabled ? (\n <NavItemContentContainer\n contextValue={contextValue}\n isDisabled={isDisabled}\n isSelected={isSelected}\n odysseyDesignTokens={odysseyDesignTokens}\n sideNavContrastColors={uiShellContext?.sideNavContrastColors}\n isActiveDropTarget={false}\n data-se=\"tb--sidenav-text-container\"\n >\n <SideNavItemLinkContent\n count={count}\n label={label}\n startIcon={startIcon}\n endIcon={endIcon}\n statusLabel={statusLabel}\n severity={severity}\n translate={translate}\n />\n </NavItemContentContainer>\n ) : !href ? (\n <NavItemContentContainer\n contextValue={contextValue}\n isDisabled={isDisabled}\n isSelected={isSelected}\n onClick={itemClickHandler}\n onKeyDown={sideNavItemContentKeyHandler}\n odysseyDesignTokens={odysseyDesignTokens}\n role=\"button\"\n sideNavContrastColors={uiShellContext?.sideNavContrastColors}\n tabIndex={0}\n isActiveDropTarget={isActiveDropTarget}\n data-se=\"tb--sidenav-text-container\"\n >\n <SideNavItemLinkContent\n count={count}\n label={label}\n startIcon={startIcon}\n endIcon={endIcon}\n statusLabel={statusLabel}\n severity={severity}\n translate={translate}\n />\n </NavItemContentContainer>\n ) : (\n <StyledNavItemLink\n contextValue={contextValue}\n href={href}\n isDisabled={isDisabled}\n isSelected={isSelected}\n odysseyDesignTokens={odysseyDesignTokens}\n onClick={itemClickHandler}\n sideNavContrastColors={uiShellContext?.sideNavContrastColors}\n target={target}\n isActiveDropTarget={isActiveDropTarget}\n data-se=\"tb--sidenav-text-container\"\n >\n <SideNavItemLinkContent\n count={count}\n label={label}\n startIcon={startIcon}\n endIcon={endIcon}\n statusLabel={statusLabel}\n severity={severity}\n translate={translate}\n />\n {target === \"_blank\" && (\n <span className=\"Link-indicator\" role=\"presentation\">\n <ExternalLinkIcon />\n </span>\n )}\n </StyledNavItemLink>\n )\n }\n </StyledSideNavListItem>\n );\n};\n\nconst MemoizedSideNavItemContent = memo(SideNavItemContent);\nMemoizedSideNavItemContent.displayName = \"SideNavItemContent\";\n\nexport { MemoizedSideNavItemContent as SideNavItemContent };\n"],"mappings":"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","ignoreList":[]}
@@ -26,22 +26,22 @@ const StyledLogoContainer = (0, _styled.default)("div", {
26
26
  })(({
27
27
  isLogoInteractive
28
28
  }) => ({
29
- display: "flex",
30
29
  alignItems: "center",
30
+ display: "flex",
31
31
  height: "100%",
32
32
  ...(isLogoInteractive && {
33
33
  cursor: "pointer"
34
34
  })
35
35
  }));
36
36
  const StyledLogoLink = (0, _styled.default)("a")(() => ({
37
- display: "flex",
38
37
  alignItems: "center",
38
+ display: "flex",
39
39
  height: "100%"
40
40
  }));
41
41
  const SideNavLogo = ({
42
42
  imageAltText,
43
- logoComponent,
44
43
  imageUrl,
44
+ logoComponent,
45
45
  ...optionalProps
46
46
  }) => {
47
47
  const logo = (0, _react.useMemo)(() => {
@@ -63,11 +63,11 @@ const SideNavLogo = ({
63
63
  onClick: optionalProps.onClick,
64
64
  children: logo
65
65
  }) : (0, _jsxRuntime.jsx)(StyledLogoContainer, {
66
- role: "presentation",
67
66
  "aria-label": optionalProps.ariaLabel,
68
67
  "data-se": "sidenav-header-logo",
69
- onClick: optionalProps.onClick,
70
68
  isLogoInteractive: Boolean(optionalProps.onClick) || optionalProps.href,
69
+ onClick: optionalProps.onClick,
70
+ role: "presentation",
71
71
  children: logo
72
72
  });
73
73
  };
@@ -1 +1 @@
1
- {"version":3,"file":"SideNavLogo.cjs","names":["_react","require","_styled","_interopRequireDefault","_OktaLogo","_jsxRuntime","e","__esModule","default","StyledLogoContainer","styled","shouldForwardProp","prop","isLogoInteractive","display","alignItems","height","cursor","StyledLogoLink","SideNavLogo","imageAltText","logoComponent","imageUrl","optionalProps","logo","useMemo","jsx","src","alt","OktaLogo","ariaLabel","href","onClick","children","role","Boolean","MemoizedSideNavLogo","exports","memo","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavLogo.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, useMemo } from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport { OktaLogo } from \"./OktaLogo.js\";\nimport { SideNavLogoProps } from \"./types.js\";\n\nconst StyledLogoContainer = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"isLogoInteractive\",\n})<{\n isLogoInteractive?: boolean;\n}>(({ isLogoInteractive }) => ({\n display: \"flex\",\n alignItems: \"center\",\n height: \"100%\",\n ...(isLogoInteractive && {\n cursor: \"pointer\",\n }),\n}));\n\nconst StyledLogoLink = styled(\"a\")(() => ({\n display: \"flex\",\n alignItems: \"center\",\n height: \"100%\",\n}));\n\nconst SideNavLogo = ({\n imageAltText,\n logoComponent,\n imageUrl,\n ...optionalProps\n}: SideNavLogoProps) => {\n const logo = useMemo(() => {\n if (logoComponent) {\n return logoComponent;\n }\n\n if (imageAltText && imageUrl) {\n return <img src={imageUrl} alt={imageAltText} />;\n }\n\n return <OktaLogo />;\n }, [imageAltText, logoComponent, imageUrl]);\n\n return \"href\" in optionalProps && \"ariaLabel\" in optionalProps ? (\n <StyledLogoLink\n aria-label={optionalProps.ariaLabel}\n data-se=\"sidenav-header-logo\"\n href={optionalProps.href}\n onClick={optionalProps.onClick}\n >\n {logo}\n </StyledLogoLink>\n ) : (\n <StyledLogoContainer\n role=\"presentation\"\n aria-label={optionalProps.ariaLabel}\n data-se=\"sidenav-header-logo\"\n onClick={optionalProps.onClick}\n isLogoInteractive={Boolean(optionalProps.onClick) || optionalProps.href}\n >\n {logo}\n </StyledLogoContainer>\n );\n};\n\nconst MemoizedSideNavLogo = memo(SideNavLogo);\nMemoizedSideNavLogo.displayName = \"SideNavLogo\";\n\nexport { MemoizedSideNavLogo as SideNavLogo };\n"],"mappings":";;;;;;AAYA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,SAAA,GAAAH,OAAA;AAAyC,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAfzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAQA,MAAMG,mBAAmB,GAAG,IAAAC,eAAM,EAAC,KAAK,EAAE;EACxCC,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAEC,CAAC;EAAEC;AAAkB,CAAC,MAAM;EAC7BC,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,QAAQ;EACpBC,MAAM,EAAE,MAAM;EACd,IAAIH,iBAAiB,IAAI;IACvBI,MAAM,EAAE;EACV,CAAC;AACH,CAAC,CAAC,CAAC;AAEH,MAAMC,cAAc,GAAG,IAAAR,eAAM,EAAC,GAAG,CAAC,CAAC,OAAO;EACxCI,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,QAAQ;EACpBC,MAAM,EAAE;AACV,CAAC,CAAC,CAAC;AAEH,MAAMG,WAAW,GAAGA,CAAC;EACnBC,YAAY;EACZC,aAAa;EACbC,QAAQ;EACR,GAAGC;AACa,CAAC,KAAK;EACtB,MAAMC,IAAI,GAAG,IAAAC,cAAO,EAAC,MAAM;IACzB,IAAIJ,aAAa,EAAE;MACjB,OAAOA,aAAa;IACtB;IAEA,IAAID,YAAY,IAAIE,QAAQ,EAAE;MAC5B,OAAO,IAAAjB,WAAA,CAAAqB,GAAA;QAAKC,GAAG,EAAEL,QAAS;QAACM,GAAG,EAAER;MAAa,CAAE,CAAC;IAClD;IAEA,OAAO,IAAAf,WAAA,CAAAqB,GAAA,EAACtB,SAAA,CAAAyB,QAAQ,IAAE,CAAC;EACrB,CAAC,EAAE,CAACT,YAAY,EAAEC,aAAa,EAAEC,QAAQ,CAAC,CAAC;EAE3C,OAAO,MAAM,IAAIC,aAAa,IAAI,WAAW,IAAIA,aAAa,GAC5D,IAAAlB,WAAA,CAAAqB,GAAA,EAACR,cAAc;IACb,cAAYK,aAAa,CAACO,SAAU;IACpC,WAAQ,qBAAqB;IAC7BC,IAAI,EAAER,aAAa,CAACQ,IAAK;IACzBC,OAAO,EAAET,aAAa,CAACS,OAAQ;IAAAC,QAAA,EAE9BT;EAAI,CACS,CAAC,GAEjB,IAAAnB,WAAA,CAAAqB,GAAA,EAACjB,mBAAmB;IAClByB,IAAI,EAAC,cAAc;IACnB,cAAYX,aAAa,CAACO,SAAU;IACpC,WAAQ,qBAAqB;IAC7BE,OAAO,EAAET,aAAa,CAACS,OAAQ;IAC/BnB,iBAAiB,EAAEsB,OAAO,CAACZ,aAAa,CAACS,OAAO,CAAC,IAAIT,aAAa,CAACQ,IAAK;IAAAE,QAAA,EAEvET;EAAI,CACc,CACtB;AACH,CAAC;AAED,MAAMY,mBAAmB,GAAAC,OAAA,CAAAlB,WAAA,GAAG,IAAAmB,WAAI,EAACnB,WAAW,CAAC;AAC7CiB,mBAAmB,CAACG,WAAW,GAAG,aAAa","ignoreList":[]}
1
+ {"version":3,"file":"SideNavLogo.cjs","names":["_react","require","_styled","_interopRequireDefault","_OktaLogo","_jsxRuntime","e","__esModule","default","StyledLogoContainer","styled","shouldForwardProp","prop","isLogoInteractive","alignItems","display","height","cursor","StyledLogoLink","SideNavLogo","imageAltText","imageUrl","logoComponent","optionalProps","logo","useMemo","jsx","src","alt","OktaLogo","ariaLabel","href","onClick","children","Boolean","role","MemoizedSideNavLogo","exports","memo","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavLogo.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, useMemo } from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport { OktaLogo } from \"./OktaLogo.js\";\nimport { SideNavLogoProps } from \"./types.js\";\n\nconst StyledLogoContainer = styled(\"div\", {\n shouldForwardProp: (prop) => prop !== \"isLogoInteractive\",\n})<{\n isLogoInteractive?: boolean;\n}>(({ isLogoInteractive }) => ({\n alignItems: \"center\",\n display: \"flex\",\n height: \"100%\",\n\n ...(isLogoInteractive && {\n cursor: \"pointer\",\n }),\n}));\n\nconst StyledLogoLink = styled(\"a\")(() => ({\n alignItems: \"center\",\n display: \"flex\",\n height: \"100%\",\n}));\n\nconst SideNavLogo = ({\n imageAltText,\n imageUrl,\n logoComponent,\n ...optionalProps\n}: SideNavLogoProps) => {\n const logo = useMemo(() => {\n if (logoComponent) {\n return logoComponent;\n }\n\n if (imageAltText && imageUrl) {\n return <img src={imageUrl} alt={imageAltText} />;\n }\n\n return <OktaLogo />;\n }, [imageAltText, logoComponent, imageUrl]);\n\n return \"href\" in optionalProps && \"ariaLabel\" in optionalProps ? (\n <StyledLogoLink\n aria-label={optionalProps.ariaLabel}\n data-se=\"sidenav-header-logo\"\n href={optionalProps.href}\n onClick={optionalProps.onClick}\n >\n {logo}\n </StyledLogoLink>\n ) : (\n <StyledLogoContainer\n aria-label={optionalProps.ariaLabel}\n data-se=\"sidenav-header-logo\"\n isLogoInteractive={Boolean(optionalProps.onClick) || optionalProps.href}\n onClick={optionalProps.onClick}\n role=\"presentation\"\n >\n {logo}\n </StyledLogoContainer>\n );\n};\n\nconst MemoizedSideNavLogo = memo(SideNavLogo);\nMemoizedSideNavLogo.displayName = \"SideNavLogo\";\n\nexport { MemoizedSideNavLogo as SideNavLogo };\n"],"mappings":";;;;;;AAYA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,SAAA,GAAAH,OAAA;AAAyC,IAAAI,WAAA,GAAAJ,OAAA;AAAA,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAfzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAQA,MAAMG,mBAAmB,GAAG,IAAAC,eAAM,EAAC,KAAK,EAAE;EACxCC,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAEC,CAAC;EAAEC;AAAkB,CAAC,MAAM;EAC7BC,UAAU,EAAE,QAAQ;EACpBC,OAAO,EAAE,MAAM;EACfC,MAAM,EAAE,MAAM;EAEd,IAAIH,iBAAiB,IAAI;IACvBI,MAAM,EAAE;EACV,CAAC;AACH,CAAC,CAAC,CAAC;AAEH,MAAMC,cAAc,GAAG,IAAAR,eAAM,EAAC,GAAG,CAAC,CAAC,OAAO;EACxCI,UAAU,EAAE,QAAQ;EACpBC,OAAO,EAAE,MAAM;EACfC,MAAM,EAAE;AACV,CAAC,CAAC,CAAC;AAEH,MAAMG,WAAW,GAAGA,CAAC;EACnBC,YAAY;EACZC,QAAQ;EACRC,aAAa;EACb,GAAGC;AACa,CAAC,KAAK;EACtB,MAAMC,IAAI,GAAG,IAAAC,cAAO,EAAC,MAAM;IACzB,IAAIH,aAAa,EAAE;MACjB,OAAOA,aAAa;IACtB;IAEA,IAAIF,YAAY,IAAIC,QAAQ,EAAE;MAC5B,OAAO,IAAAhB,WAAA,CAAAqB,GAAA;QAAKC,GAAG,EAAEN,QAAS;QAACO,GAAG,EAAER;MAAa,CAAE,CAAC;IAClD;IAEA,OAAO,IAAAf,WAAA,CAAAqB,GAAA,EAACtB,SAAA,CAAAyB,QAAQ,IAAE,CAAC;EACrB,CAAC,EAAE,CAACT,YAAY,EAAEE,aAAa,EAAED,QAAQ,CAAC,CAAC;EAE3C,OAAO,MAAM,IAAIE,aAAa,IAAI,WAAW,IAAIA,aAAa,GAC5D,IAAAlB,WAAA,CAAAqB,GAAA,EAACR,cAAc;IACb,cAAYK,aAAa,CAACO,SAAU;IACpC,WAAQ,qBAAqB;IAC7BC,IAAI,EAAER,aAAa,CAACQ,IAAK;IACzBC,OAAO,EAAET,aAAa,CAACS,OAAQ;IAAAC,QAAA,EAE9BT;EAAI,CACS,CAAC,GAEjB,IAAAnB,WAAA,CAAAqB,GAAA,EAACjB,mBAAmB;IAClB,cAAYc,aAAa,CAACO,SAAU;IACpC,WAAQ,qBAAqB;IAC7BjB,iBAAiB,EAAEqB,OAAO,CAACX,aAAa,CAACS,OAAO,CAAC,IAAIT,aAAa,CAACQ,IAAK;IACxEC,OAAO,EAAET,aAAa,CAACS,OAAQ;IAC/BG,IAAI,EAAC,cAAc;IAAAF,QAAA,EAElBT;EAAI,CACc,CACtB;AACH,CAAC;AAED,MAAMY,mBAAmB,GAAAC,OAAA,CAAAlB,WAAA,GAAG,IAAAmB,WAAI,EAACnB,WAAW,CAAC;AAC7CiB,mBAAmB,CAACG,WAAW,GAAG,aAAa","ignoreList":[]}
@@ -13,6 +13,7 @@ var _MuiPropsContext = require("../../MuiPropsContext.cjs");
13
13
  var _OdysseyDesignTokensContext = require("../../OdysseyDesignTokensContext.cjs");
14
14
  var _Tooltip = require("../../Tooltip.cjs");
15
15
  var _UiShellProvider = require("../../ui-shell/UiShellProvider.cjs");
16
+ var _uiShellSharedConstants = require("../uiShellSharedConstants.cjs");
16
17
  var _jsxRuntime = require("react/jsx-runtime");
17
18
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
18
19
  /*!
@@ -39,7 +40,7 @@ const StyledToggleButton = (0, _styled.default)(_Button2.default, {
39
40
  width: odysseyDesignTokens.Spacing6,
40
41
  height: odysseyDesignTokens.Spacing6,
41
42
  border: 0,
42
- zIndex: 200,
43
+ zIndex: _uiShellSharedConstants.UI_SHELL_OVERLAY_Z_INDEX,
43
44
  "&:focus-visible": {
44
45
  boxShadow: `inset 0 0 0 2px ${odysseyDesignTokens.PalettePrimaryMain}`,
45
46
  outline: "none"
@@ -1 +1 @@
1
- {"version":3,"file":"SideNavToggleButton.cjs","names":["_react","require","_styled","_interopRequireDefault","_reactI18next","_createContrastColors","_MuiPropsContext","_OdysseyDesignTokensContext","_Tooltip","_UiShellProvider","_jsxRuntime","e","__esModule","default","StyledToggleButton","styled","_Button2","shouldForwardProp","prop","isSideNavCollapsed","odysseyDesignTokens","toggleContrastColors","backgroundColor","position","width","Spacing6","height","border","zIndex","boxShadow","PalettePrimaryMain","outline","animation","TransitionDurationMain","animationFillMode","transform","span","top","left","Spacing4","HueNeutral600","transition","fontColor","SideNavToggleButton","ariaControls","buttonRef","id","onClick","tabIndex","useOdysseyDesignTokens","t","useTranslation","uiShellContext","useUiShellContext","localButtonRef","useRef","useMemo","hasNonStandardAppBackgroundColor","appBackgroundColor","HueNeutralWhite","HueNeutral50","generateContrastColors","undefined","useImperativeHandle","focus","current","toggleLabel","renderButton","useCallback","muiProps","jsxs","ref","element","variant","children","jsx","Tooltip","ariaType","placement","text","MuiPropsContext","Consumer","MemoizedSideNavToggleButton","exports","memo","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavToggleButton.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 { Button as MuiButton } from \"@mui/material\";\nimport type { ButtonProps as MuiButtonProps } from \"@mui/material\";\nimport {\n HTMLAttributes,\n memo,\n useCallback,\n useImperativeHandle,\n useMemo,\n useRef,\n} from \"react\";\nimport styled from \"@emotion/styled\";\nimport { useTranslation } from \"react-i18next\";\n\nimport {\n ContrastColors,\n generateContrastColors,\n} from \"../../createContrastColors.js\";\nimport { FocusHandle } from \"../../inputUtils.js\";\nimport { MuiPropsContext, MuiPropsContextType } from \"../../MuiPropsContext.js\";\nimport {\n DesignTokens,\n useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { Tooltip } from \"../../Tooltip.js\";\nimport { useUiShellContext } from \"../../ui-shell/UiShellProvider.js\";\n\nconst StyledToggleButton = styled(MuiButton, {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" &&\n prop !== \"isSideNavCollapsed\" &&\n prop !== \"toggleContrastColors\",\n})<{\n isSideNavCollapsed: boolean;\n odysseyDesignTokens: DesignTokens;\n toggleContrastColors?: ContrastColors;\n}>(({ isSideNavCollapsed, odysseyDesignTokens, toggleContrastColors }) => ({\n backgroundColor: \"transparent\",\n position: \"relative\",\n width: odysseyDesignTokens.Spacing6,\n height: odysseyDesignTokens.Spacing6,\n border: 0,\n zIndex: 200,\n\n \"&:focus-visible\": {\n boxShadow: `inset 0 0 0 2px ${odysseyDesignTokens.PalettePrimaryMain}`,\n outline: \"none\",\n },\n\n \"&:hover, &:focus-visible\": {\n backgroundColor: \"transparent\",\n\n \"#lineOne\": {\n animation: `lineOne-animate-to-collapse ${odysseyDesignTokens.TransitionDurationMain} cubic-bezier(0, 0, 0.2, 1)`,\n animationFillMode: \"forwards\",\n \"@keyframes lineOne-animate-to-collapse\": {\n \"0%\": {\n transform: \"translate3d(-50%, -50%, 0)\",\n },\n \"50%\": {\n transform: \"translate3d(-50%, -50%, 0) rotate(-90deg) scaleY(.75)\",\n },\n \"100%\": {\n transform: \"translate3d(-50%, -27%, 0) rotate(-45deg) scaleY(.75)\",\n },\n },\n },\n\n \"#lineTwo\": {\n animation: `lineTwo-animate-to-collapse ${odysseyDesignTokens.TransitionDurationMain} cubic-bezier(0, 0, 0.2, 1)`,\n animationFillMode: \"forwards\",\n \"@keyframes lineTwo-animate-to-collapse\": {\n \"0%\": {\n transform: \"translate3d(-50%, -50%, 0)\",\n },\n \"50%\": {\n transform: \"translate3d(-50%, -50%, 0) rotate(-90deg) scaleY(.75)\",\n },\n \"100%\": {\n transform: \"translate3d(-50%, -73%, 0) rotate(-135deg) scaleY(.75)\",\n },\n },\n },\n\n ...(isSideNavCollapsed && {\n \"#lineOne\": {\n animation: `lineOne-animate-to-expand ${odysseyDesignTokens.TransitionDurationMain} cubic-bezier(0, 0, 0.2, 1)`,\n animationFillMode: \"forwards\",\n \"@keyframes lineOne-animate-to-expand\": {\n \"0%\": {\n transform: \"translate3d(-50%, -50%, 0)\",\n },\n \"50%\": {\n transform: \"translate3d(-50%, -50%, 0) rotate(90deg) scaleY(.75)\",\n },\n \"100%\": {\n transform: \"translate3d(-50%, -73%, 0) rotate(135deg) scaleY(.75)\",\n },\n },\n },\n\n \"#lineTwo\": {\n animation: `lineTwo-animate-to-expand ${odysseyDesignTokens.TransitionDurationMain} cubic-bezier(0, 0, 0.2, 1)`,\n animationFillMode: \"forwards\",\n \"@keyframes lineTwo-animate-to-expand\": {\n \"0%\": {\n transform: \"translate3d(-50%, -50%, 0)\",\n },\n \"50%\": {\n transform: \"translate3d(-50%, -50%, 0) rotate(90deg) scaleY(.75)\",\n },\n \"100%\": {\n transform: \"translate3d(-50%, -27%, 0) rotate(45deg) scaleY(.75)\",\n },\n },\n },\n }),\n },\n\n span: {\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n width: \"2px\",\n height: odysseyDesignTokens.Spacing4,\n backgroundColor: odysseyDesignTokens.HueNeutral600,\n transform: \"translate3d(-50%, -50%, 0)\",\n transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,\n\n ...(toggleContrastColors?.fontColor && {\n backgroundColor: toggleContrastColors.fontColor,\n }),\n },\n}));\n\nexport type SideNavToggleButtonProps = {\n /**\n * The ref forwarded to the Button\n */\n buttonRef?: React.RefObject<FocusHandle>;\n /**\n * The `id` of the item this button controls\n */\n ariaControls: string;\n /**\n * The ID of the Button\n */\n id?: string;\n isSideNavCollapsed: boolean;\n tabIndex?: HTMLAttributes<HTMLElement>[\"tabIndex\"];\n /**\n * The click event handler for the Button\n */\n onClick?: MuiButtonProps[\"onClick\"];\n onKeyDown?: MuiButtonProps[\"onKeyDown\"];\n};\n\nconst SideNavToggleButton = ({\n ariaControls,\n buttonRef,\n id,\n isSideNavCollapsed,\n onClick,\n tabIndex,\n}: SideNavToggleButtonProps) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n const { t } = useTranslation();\n const uiShellContext = useUiShellContext();\n\n const localButtonRef = useRef<HTMLButtonElement | HTMLAnchorElement>(null);\n\n const toggleContrastColors = useMemo(() => {\n const hasNonStandardAppBackgroundColor =\n uiShellContext?.appBackgroundColor &&\n uiShellContext?.appBackgroundColor !==\n odysseyDesignTokens.HueNeutralWhite &&\n uiShellContext?.appBackgroundColor !== odysseyDesignTokens.HueNeutral50;\n\n if (hasNonStandardAppBackgroundColor) {\n return generateContrastColors(\n uiShellContext.appBackgroundColor,\n odysseyDesignTokens,\n );\n }\n\n return undefined;\n }, [odysseyDesignTokens, uiShellContext]);\n\n useImperativeHandle(\n buttonRef,\n () => ({\n focus: () => {\n localButtonRef.current?.focus();\n },\n }),\n [],\n );\n\n const toggleLabel = useMemo(\n () =>\n isSideNavCollapsed\n ? t(\"sidenav.toggle.expand\")\n : t(\"sidenav.toggle.collapse\"),\n [isSideNavCollapsed, t],\n );\n\n const renderButton = useCallback(\n (muiProps: MuiPropsContextType) => {\n return (\n <StyledToggleButton\n {...muiProps}\n aria-controls={ariaControls}\n aria-expanded={!isSideNavCollapsed}\n aria-label={toggleLabel}\n data-se=\"sidenav-toggle-button\"\n data-sidenav-toggle={true}\n id={id}\n isSideNavCollapsed={isSideNavCollapsed}\n odysseyDesignTokens={odysseyDesignTokens}\n onClick={onClick}\n ref={(element) => {\n if (element) {\n (\n localButtonRef as React.MutableRefObject<HTMLButtonElement>\n ).current = element;\n //@ts-expect-error ref is not an optional prop on the props context type\n muiProps?.ref?.(element);\n }\n }}\n tabIndex={tabIndex}\n toggleContrastColors={toggleContrastColors}\n variant=\"floating\"\n >\n <span id=\"lineOne\" />\n <span id=\"lineTwo\" />\n </StyledToggleButton>\n );\n },\n [\n ariaControls,\n id,\n isSideNavCollapsed,\n odysseyDesignTokens,\n onClick,\n tabIndex,\n toggleContrastColors,\n toggleLabel,\n ],\n );\n\n return (\n <Tooltip ariaType=\"description\" placement=\"right\" text={toggleLabel}>\n <MuiPropsContext.Consumer>{renderButton}</MuiPropsContext.Consumer>\n </Tooltip>\n );\n};\n\nconst MemoizedSideNavToggleButton = memo(SideNavToggleButton);\nMemoizedSideNavToggleButton.displayName = \"SideNavToggleButton\";\n\nexport { MemoizedSideNavToggleButton as SideNavToggleButton };\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"SideNavToggleButton.cjs","names":["_react","require","_styled","_interopRequireDefault","_reactI18next","_createContrastColors","_MuiPropsContext","_OdysseyDesignTokensContext","_Tooltip","_UiShellProvider","_uiShellSharedConstants","_jsxRuntime","e","__esModule","default","StyledToggleButton","styled","_Button2","shouldForwardProp","prop","isSideNavCollapsed","odysseyDesignTokens","toggleContrastColors","backgroundColor","position","width","Spacing6","height","border","zIndex","UI_SHELL_OVERLAY_Z_INDEX","boxShadow","PalettePrimaryMain","outline","animation","TransitionDurationMain","animationFillMode","transform","span","top","left","Spacing4","HueNeutral600","transition","fontColor","SideNavToggleButton","ariaControls","buttonRef","id","onClick","tabIndex","useOdysseyDesignTokens","t","useTranslation","uiShellContext","useUiShellContext","localButtonRef","useRef","useMemo","hasNonStandardAppBackgroundColor","appBackgroundColor","HueNeutralWhite","HueNeutral50","generateContrastColors","undefined","useImperativeHandle","focus","current","toggleLabel","renderButton","useCallback","muiProps","jsxs","ref","element","variant","children","jsx","Tooltip","ariaType","placement","text","MuiPropsContext","Consumer","MemoizedSideNavToggleButton","exports","memo","displayName"],"sources":["../../../../src/ui-shell/SideNav/SideNavToggleButton.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 { Button as MuiButton } from \"@mui/material\";\nimport type { ButtonProps as MuiButtonProps } from \"@mui/material\";\nimport {\n HTMLAttributes,\n memo,\n useCallback,\n useImperativeHandle,\n useMemo,\n useRef,\n} from \"react\";\nimport styled from \"@emotion/styled\";\nimport { useTranslation } from \"react-i18next\";\n\nimport {\n ContrastColors,\n generateContrastColors,\n} from \"../../createContrastColors.js\";\nimport { FocusHandle } from \"../../inputUtils.js\";\nimport { MuiPropsContext, MuiPropsContextType } from \"../../MuiPropsContext.js\";\nimport {\n DesignTokens,\n useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport { Tooltip } from \"../../Tooltip.js\";\nimport { useUiShellContext } from \"../../ui-shell/UiShellProvider.js\";\nimport { UI_SHELL_OVERLAY_Z_INDEX } from \"../uiShellSharedConstants.js\";\n\nconst StyledToggleButton = styled(MuiButton, {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" &&\n prop !== \"isSideNavCollapsed\" &&\n prop !== \"toggleContrastColors\",\n})<{\n isSideNavCollapsed: boolean;\n odysseyDesignTokens: DesignTokens;\n toggleContrastColors?: ContrastColors;\n}>(({ isSideNavCollapsed, odysseyDesignTokens, toggleContrastColors }) => ({\n backgroundColor: \"transparent\",\n position: \"relative\",\n width: odysseyDesignTokens.Spacing6,\n height: odysseyDesignTokens.Spacing6,\n border: 0,\n zIndex: UI_SHELL_OVERLAY_Z_INDEX,\n\n \"&:focus-visible\": {\n boxShadow: `inset 0 0 0 2px ${odysseyDesignTokens.PalettePrimaryMain}`,\n outline: \"none\",\n },\n\n \"&:hover, &:focus-visible\": {\n backgroundColor: \"transparent\",\n\n \"#lineOne\": {\n animation: `lineOne-animate-to-collapse ${odysseyDesignTokens.TransitionDurationMain} cubic-bezier(0, 0, 0.2, 1)`,\n animationFillMode: \"forwards\",\n \"@keyframes lineOne-animate-to-collapse\": {\n \"0%\": {\n transform: \"translate3d(-50%, -50%, 0)\",\n },\n \"50%\": {\n transform: \"translate3d(-50%, -50%, 0) rotate(-90deg) scaleY(.75)\",\n },\n \"100%\": {\n transform: \"translate3d(-50%, -27%, 0) rotate(-45deg) scaleY(.75)\",\n },\n },\n },\n\n \"#lineTwo\": {\n animation: `lineTwo-animate-to-collapse ${odysseyDesignTokens.TransitionDurationMain} cubic-bezier(0, 0, 0.2, 1)`,\n animationFillMode: \"forwards\",\n \"@keyframes lineTwo-animate-to-collapse\": {\n \"0%\": {\n transform: \"translate3d(-50%, -50%, 0)\",\n },\n \"50%\": {\n transform: \"translate3d(-50%, -50%, 0) rotate(-90deg) scaleY(.75)\",\n },\n \"100%\": {\n transform: \"translate3d(-50%, -73%, 0) rotate(-135deg) scaleY(.75)\",\n },\n },\n },\n\n ...(isSideNavCollapsed && {\n \"#lineOne\": {\n animation: `lineOne-animate-to-expand ${odysseyDesignTokens.TransitionDurationMain} cubic-bezier(0, 0, 0.2, 1)`,\n animationFillMode: \"forwards\",\n \"@keyframes lineOne-animate-to-expand\": {\n \"0%\": {\n transform: \"translate3d(-50%, -50%, 0)\",\n },\n \"50%\": {\n transform: \"translate3d(-50%, -50%, 0) rotate(90deg) scaleY(.75)\",\n },\n \"100%\": {\n transform: \"translate3d(-50%, -73%, 0) rotate(135deg) scaleY(.75)\",\n },\n },\n },\n\n \"#lineTwo\": {\n animation: `lineTwo-animate-to-expand ${odysseyDesignTokens.TransitionDurationMain} cubic-bezier(0, 0, 0.2, 1)`,\n animationFillMode: \"forwards\",\n \"@keyframes lineTwo-animate-to-expand\": {\n \"0%\": {\n transform: \"translate3d(-50%, -50%, 0)\",\n },\n \"50%\": {\n transform: \"translate3d(-50%, -50%, 0) rotate(90deg) scaleY(.75)\",\n },\n \"100%\": {\n transform: \"translate3d(-50%, -27%, 0) rotate(45deg) scaleY(.75)\",\n },\n },\n },\n }),\n },\n\n span: {\n position: \"absolute\",\n top: \"50%\",\n left: \"50%\",\n width: \"2px\",\n height: odysseyDesignTokens.Spacing4,\n backgroundColor: odysseyDesignTokens.HueNeutral600,\n transform: \"translate3d(-50%, -50%, 0)\",\n transition: `transform ${odysseyDesignTokens.TransitionDurationMain}`,\n\n ...(toggleContrastColors?.fontColor && {\n backgroundColor: toggleContrastColors.fontColor,\n }),\n },\n}));\n\nexport type SideNavToggleButtonProps = {\n /**\n * The ref forwarded to the Button\n */\n buttonRef?: React.RefObject<FocusHandle>;\n /**\n * The `id` of the item this button controls\n */\n ariaControls: string;\n /**\n * The ID of the Button\n */\n id?: string;\n isSideNavCollapsed: boolean;\n tabIndex?: HTMLAttributes<HTMLElement>[\"tabIndex\"];\n /**\n * The click event handler for the Button\n */\n onClick?: MuiButtonProps[\"onClick\"];\n onKeyDown?: MuiButtonProps[\"onKeyDown\"];\n};\n\nconst SideNavToggleButton = ({\n ariaControls,\n buttonRef,\n id,\n isSideNavCollapsed,\n onClick,\n tabIndex,\n}: SideNavToggleButtonProps) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n const { t } = useTranslation();\n const uiShellContext = useUiShellContext();\n\n const localButtonRef = useRef<HTMLButtonElement | HTMLAnchorElement>(null);\n\n const toggleContrastColors = useMemo(() => {\n const hasNonStandardAppBackgroundColor =\n uiShellContext?.appBackgroundColor &&\n uiShellContext?.appBackgroundColor !==\n odysseyDesignTokens.HueNeutralWhite &&\n uiShellContext?.appBackgroundColor !== odysseyDesignTokens.HueNeutral50;\n\n if (hasNonStandardAppBackgroundColor) {\n return generateContrastColors(\n uiShellContext.appBackgroundColor,\n odysseyDesignTokens,\n );\n }\n\n return undefined;\n }, [odysseyDesignTokens, uiShellContext]);\n\n useImperativeHandle(\n buttonRef,\n () => ({\n focus: () => {\n localButtonRef.current?.focus();\n },\n }),\n [],\n );\n\n const toggleLabel = useMemo(\n () =>\n isSideNavCollapsed\n ? t(\"sidenav.toggle.expand\")\n : t(\"sidenav.toggle.collapse\"),\n [isSideNavCollapsed, t],\n );\n\n const renderButton = useCallback(\n (muiProps: MuiPropsContextType) => {\n return (\n <StyledToggleButton\n {...muiProps}\n aria-controls={ariaControls}\n aria-expanded={!isSideNavCollapsed}\n aria-label={toggleLabel}\n data-se=\"sidenav-toggle-button\"\n data-sidenav-toggle={true}\n id={id}\n isSideNavCollapsed={isSideNavCollapsed}\n odysseyDesignTokens={odysseyDesignTokens}\n onClick={onClick}\n ref={(element) => {\n if (element) {\n (\n localButtonRef as React.MutableRefObject<HTMLButtonElement>\n ).current = element;\n //@ts-expect-error ref is not an optional prop on the props context type\n muiProps?.ref?.(element);\n }\n }}\n tabIndex={tabIndex}\n toggleContrastColors={toggleContrastColors}\n variant=\"floating\"\n >\n <span id=\"lineOne\" />\n <span id=\"lineTwo\" />\n </StyledToggleButton>\n );\n },\n [\n ariaControls,\n id,\n isSideNavCollapsed,\n odysseyDesignTokens,\n onClick,\n tabIndex,\n toggleContrastColors,\n toggleLabel,\n ],\n );\n\n return (\n <Tooltip ariaType=\"description\" placement=\"right\" text={toggleLabel}>\n <MuiPropsContext.Consumer>{renderButton}</MuiPropsContext.Consumer>\n </Tooltip>\n );\n};\n\nconst MemoizedSideNavToggleButton = memo(SideNavToggleButton);\nMemoizedSideNavToggleButton.displayName = \"SideNavToggleButton\";\n\nexport { MemoizedSideNavToggleButton as SideNavToggleButton };\n"],"mappings":"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","ignoreList":[]}
@@ -1 +1 @@
1
- {"version":3,"file":"types.cjs","names":[],"sources":["../../../../src/ui-shell/SideNav/types.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport type { ReactElement, SyntheticEvent } from \"react\";\n\nimport type { HtmlProps } from \"../../HtmlProps.js\";\nimport type { statusSeverityValues } from \"../../Status.js\";\nimport { UniqueIdentifier } from \"@dnd-kit/core\";\n\ntype LogoWithLink = {\n href: string;\n ariaLabel: string;\n};\ntype LogoWithNoLink = {\n href?: never;\n ariaLabel?: never;\n};\n\nexport type SideNavLogoProps = {\n isSameBackgroundAsMain?: boolean;\n /**\n * Event fired when the logo is clicked\n */\n onClick?: (event: SyntheticEvent) => void;\n} & (LogoWithLink | LogoWithNoLink) &\n (\n | {\n /**\n * a component to render as the logo\n */\n logoComponent: ReactElement;\n imageAltText?: never;\n imageUrl?: never;\n }\n | {\n /**\n * The src url to render in an `img` tag\n */\n imageUrl: string;\n /**\n * alt text for the img logo\n */\n imageAltText: string;\n logoComponent?: never;\n }\n | {\n /**\n * The src url to render in an `img` tag\n */\n imageUrl?: never;\n /**\n * alt text for the img logo\n */\n imageAltText?: never;\n logoComponent?: never;\n }\n );\n\nexport type SideNavProps = {\n /**\n * Side Nav header text that is usually reserved to show the App name\n */\n appName?: string;\n /**\n * Determines whether the side nav is collapsible\n */\n isCollapsible?: boolean;\n /**\n * Determines whether the side nav is collapsed\n */\n isCollapsed?: boolean;\n /**\n * Determines whether the side nav items use compact layout\n */\n isCompact?: boolean;\n /**\n * Before the side nav has items, it will be in a loading state.\n */\n isLoading?: boolean;\n /**\n * An optional logo component or src string for an img to display in the header. If not provided, will default to the Okta logo\n */\n logoProps?: SideNavLogoProps;\n /**\n * Triggers when the side nav is collapsed\n */\n onCollapse?: () => void;\n /**\n * Triggers when the side nav is expanded\n */\n onExpand?: () => void;\n /**\n * Triggers when the item is reordered\n */\n onSort?: (\n reorderedItems: SideNavItem[],\n parentId: string,\n activeId: UniqueIdentifier,\n activeIndex: number,\n overIndex: number,\n ) => void;\n /**\n * Nav items in the side nav\n */\n sideNavItems: SideNavItem[];\n} & (\n | {\n /**\n * The component to display as the footer; if present the `footerItems` are ignored and not rendered.\n */\n footerComponent?: ReactElement;\n footerItems?: never;\n hasCustomFooter: true;\n }\n | {\n footerComponent?: never;\n /**\n * Footer items in the side nav\n */\n footerItems?: SideNavFooterItem[];\n hasCustomFooter?: false;\n }\n) &\n Pick<HtmlProps, \"testId\">;\n\nexport type SideNavItem = {\n /**\n * The number to display as a count alongside the nav item\n */\n count?: number;\n /**\n * The icon element to display after the nav item text. Only use this with images that don't have React context. Even the official Odyssey Icons use MUI which references the MUI theme in context and will error when rendered in Unified UI Shell.\n */\n endIcon?: ReactElement;\n id: string;\n /**\n * Whether the item is disabled. When set to true the nav item is set to Disabled color,\n * the link/item is not clickable, and item with nestedNavItems is not expandable.\n */\n isDisabled?: boolean;\n /**\n * Whether the item is active/selected\n */\n isSelected?: boolean;\n /**\n * Whether the item is sortable within a sortable list\n */\n isSortable?: boolean;\n label: string;\n /**\n * Event fired when the nav item is clicked\n */\n onClick?: (event: SyntheticEvent) => void;\n /**\n * The status element to display after the label\n */\n severity?: (typeof statusSeverityValues)[number];\n /**\n * The icon element to display before the nav item text. Only use this with images that don't have React context. Even the official Odyssey Icons use MUI which references the MUI theme in context and will error when rendered in Unified UI Shell.\n */\n startIcon?: ReactElement;\n /**\n * The label to display inside the status\n */\n statusLabel?: string;\n /**\n * The link target prop. e.g., \"_blank\"\n */\n target?: string;\n} & (\n | {\n nestedNavItems?: never;\n href?: never;\n isDefaultExpanded?: never;\n isExpanded?: never;\n /**\n * Determines if the side nav item is a section header\n */\n isSectionHeader: true;\n }\n | {\n nestedNavItems?: never;\n /**\n * link added to the nav item. if it is undefined, static text will be displayed.\n * fires onClick event when it is passed\n */\n href?: string;\n isDefaultExpanded?: never;\n isExpanded?: never;\n isSectionHeader?: never;\n }\n | {\n /**\n * An array of side nav items to be displayed as nestedNavItems within Accordion\n */\n nestedNavItems: Array<Omit<SideNavItem, \"nestedNavItems\" | \"startIcon\">>;\n href?: never;\n /**\n * Whether the accordion (nav item with nestedNavItems) is expanded by default\n */\n isDefaultExpanded?: boolean;\n /**\n * If true, expands the accordion, otherwise collapse it.\n * Setting this prop enables control over the accordion.\n */\n isExpanded?: boolean;\n /**\n * If true, enables sorting for the accordion items\n */\n isSectionHeader?: never;\n }\n) &\n Pick<HtmlProps, \"translate\">;\n\nexport type SideNavFooterItem = {\n href?: string;\n id: string;\n label: string;\n};\n"],"mappings":"","ignoreList":[]}
1
+ {"version":3,"file":"types.cjs","names":[],"sources":["../../../../src/ui-shell/SideNav/types.ts"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport type { ReactElement, SyntheticEvent } from \"react\";\n\nimport type { HtmlProps } from \"../../HtmlProps.js\";\nimport type { statusSeverityValues } from \"../../Status.js\";\nimport { UniqueIdentifier } from \"@dnd-kit/core\";\n\ntype LogoWithLink = {\n href: string;\n ariaLabel: string;\n};\ntype LogoWithNoLink = {\n href?: never;\n ariaLabel?: never;\n};\n\nexport type SideNavLogoProps = {\n isSameBackgroundAsMain?: boolean;\n /**\n * Event fired when the logo is clicked\n */\n onClick?: (event: SyntheticEvent) => void;\n} & (LogoWithLink | LogoWithNoLink) &\n (\n | {\n /**\n * a component to render as the logo\n */\n logoComponent: ReactElement;\n imageAltText?: never;\n imageUrl?: never;\n }\n | {\n /**\n * The src url to render in an `img` tag\n */\n imageUrl: string;\n /**\n * alt text for the img logo\n */\n imageAltText: string;\n logoComponent?: never;\n }\n | {\n /**\n * The src url to render in an `img` tag\n */\n imageUrl?: never;\n /**\n * alt text for the img logo\n */\n imageAltText?: never;\n logoComponent?: never;\n }\n );\n\nexport type SideNavProps = {\n /**\n * Side Nav header text that is usually reserved to show the App name\n */\n appName?: string;\n /**\n * Determines whether the side nav is collapsible\n */\n isCollapsible?: boolean;\n /**\n * Determines whether the side nav is collapsed by default. When `true`, side nav also closes once and item is clicked.\n */\n isCollapsed?: boolean;\n /**\n * Determines whether the side nav items use compact layout\n */\n isCompact?: boolean;\n /**\n * Before the side nav has items, it will be in a loading state.\n */\n isLoading?: boolean;\n /**\n * If the side nav is up too much screen real estate. For instance, if you're in a narrower view, and it displays next to the content.\n *\n * When `true`, side nav will close itself after nav items are clicked.\n */\n isObtrusive?: boolean;\n /**\n * An optional logo component or src string for an img to display in the header. If not provided, will default to the Okta logo\n */\n logoProps?: SideNavLogoProps;\n /**\n * Triggers when the side nav is collapsed\n */\n onCollapse?: () => void;\n /**\n * Triggers when the side nav is expanded\n */\n onExpand?: () => void;\n /**\n * Triggers when the item is reordered\n */\n onSort?: (\n reorderedItems: SideNavItem[],\n parentId: string,\n activeId: UniqueIdentifier,\n activeIndex: number,\n overIndex: number,\n ) => void;\n /**\n * Nav items in the side nav\n */\n sideNavItems: SideNavItem[];\n} & (\n | {\n /**\n * The component to display as the footer; if present the `footerItems` are ignored and not rendered.\n */\n footerComponent?: ReactElement;\n footerItems?: never;\n hasCustomFooter: true;\n }\n | {\n footerComponent?: never;\n /**\n * Footer items in the side nav\n */\n footerItems?: SideNavFooterItem[];\n hasCustomFooter?: false;\n }\n) &\n Pick<HtmlProps, \"testId\">;\n\nexport type SideNavItem = {\n /**\n * The number to display as a count alongside the nav item\n */\n count?: number;\n /**\n * The icon element to display after the nav item text. Only use this with images that don't have React context. Even the official Odyssey Icons use MUI which references the MUI theme in context and will error when rendered in Unified UI Shell.\n */\n endIcon?: ReactElement;\n id: string;\n /**\n * Whether the item is disabled. When set to true the nav item is set to Disabled color,\n * the link/item is not clickable, and item with nestedNavItems is not expandable.\n */\n isDisabled?: boolean;\n /**\n * Whether the item is active/selected\n */\n isSelected?: boolean;\n /**\n * Whether the item is sortable within a sortable list\n */\n isSortable?: boolean;\n label: string;\n /**\n * Event fired when the nav item is clicked\n */\n onClick?: (event: SyntheticEvent) => void;\n /**\n * The status element to display after the label\n */\n severity?: (typeof statusSeverityValues)[number];\n /**\n * The icon element to display before the nav item text. Only use this with images that don't have React context. Even the official Odyssey Icons use MUI which references the MUI theme in context and will error when rendered in Unified UI Shell.\n */\n startIcon?: ReactElement;\n /**\n * The label to display inside the status\n */\n statusLabel?: string;\n /**\n * The link target prop. e.g., \"_blank\"\n */\n target?: string;\n} & (\n | {\n nestedNavItems?: never;\n href?: never;\n isDefaultExpanded?: never;\n isExpanded?: never;\n /**\n * Determines if the side nav item is a section header\n */\n isSectionHeader: true;\n }\n | {\n nestedNavItems?: never;\n /**\n * link added to the nav item. if it is undefined, static text will be displayed.\n * fires onClick event when it is passed\n */\n href?: string;\n isDefaultExpanded?: never;\n isExpanded?: never;\n isSectionHeader?: never;\n }\n | {\n /**\n * An array of side nav items to be displayed as nestedNavItems within Accordion\n */\n nestedNavItems: Array<Omit<SideNavItem, \"nestedNavItems\" | \"startIcon\">>;\n href?: never;\n /**\n * Whether the accordion (nav item with nestedNavItems) is expanded by default\n */\n isDefaultExpanded?: boolean;\n /**\n * If true, expands the accordion, otherwise collapse it.\n * Setting this prop enables control over the accordion.\n */\n isExpanded?: boolean;\n /**\n * If true, enables sorting for the accordion items\n */\n isSectionHeader?: never;\n }\n) &\n Pick<HtmlProps, \"translate\">;\n\nexport type SideNavFooterItem = {\n href?: string;\n id: string;\n label: string;\n};\n"],"mappings":"","ignoreList":[]}
@@ -0,0 +1,37 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.HamburgerMenuIcon = void 0;
7
+ var _react = require("react");
8
+ var _SvgIcon = require("../../SvgIcon.cjs");
9
+ var _jsxRuntime = require("react/jsx-runtime");
10
+ /*!
11
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
12
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
13
+ *
14
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
15
+ * Unless required by applicable law or agreed to in writing, software
16
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
17
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
18
+ *
19
+ * See the License for the specific language governing permissions and limitations under the License.
20
+ */const HamburgerMenuIcon = (0, _react.forwardRef)((props, ref) => {
21
+ return (0, _jsxRuntime.jsx)(_SvgIcon.SvgIcon, {
22
+ viewBox: "0 0 24 24",
23
+ fill: "none",
24
+ xmlns: "http://www.w3.org/2000/svg",
25
+ ref: ref,
26
+ ...props,
27
+ children: (0, _jsxRuntime.jsx)("path", {
28
+ fillRule: "evenodd",
29
+ clipRule: "evenodd",
30
+ d: "M21.333 5.778H2.667V4H21.333V5.778ZM21.333 12.885H2.667V11.111H21.333V12.885ZM2.667 20H21.333V18.221H2.667V20Z",
31
+ fill: "currentColor"
32
+ })
33
+ });
34
+ });
35
+ const MemoizedHamburgerMenuIcon = exports.HamburgerMenuIcon = (0, _react.memo)(HamburgerMenuIcon);
36
+ MemoizedHamburgerMenuIcon.displayName = "HamburgerMenuIcon";
37
+ //# sourceMappingURL=HamburgerMenuIcon.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"HamburgerMenuIcon.cjs","names":["_react","require","_SvgIcon","_jsxRuntime","HamburgerMenuIcon","forwardRef","props","ref","jsx","SvgIcon","viewBox","fill","xmlns","children","fillRule","clipRule","d","MemoizedHamburgerMenuIcon","exports","memo","displayName"],"sources":["../../../../src/ui-shell/TopNav/HamburgerMenuIcon.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\n// Code automatically generated; DO NOT EDIT.\n\nimport { forwardRef, memo } from \"react\";\nimport { SvgIcon, type SvgIconNoChildrenProps } from \"../../SvgIcon.js\";\n\nexport type HamburgerMenuProps = SvgIconNoChildrenProps;\n\nconst HamburgerMenuIcon = forwardRef<SVGSVGElement, HamburgerMenuProps>(\n (props, ref) => {\n return (\n <SvgIcon\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n ref={ref}\n {...props}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M21.333 5.778H2.667V4H21.333V5.778ZM21.333 12.885H2.667V11.111H21.333V12.885ZM2.667 20H21.333V18.221H2.667V20Z\"\n fill=\"currentColor\"\n />\n </SvgIcon>\n );\n },\n);\n\nconst MemoizedHamburgerMenuIcon = memo(HamburgerMenuIcon);\nMemoizedHamburgerMenuIcon.displayName = \"HamburgerMenuIcon\";\n\nexport { MemoizedHamburgerMenuIcon as HamburgerMenuIcon };\n"],"mappings":";;;;;;AAcA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAD,OAAA;AAAwE,IAAAE,WAAA,GAAAF,OAAA;AAfxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GASA,MAAMG,iBAAiB,GAAG,IAAAC,iBAAU,EAClC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACd,OACE,IAAAJ,WAAA,CAAAK,GAAA,EAACN,QAAA,CAAAO,OAAO;IACNC,OAAO,EAAC,WAAW;IACnBC,IAAI,EAAC,MAAM;IACXC,KAAK,EAAC,4BAA4B;IAClCL,GAAG,EAAEA,GAAI;IAAA,GACLD,KAAK;IAAAO,QAAA,EAET,IAAAV,WAAA,CAAAK,GAAA;MACEM,QAAQ,EAAC,SAAS;MAClBC,QAAQ,EAAC,SAAS;MAClBC,CAAC,EAAC,gHAAgH;MAClHL,IAAI,EAAC;IAAc,CACpB;EAAC,CACK,CAAC;AAEd,CACF,CAAC;AAED,MAAMM,yBAAyB,GAAAC,OAAA,CAAAd,iBAAA,GAAG,IAAAe,WAAI,EAACf,iBAAiB,CAAC;AACzDa,yBAAyB,CAACG,WAAW,GAAG,mBAAmB","ignoreList":[]}
@@ -3,11 +3,12 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.TopNav = exports.TOP_NAV_HEIGHT = void 0;
6
+ exports.TopNav = void 0;
7
7
  var _styled = _interopRequireDefault(require("@emotion/styled"));
8
8
  var _react = require("react");
9
9
  var _OdysseyDesignTokensContext = require("../../OdysseyDesignTokensContext.cjs");
10
10
  var _UiShellProvider = require("../../ui-shell/UiShellProvider.cjs");
11
+ var _uiShellSharedConstants = require("../uiShellSharedConstants.cjs");
11
12
  var _jsxRuntime = require("react/jsx-runtime");
12
13
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
13
14
  /*!
@@ -22,7 +23,6 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
22
23
  * See the License for the specific language governing permissions and limitations under the License.
23
24
  */
24
25
 
25
- const TOP_NAV_HEIGHT = exports.TOP_NAV_HEIGHT = `${64 / 14}rem`;
26
26
  const StyledLeftSideContainer = (0, _styled.default)("div")(() => ({
27
27
  flexGrow: 1
28
28
  }));
@@ -44,13 +44,13 @@ const StyledTopNavContainer = (0, _styled.default)("div", {
44
44
  gap: odysseyDesignTokens.Spacing4,
45
45
  height: "100%",
46
46
  justifyContent: "space-between",
47
- maxHeight: TOP_NAV_HEIGHT,
48
- minHeight: TOP_NAV_HEIGHT,
47
+ maxHeight: _uiShellSharedConstants.TOP_NAV_HEIGHT,
48
+ minHeight: _uiShellSharedConstants.TOP_NAV_HEIGHT,
49
49
  paddingBlock: odysseyDesignTokens.Spacing2,
50
50
  paddingInline: odysseyDesignTokens.Spacing8,
51
51
  position: "relative",
52
52
  transition: `box-shadow ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,
53
- zIndex: 100,
53
+ zIndex: _uiShellSharedConstants.UI_SHELL_BASE_Z_INDEX,
54
54
  ...(topNavBackgroundColor === odysseyDesignTokens.HueNeutralWhite && {
55
55
  borderBottom: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral100}`
56
56
  })
@@ -1 +1 @@
1
- {"version":3,"file":"TopNav.cjs","names":["_styled","_interopRequireDefault","require","_react","_OdysseyDesignTokensContext","_UiShellProvider","_jsxRuntime","e","__esModule","default","TOP_NAV_HEIGHT","exports","StyledLeftSideContainer","styled","flexGrow","StyledRightSideContainer","flexShrink","StyledTopNavContainer","shouldForwardProp","prop","odysseyDesignTokens","isScrolled","topNavBackgroundColor","alignItems","backgroundColor","boxShadow","DepthMedium","undefined","clipPath","display","gap","Spacing4","height","justifyContent","maxHeight","minHeight","paddingBlock","Spacing2","paddingInline","Spacing8","position","transition","TransitionDurationMain","TransitionTimingMain","zIndex","HueNeutralWhite","borderBottom","BorderWidthMain","BorderStyleMain","HueNeutral100","TopNav","leftSideComponent","rightSideComponent","useOdysseyDesignTokens","uiShellContext","useUiShellContext","jsxs","children","jsx","MemoizedTopNav","memo","displayName"],"sources":["../../../../src/ui-shell/TopNav/TopNav.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 { memo, type ReactElement } from \"react\";\n\nimport type { HtmlProps } from \"../../HtmlProps.js\";\nimport {\n DesignTokens,\n useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport {\n UiShellColors,\n useUiShellContext,\n} from \"../../ui-shell/UiShellProvider.js\";\n\nexport const TOP_NAV_HEIGHT = `${64 / 14}rem`;\n\nconst StyledLeftSideContainer = styled(\"div\")(() => ({\n flexGrow: 1,\n}));\n\nconst StyledRightSideContainer = styled(\"div\")(() => ({\n flexShrink: 0,\n}));\n\nconst StyledTopNavContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" &&\n prop !== \"isScrolled\" &&\n prop !== \"topNavBackgroundColor\",\n})<{\n isScrolled?: boolean;\n odysseyDesignTokens: DesignTokens;\n topNavBackgroundColor?: UiShellColors[\"topNavBackgroundColor\"];\n}>(({ odysseyDesignTokens, isScrolled, topNavBackgroundColor }) => ({\n alignItems: \"center\",\n backgroundColor: topNavBackgroundColor,\n boxShadow: isScrolled ? odysseyDesignTokens.DepthMedium : undefined,\n clipPath: \"inset(0 0 -100vh 0)\",\n display: \"flex\",\n gap: odysseyDesignTokens.Spacing4,\n height: \"100%\",\n justifyContent: \"space-between\",\n maxHeight: TOP_NAV_HEIGHT,\n minHeight: TOP_NAV_HEIGHT,\n paddingBlock: odysseyDesignTokens.Spacing2,\n paddingInline: odysseyDesignTokens.Spacing8,\n position: \"relative\",\n transition: `box-shadow ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n zIndex: 100,\n\n ...(topNavBackgroundColor === odysseyDesignTokens.HueNeutralWhite && {\n borderBottom: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral100}`,\n }),\n}));\n\nexport type TopNavProps = {\n /**\n * Whether or not the underlying content has been scrolled\n */\n isScrolled?: boolean;\n /**\n * React components that render into the left side of the top nav.\n */\n leftSideComponent?: ReactElement;\n /**\n * React components that render into the right side of the top nav.\n */\n rightSideComponent?: ReactElement;\n} & Pick<HtmlProps, \"testId\">;\n\nconst TopNav = ({\n isScrolled,\n leftSideComponent,\n rightSideComponent,\n}: TopNavProps) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n const uiShellContext = useUiShellContext();\n\n return (\n <StyledTopNavContainer\n odysseyDesignTokens={odysseyDesignTokens}\n isScrolled={isScrolled}\n topNavBackgroundColor={uiShellContext?.topNavBackgroundColor}\n >\n <StyledLeftSideContainer>\n {leftSideComponent ?? <div />}\n </StyledLeftSideContainer>\n <StyledRightSideContainer>\n {rightSideComponent ?? <div />}\n </StyledRightSideContainer>\n </StyledTopNavContainer>\n );\n};\n\nconst MemoizedTopNav = memo(TopNav);\nMemoizedTopNav.displayName = \"TopNav\";\n\nexport { MemoizedTopNav as TopNav };\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"TopNav.cjs","names":["_styled","_interopRequireDefault","require","_react","_OdysseyDesignTokensContext","_UiShellProvider","_uiShellSharedConstants","_jsxRuntime","e","__esModule","default","StyledLeftSideContainer","styled","flexGrow","StyledRightSideContainer","flexShrink","StyledTopNavContainer","shouldForwardProp","prop","odysseyDesignTokens","isScrolled","topNavBackgroundColor","alignItems","backgroundColor","boxShadow","DepthMedium","undefined","clipPath","display","gap","Spacing4","height","justifyContent","maxHeight","TOP_NAV_HEIGHT","minHeight","paddingBlock","Spacing2","paddingInline","Spacing8","position","transition","TransitionDurationMain","TransitionTimingMain","zIndex","UI_SHELL_BASE_Z_INDEX","HueNeutralWhite","borderBottom","BorderWidthMain","BorderStyleMain","HueNeutral100","TopNav","leftSideComponent","rightSideComponent","useOdysseyDesignTokens","uiShellContext","useUiShellContext","jsxs","children","jsx","MemoizedTopNav","exports","memo","displayName"],"sources":["../../../../src/ui-shell/TopNav/TopNav.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 { memo, type ReactElement } from \"react\";\n\nimport type { HtmlProps } from \"../../HtmlProps.js\";\nimport {\n DesignTokens,\n useOdysseyDesignTokens,\n} from \"../../OdysseyDesignTokensContext.js\";\nimport {\n UiShellColors,\n useUiShellContext,\n} from \"../../ui-shell/UiShellProvider.js\";\nimport {\n TOP_NAV_HEIGHT,\n UI_SHELL_BASE_Z_INDEX,\n} from \"../uiShellSharedConstants.js\";\n\nconst StyledLeftSideContainer = styled(\"div\")(() => ({\n flexGrow: 1,\n}));\n\nconst StyledRightSideContainer = styled(\"div\")(() => ({\n flexShrink: 0,\n}));\n\nconst StyledTopNavContainer = styled(\"div\", {\n shouldForwardProp: (prop) =>\n prop !== \"odysseyDesignTokens\" &&\n prop !== \"isScrolled\" &&\n prop !== \"topNavBackgroundColor\",\n})<{\n isScrolled?: boolean;\n odysseyDesignTokens: DesignTokens;\n topNavBackgroundColor?: UiShellColors[\"topNavBackgroundColor\"];\n}>(({ odysseyDesignTokens, isScrolled, topNavBackgroundColor }) => ({\n alignItems: \"center\",\n backgroundColor: topNavBackgroundColor,\n boxShadow: isScrolled ? odysseyDesignTokens.DepthMedium : undefined,\n clipPath: \"inset(0 0 -100vh 0)\",\n display: \"flex\",\n gap: odysseyDesignTokens.Spacing4,\n height: \"100%\",\n justifyContent: \"space-between\",\n maxHeight: TOP_NAV_HEIGHT,\n minHeight: TOP_NAV_HEIGHT,\n paddingBlock: odysseyDesignTokens.Spacing2,\n paddingInline: odysseyDesignTokens.Spacing8,\n position: \"relative\",\n transition: `box-shadow ${odysseyDesignTokens.TransitionDurationMain} ${odysseyDesignTokens.TransitionTimingMain}`,\n zIndex: UI_SHELL_BASE_Z_INDEX,\n\n ...(topNavBackgroundColor === odysseyDesignTokens.HueNeutralWhite && {\n borderBottom: `${odysseyDesignTokens.BorderWidthMain} ${odysseyDesignTokens.BorderStyleMain} ${odysseyDesignTokens.HueNeutral100}`,\n }),\n}));\n\nexport type TopNavProps = {\n /**\n * Whether or not the underlying content has been scrolled\n */\n isScrolled?: boolean;\n /**\n * React components that render into the left side of the top nav.\n */\n leftSideComponent?: ReactElement;\n /**\n * React components that render into the right side of the top nav.\n */\n rightSideComponent?: ReactElement;\n} & Pick<HtmlProps, \"testId\">;\n\nconst TopNav = ({\n isScrolled,\n leftSideComponent,\n rightSideComponent,\n}: TopNavProps) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n const uiShellContext = useUiShellContext();\n\n return (\n <StyledTopNavContainer\n odysseyDesignTokens={odysseyDesignTokens}\n isScrolled={isScrolled}\n topNavBackgroundColor={uiShellContext?.topNavBackgroundColor}\n >\n <StyledLeftSideContainer>\n {leftSideComponent ?? <div />}\n </StyledLeftSideContainer>\n <StyledRightSideContainer>\n {rightSideComponent ?? <div />}\n </StyledRightSideContainer>\n </StyledTopNavContainer>\n );\n};\n\nconst MemoizedTopNav = memo(TopNav);\nMemoizedTopNav.displayName = \"TopNav\";\n\nexport { MemoizedTopNav as TopNav };\n"],"mappings":"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","ignoreList":[]}