@servicetitan/navigation 12.0.2 → 13.0.0-canary.256.5761ed1.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 (248) hide show
  1. package/dist/components/counter-tag.d.ts +1 -1
  2. package/dist/components/counter-tag.d.ts.map +1 -1
  3. package/dist/components/counter-tag.js.map +1 -1
  4. package/dist/components/profile-dropdown/interface.d.ts +55 -0
  5. package/dist/components/profile-dropdown/interface.d.ts.map +1 -0
  6. package/dist/components/profile-dropdown/interface.js.map +1 -0
  7. package/dist/components/profile-dropdown/profile-dropdown-legacy.stories.d.ts +13 -0
  8. package/dist/components/profile-dropdown/profile-dropdown-legacy.stories.d.ts.map +1 -0
  9. package/dist/components/profile-dropdown/profile-dropdown-stacked.stories.d.ts +5 -1
  10. package/dist/components/profile-dropdown/profile-dropdown-stacked.stories.d.ts.map +1 -1
  11. package/dist/components/profile-dropdown/profile-dropdown.d.ts +9 -79
  12. package/dist/components/profile-dropdown/profile-dropdown.d.ts.map +1 -1
  13. package/dist/components/profile-dropdown/profile-dropdown.js +22 -22
  14. package/dist/components/profile-dropdown/profile-dropdown.js.map +1 -1
  15. package/dist/components/profile-dropdown/profile-dropdown.stories.d.ts +5 -1
  16. package/dist/components/profile-dropdown/profile-dropdown.stories.d.ts.map +1 -1
  17. package/dist/components/titan-layout/interface-internal.d.ts +12 -0
  18. package/dist/components/titan-layout/interface-internal.d.ts.map +1 -1
  19. package/dist/components/titan-layout/interface-internal.js.map +1 -1
  20. package/dist/components/titan-layout/interface.d.ts +66 -13
  21. package/dist/components/titan-layout/interface.d.ts.map +1 -1
  22. package/dist/components/titan-layout/interface.js.map +1 -1
  23. package/dist/components/titan-layout/layout-header-dark.d.ts.map +1 -1
  24. package/dist/components/titan-layout/layout-header-dark.js +22 -12
  25. package/dist/components/titan-layout/layout-header-dark.js.map +1 -1
  26. package/dist/components/titan-layout/layout-header-links-internal.d.ts +22 -3
  27. package/dist/components/titan-layout/layout-header-links-internal.d.ts.map +1 -1
  28. package/dist/components/titan-layout/layout-header-links-internal.js +15 -18
  29. package/dist/components/titan-layout/layout-header-links-internal.js.map +1 -1
  30. package/dist/components/titan-layout/layout-header-links.d.ts +3 -4
  31. package/dist/components/titan-layout/layout-header-links.d.ts.map +1 -1
  32. package/dist/components/titan-layout/layout-header-links.js +25 -5
  33. package/dist/components/titan-layout/layout-header-links.js.map +1 -1
  34. package/dist/components/titan-layout/layout-header.d.ts +2 -2
  35. package/dist/components/titan-layout/layout-header.d.ts.map +1 -1
  36. package/dist/components/titan-layout/layout-header.js.map +1 -1
  37. package/dist/components/titan-layout/layout-header.module.less +36 -0
  38. package/dist/components/titan-layout/layout-header.module.less.d.ts +2 -0
  39. package/dist/components/titan-layout/layout-profile.d.ts +8 -5
  40. package/dist/components/titan-layout/layout-profile.d.ts.map +1 -1
  41. package/dist/components/titan-layout/layout-profile.js +30 -28
  42. package/dist/components/titan-layout/layout-profile.js.map +1 -1
  43. package/dist/components/titan-layout/layout-sidebar-links-internal.d.ts +48 -25
  44. package/dist/components/titan-layout/layout-sidebar-links-internal.d.ts.map +1 -1
  45. package/dist/components/titan-layout/layout-sidebar-links-internal.js +56 -52
  46. package/dist/components/titan-layout/layout-sidebar-links-internal.js.map +1 -1
  47. package/dist/components/titan-layout/layout-sidebar-links.d.ts +3 -3
  48. package/dist/components/titan-layout/layout-sidebar-links.d.ts.map +1 -1
  49. package/dist/components/titan-layout/layout-sidebar-links.js +33 -18
  50. package/dist/components/titan-layout/layout-sidebar-links.js.map +1 -1
  51. package/dist/components/titan-layout/layout-sidebar.d.ts.map +1 -1
  52. package/dist/components/titan-layout/layout-sidebar.js +49 -24
  53. package/dist/components/titan-layout/layout-sidebar.js.map +1 -1
  54. package/dist/components/titan-layout/titan-layout-default.stories.d.ts +16 -0
  55. package/dist/components/titan-layout/titan-layout-default.stories.d.ts.map +1 -0
  56. package/dist/components/titan-layout/titan-layout-legacy.stories.d.ts +10 -0
  57. package/dist/components/titan-layout/titan-layout-legacy.stories.d.ts.map +1 -0
  58. package/dist/components/titan-layout/titan-layout-links.d.ts +5 -0
  59. package/dist/components/titan-layout/titan-layout-links.d.ts.map +1 -0
  60. package/dist/components/titan-layout/titan-layout-links.js +34 -0
  61. package/dist/components/titan-layout/titan-layout-links.js.map +1 -0
  62. package/dist/components/titan-layout/titan-layout-stacked.stories.d.ts +10 -0
  63. package/dist/components/titan-layout/titan-layout-stacked.stories.d.ts.map +1 -0
  64. package/dist/components/titan-layout/titan-layout.d.ts +5 -4
  65. package/dist/components/titan-layout/titan-layout.d.ts.map +1 -1
  66. package/dist/components/titan-layout/titan-layout.js +10 -8
  67. package/dist/components/titan-layout/titan-layout.js.map +1 -1
  68. package/dist/index.d.ts +1 -6
  69. package/dist/index.d.ts.map +1 -1
  70. package/dist/index.js +0 -4
  71. package/dist/index.js.map +1 -1
  72. package/dist/test/data.d.ts +26 -23
  73. package/dist/test/data.d.ts.map +1 -1
  74. package/dist/test/data.js +26 -69
  75. package/dist/test/data.js.map +1 -1
  76. package/dist/test/titan-layout.d.ts +16 -0
  77. package/dist/test/titan-layout.d.ts.map +1 -0
  78. package/dist/test/titan-layout.js +21 -0
  79. package/dist/test/titan-layout.js.map +1 -0
  80. package/dist/utils/navigation-context.d.ts +3 -22
  81. package/dist/utils/navigation-context.d.ts.map +1 -1
  82. package/dist/utils/navigation-context.js +2 -10
  83. package/dist/utils/navigation-context.js.map +1 -1
  84. package/dist/utils/navigation.d.ts +2 -7
  85. package/dist/utils/navigation.d.ts.map +1 -1
  86. package/dist/utils/navigation.js.map +1 -1
  87. package/package.json +2 -2
  88. package/src/components/counter-tag.tsx +1 -1
  89. package/src/components/profile-dropdown/interface.ts +47 -0
  90. package/src/components/profile-dropdown/profile-dropdown-legacy.stories.tsx +25 -0
  91. package/src/components/profile-dropdown/profile-dropdown-stacked.stories.tsx +15 -7
  92. package/src/components/profile-dropdown/profile-dropdown.stories.tsx +50 -43
  93. package/src/components/profile-dropdown/profile-dropdown.tsx +39 -115
  94. package/src/components/titan-layout/interface-internal.ts +13 -0
  95. package/src/components/titan-layout/interface.ts +72 -16
  96. package/src/components/titan-layout/layout-header-dark.tsx +18 -5
  97. package/src/components/titan-layout/layout-header-links-internal.tsx +41 -54
  98. package/src/components/titan-layout/layout-header-links.tsx +65 -12
  99. package/src/components/titan-layout/layout-header.module.less +36 -0
  100. package/src/components/titan-layout/layout-header.module.less.d.ts +2 -0
  101. package/src/components/titan-layout/layout-header.tsx +2 -2
  102. package/src/components/titan-layout/layout-profile.tsx +53 -34
  103. package/src/components/titan-layout/layout-sidebar-links-internal.tsx +169 -116
  104. package/src/components/titan-layout/layout-sidebar-links.tsx +73 -24
  105. package/src/components/titan-layout/layout-sidebar.tsx +52 -28
  106. package/src/components/titan-layout/{titan-layout.stories.tsx → titan-layout-default.stories.tsx} +125 -113
  107. package/src/components/titan-layout/titan-layout-legacy.stories.tsx +24 -0
  108. package/src/components/titan-layout/titan-layout-links.tsx +34 -0
  109. package/src/components/titan-layout/titan-layout-stacked.stories.tsx +30 -0
  110. package/src/components/titan-layout/titan-layout.tsx +12 -9
  111. package/src/index.ts +1 -12
  112. package/src/test/data.tsx +31 -83
  113. package/src/test/titan-layout.tsx +34 -0
  114. package/src/utils/navigation-context.tsx +9 -35
  115. package/src/utils/navigation.ts +3 -10
  116. package/dist/components/header-navigation/header-navigation-content.d.ts +0 -30
  117. package/dist/components/header-navigation/header-navigation-content.d.ts.map +0 -1
  118. package/dist/components/header-navigation/header-navigation-content.js +0 -58
  119. package/dist/components/header-navigation/header-navigation-content.js.map +0 -1
  120. package/dist/components/header-navigation/header-navigation-extra-stacked.stories.d.ts +0 -9
  121. package/dist/components/header-navigation/header-navigation-extra-stacked.stories.d.ts.map +0 -1
  122. package/dist/components/header-navigation/header-navigation-extra.stories.d.ts +0 -12
  123. package/dist/components/header-navigation/header-navigation-extra.stories.d.ts.map +0 -1
  124. package/dist/components/header-navigation/header-navigation-links.d.ts +0 -11
  125. package/dist/components/header-navigation/header-navigation-links.d.ts.map +0 -1
  126. package/dist/components/header-navigation/header-navigation-links.js +0 -62
  127. package/dist/components/header-navigation/header-navigation-links.js.map +0 -1
  128. package/dist/components/header-navigation/header-navigation-stacked.stories.d.ts +0 -12
  129. package/dist/components/header-navigation/header-navigation-stacked.stories.d.ts.map +0 -1
  130. package/dist/components/header-navigation/header-navigation-stories.module.less +0 -6
  131. package/dist/components/header-navigation/header-navigation-stories.module.less.d.ts +0 -3
  132. package/dist/components/header-navigation/header-navigation.d.ts +0 -59
  133. package/dist/components/header-navigation/header-navigation.d.ts.map +0 -1
  134. package/dist/components/header-navigation/header-navigation.js +0 -228
  135. package/dist/components/header-navigation/header-navigation.js.map +0 -1
  136. package/dist/components/header-navigation/header-navigation.module.less +0 -260
  137. package/dist/components/header-navigation/header-navigation.module.less.d.ts +0 -22
  138. package/dist/components/header-navigation/header-navigation.stories.d.ts +0 -12
  139. package/dist/components/header-navigation/header-navigation.stories.d.ts.map +0 -1
  140. package/dist/components/header-navigation/index.d.ts +0 -2
  141. package/dist/components/header-navigation/index.d.ts.map +0 -1
  142. package/dist/components/header-navigation/index.js +0 -3
  143. package/dist/components/header-navigation/index.js.map +0 -1
  144. package/dist/components/header-navigation/with-tooltip.d.ts +0 -4
  145. package/dist/components/header-navigation/with-tooltip.d.ts.map +0 -1
  146. package/dist/components/header-navigation/with-tooltip.js +0 -10
  147. package/dist/components/header-navigation/with-tooltip.js.map +0 -1
  148. package/dist/components/layout.stories.d.ts +0 -13
  149. package/dist/components/layout.stories.d.ts.map +0 -1
  150. package/dist/components/left-navigation/header-navigation-extra-tiny.stories.d.ts +0 -9
  151. package/dist/components/left-navigation/header-navigation-extra-tiny.stories.d.ts.map +0 -1
  152. package/dist/components/left-navigation/header-navigation-tiny-links.d.ts +0 -18
  153. package/dist/components/left-navigation/header-navigation-tiny-links.d.ts.map +0 -1
  154. package/dist/components/left-navigation/header-navigation-tiny-links.js +0 -79
  155. package/dist/components/left-navigation/header-navigation-tiny-links.js.map +0 -1
  156. package/dist/components/left-navigation/header-navigation-tiny.d.ts +0 -23
  157. package/dist/components/left-navigation/header-navigation-tiny.d.ts.map +0 -1
  158. package/dist/components/left-navigation/header-navigation-tiny.js +0 -32
  159. package/dist/components/left-navigation/header-navigation-tiny.js.map +0 -1
  160. package/dist/components/left-navigation/header-navigation-tiny.module.less +0 -117
  161. package/dist/components/left-navigation/header-navigation-tiny.module.less.d.ts +0 -15
  162. package/dist/components/left-navigation/header-navigation-tiny.stories.d.ts +0 -12
  163. package/dist/components/left-navigation/header-navigation-tiny.stories.d.ts.map +0 -1
  164. package/dist/components/left-navigation/index.d.ts +0 -5
  165. package/dist/components/left-navigation/index.d.ts.map +0 -1
  166. package/dist/components/left-navigation/index.js +0 -5
  167. package/dist/components/left-navigation/index.js.map +0 -1
  168. package/dist/components/left-navigation/interface-internal.d.ts +0 -10
  169. package/dist/components/left-navigation/interface-internal.d.ts.map +0 -1
  170. package/dist/components/left-navigation/interface-internal.js +0 -3
  171. package/dist/components/left-navigation/interface-internal.js.map +0 -1
  172. package/dist/components/left-navigation/interface.d.ts +0 -20
  173. package/dist/components/left-navigation/interface.d.ts.map +0 -1
  174. package/dist/components/left-navigation/interface.js.map +0 -1
  175. package/dist/components/left-navigation/side-navigation-context.d.ts +0 -8
  176. package/dist/components/left-navigation/side-navigation-context.d.ts.map +0 -1
  177. package/dist/components/left-navigation/side-navigation-context.js +0 -8
  178. package/dist/components/left-navigation/side-navigation-context.js.map +0 -1
  179. package/dist/components/left-navigation/side-navigation-links-internal.d.ts +0 -28
  180. package/dist/components/left-navigation/side-navigation-links-internal.d.ts.map +0 -1
  181. package/dist/components/left-navigation/side-navigation-links-internal.js +0 -89
  182. package/dist/components/left-navigation/side-navigation-links-internal.js.map +0 -1
  183. package/dist/components/left-navigation/side-navigation-links.d.ts +0 -6
  184. package/dist/components/left-navigation/side-navigation-links.d.ts.map +0 -1
  185. package/dist/components/left-navigation/side-navigation-links.js +0 -48
  186. package/dist/components/left-navigation/side-navigation-links.js.map +0 -1
  187. package/dist/components/left-navigation/side-navigation.d.ts +0 -29
  188. package/dist/components/left-navigation/side-navigation.d.ts.map +0 -1
  189. package/dist/components/left-navigation/side-navigation.js +0 -411
  190. package/dist/components/left-navigation/side-navigation.js.map +0 -1
  191. package/dist/components/left-navigation/side-navigation.module.less +0 -530
  192. package/dist/components/left-navigation/side-navigation.module.less.d.ts +0 -48
  193. package/dist/components/left-navigation/side-navigation.stories.d.ts +0 -17
  194. package/dist/components/left-navigation/side-navigation.stories.d.ts.map +0 -1
  195. package/dist/components/left-navigation/with-tooltip.d.ts +0 -4
  196. package/dist/components/left-navigation/with-tooltip.d.ts.map +0 -1
  197. package/dist/components/left-navigation/with-tooltip.js +0 -15
  198. package/dist/components/left-navigation/with-tooltip.js.map +0 -1
  199. package/dist/components/links.d.ts +0 -5
  200. package/dist/components/links.d.ts.map +0 -1
  201. package/dist/components/links.js +0 -35
  202. package/dist/components/links.js.map +0 -1
  203. package/dist/components/profile-dropdown/profile-dropdown-tiny.stories.d.ts +0 -9
  204. package/dist/components/profile-dropdown/profile-dropdown-tiny.stories.d.ts.map +0 -1
  205. package/dist/components/titan-layout/layout-profile.stories.d.ts +0 -13
  206. package/dist/components/titan-layout/layout-profile.stories.d.ts.map +0 -1
  207. package/dist/components/titan-layout/titan-layout.stories.d.ts +0 -29
  208. package/dist/components/titan-layout/titan-layout.stories.d.ts.map +0 -1
  209. package/dist/utils/navigation-legacy.d.ts +0 -88
  210. package/dist/utils/navigation-legacy.d.ts.map +0 -1
  211. package/dist/utils/navigation-legacy.js +0 -3
  212. package/dist/utils/navigation-legacy.js.map +0 -1
  213. package/src/components/header-navigation/header-navigation-content.tsx +0 -120
  214. package/src/components/header-navigation/header-navigation-extra-stacked.stories.tsx +0 -19
  215. package/src/components/header-navigation/header-navigation-extra.stories.tsx +0 -142
  216. package/src/components/header-navigation/header-navigation-links.tsx +0 -141
  217. package/src/components/header-navigation/header-navigation-stacked.stories.tsx +0 -146
  218. package/src/components/header-navigation/header-navigation-stories.module.less +0 -6
  219. package/src/components/header-navigation/header-navigation-stories.module.less.d.ts +0 -3
  220. package/src/components/header-navigation/header-navigation.module.less +0 -260
  221. package/src/components/header-navigation/header-navigation.module.less.d.ts +0 -22
  222. package/src/components/header-navigation/header-navigation.stories.tsx +0 -165
  223. package/src/components/header-navigation/header-navigation.tsx +0 -327
  224. package/src/components/header-navigation/index.ts +0 -1
  225. package/src/components/header-navigation/with-tooltip.tsx +0 -15
  226. package/src/components/layout.stories.tsx +0 -103
  227. package/src/components/left-navigation/header-navigation-extra-tiny.stories.tsx +0 -21
  228. package/src/components/left-navigation/header-navigation-tiny-links.tsx +0 -145
  229. package/src/components/left-navigation/header-navigation-tiny.module.less +0 -117
  230. package/src/components/left-navigation/header-navigation-tiny.module.less.d.ts +0 -15
  231. package/src/components/left-navigation/header-navigation-tiny.stories.tsx +0 -178
  232. package/src/components/left-navigation/header-navigation-tiny.tsx +0 -65
  233. package/src/components/left-navigation/index.ts +0 -4
  234. package/src/components/left-navigation/interface-internal.ts +0 -11
  235. package/src/components/left-navigation/interface.ts +0 -26
  236. package/src/components/left-navigation/side-navigation-context.tsx +0 -13
  237. package/src/components/left-navigation/side-navigation-links-internal.tsx +0 -151
  238. package/src/components/left-navigation/side-navigation-links.tsx +0 -57
  239. package/src/components/left-navigation/side-navigation.module.less +0 -530
  240. package/src/components/left-navigation/side-navigation.module.less.d.ts +0 -48
  241. package/src/components/left-navigation/side-navigation.stories.tsx +0 -226
  242. package/src/components/left-navigation/side-navigation.tsx +0 -543
  243. package/src/components/left-navigation/with-tooltip.tsx +0 -16
  244. package/src/components/links.tsx +0 -54
  245. package/src/components/profile-dropdown/profile-dropdown-tiny.stories.tsx +0 -25
  246. package/src/components/titan-layout/layout-profile.stories.tsx +0 -46
  247. package/src/utils/navigation-legacy.ts +0 -106
  248. /package/dist/components/{left-navigation → profile-dropdown}/interface.js +0 -0
@@ -1,11 +0,0 @@
1
- import { FC, ReactNode } from 'react';
2
- import { HeaderNavigationLinkProps, HeaderNavigationTriggerProps } from '../../utils/navigation-legacy';
3
- /** Navigation extra item with link */
4
- export declare const HeaderNavigationLink: FC<HeaderNavigationLinkProps>;
5
- /** Navigation extra item with icon button */
6
- export declare const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps>;
7
- /** Navigation extra item with custom content */
8
- export declare const HeaderNavigationTriggerCustom: FC<Omit<HeaderNavigationTriggerProps, 'counter' | 'iconSize' | 'iconName' | 'iconComponent' | 'iconClassName' | 'icon' | 'iconActive'> & {
9
- children: ReactNode;
10
- }>;
11
- //# sourceMappingURL=header-navigation-links.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"header-navigation-links.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation-links.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAElD,OAAO,EACH,yBAAyB,EACzB,4BAA4B,EAC/B,MAAM,+BAA+B,CAAC;AAMvC,sCAAsC;AACtC,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CAgD9D,CAAC;AAEF,6CAA6C;AAC7C,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CA6CpE,CAAC;AAEF,gDAAgD;AAChD,eAAO,MAAM,6BAA6B,EAAE,EAAE,CAC1C,IAAI,CACA,4BAA4B,EAC1B,SAAS,GACT,UAAU,GACV,UAAU,GACV,eAAe,GACf,eAAe,GACf,MAAM,GACN,YAAY,CACjB,GAAG;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,CAkB1B,CAAC"}
@@ -1,62 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { createElement as _createElement } from "react";
3
- import classNames from 'classnames';
4
- import { useContext } from 'react';
5
- import { NavigationComponentContext } from '../../utils/navigation-context';
6
- import { getCounterTag } from '../../utils/side-nav';
7
- import { HeaderNavigationItemContent } from './header-navigation-content';
8
- import * as Styles from './header-navigation.module.less';
9
- import { withTooltip } from './with-tooltip';
10
- /** Navigation extra item with link */ export const HeaderNavigationLink = ({ id, to, counter, hint, tooltip, className, icon, iconActive, iconClassName, iconComponent, iconName, isActive, label, labelClassName, tag, target, title, ...rest })=>{
11
- const NavigationComponent = useContext(NavigationComponentContext);
12
- return withTooltip(/*#__PURE__*/ _createElement(NavigationComponent, {
13
- "data-cy": `navigation-link-${id}`,
14
- "data-pendo": `navigation-link-${id}`,
15
- ...rest,
16
- key: id,
17
- to: to,
18
- title: hint,
19
- className: classNames(Styles.navigationLink, Styles.navigationItem, className, {
20
- [Styles.navigationItemActive]: isActive === true
21
- }),
22
- isActive: typeof isActive === 'function' ? isActive : undefined,
23
- activeClassName: Styles.navigationItemActive,
24
- target: target
25
- }, /*#__PURE__*/ _jsx(HeaderNavigationItemContent, {
26
- tag: getCounterTag(counter, tag),
27
- iconComponent: iconComponent,
28
- iconClassName: iconClassName,
29
- iconName: iconName,
30
- title: label,
31
- titleClassName: labelClassName
32
- })), tooltip);
33
- };
34
- /** Navigation extra item with icon button */ export const HeaderNavigationTrigger = ({ id, className, counter, icon, iconActive, iconClassName, iconComponent, iconName, isActive, label, labelClassName, hint, tag, tooltip, title, ...rest })=>{
35
- return withTooltip(/*#__PURE__*/ _jsx("div", {
36
- "data-cy": `navigation-trigger-${id}`,
37
- "data-pendo": `navigation-trigger-${id}`,
38
- ...rest,
39
- title: hint,
40
- className: classNames(Styles.navigationItem, Styles.navigationLink, {
41
- [Styles.navigationItemActive]: isActive === true
42
- }, 'cursor-pointer', className),
43
- children: /*#__PURE__*/ _jsx(HeaderNavigationItemContent, {
44
- tag: getCounterTag(counter, tag),
45
- iconComponent: iconComponent,
46
- iconClassName: iconClassName,
47
- iconName: iconName,
48
- title: label,
49
- titleClassName: labelClassName
50
- })
51
- }), tooltip);
52
- };
53
- /** Navigation extra item with custom content */ export const HeaderNavigationTriggerCustom = ({ children, id, className, tooltip, title, ...rest })=>withTooltip(/*#__PURE__*/ _jsx("div", {
54
- "data-cy": `navigation-custom-${id}`,
55
- "data-pendo": `navigation-custom-${id}`,
56
- ...rest,
57
- title: title,
58
- className: classNames(Styles.navigationItem, Styles.navigationLink, 'cursor-pointer', className),
59
- children: children
60
- }), tooltip);
61
-
62
- //# sourceMappingURL=header-navigation-links.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/components/header-navigation/header-navigation-links.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { FC, ReactNode, useContext } from 'react';\nimport { NavigationComponentContext } from '../../utils/navigation-context';\nimport {\n HeaderNavigationLinkProps,\n HeaderNavigationTriggerProps,\n} from '../../utils/navigation-legacy';\nimport { getCounterTag } from '../../utils/side-nav';\nimport { HeaderNavigationItemContent } from './header-navigation-content';\nimport * as Styles from './header-navigation.module.less';\nimport { withTooltip } from './with-tooltip';\n\n/** Navigation extra item with link */\nexport const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({\n id,\n to,\n counter,\n hint,\n tooltip,\n className,\n icon,\n iconActive,\n iconClassName,\n iconComponent,\n iconName,\n isActive,\n label,\n labelClassName,\n tag,\n target,\n title,\n ...rest\n}) => {\n const NavigationComponent = useContext(NavigationComponentContext);\n\n return withTooltip(\n <NavigationComponent\n data-cy={`navigation-link-${id}`}\n data-pendo={`navigation-link-${id}`}\n {...rest}\n key={id}\n to={to}\n title={hint}\n className={classNames(Styles.navigationLink, Styles.navigationItem, className, {\n [Styles.navigationItemActive]: isActive === true,\n })}\n isActive={typeof isActive === 'function' ? isActive : undefined}\n activeClassName={Styles.navigationItemActive}\n target={target}\n >\n <HeaderNavigationItemContent\n tag={getCounterTag(counter, tag)}\n iconComponent={iconComponent}\n iconClassName={iconClassName}\n iconName={iconName}\n title={label}\n titleClassName={labelClassName}\n />\n </NavigationComponent>,\n tooltip\n );\n};\n\n/** Navigation extra item with icon button */\nexport const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({\n id,\n className,\n counter,\n icon,\n iconActive,\n iconClassName,\n iconComponent,\n iconName,\n isActive,\n label,\n labelClassName,\n hint,\n tag,\n tooltip,\n title,\n ...rest\n}) => {\n return withTooltip(\n <div\n data-cy={`navigation-trigger-${id}`}\n data-pendo={`navigation-trigger-${id}`}\n {...rest}\n title={hint}\n className={classNames(\n Styles.navigationItem,\n Styles.navigationLink,\n {\n [Styles.navigationItemActive]: isActive === true,\n },\n 'cursor-pointer',\n className\n )}\n >\n <HeaderNavigationItemContent\n tag={getCounterTag(counter, tag)}\n iconComponent={iconComponent}\n iconClassName={iconClassName}\n iconName={iconName}\n title={label}\n titleClassName={labelClassName}\n />\n </div>,\n tooltip\n );\n};\n\n/** Navigation extra item with custom content */\nexport const HeaderNavigationTriggerCustom: FC<\n Omit<\n HeaderNavigationTriggerProps,\n | 'counter'\n | 'iconSize'\n | 'iconName'\n | 'iconComponent'\n | 'iconClassName'\n | 'icon'\n | 'iconActive'\n > & { children: ReactNode }\n> = ({ children, id, className, tooltip, title, ...rest }) =>\n withTooltip(\n <div\n data-cy={`navigation-custom-${id}`}\n data-pendo={`navigation-custom-${id}`}\n {...rest}\n title={title}\n className={classNames(\n Styles.navigationItem,\n Styles.navigationLink,\n 'cursor-pointer',\n className\n )}\n >\n {children}\n </div>,\n tooltip\n );\n"],"names":["classNames","useContext","NavigationComponentContext","getCounterTag","HeaderNavigationItemContent","Styles","withTooltip","HeaderNavigationLink","id","to","counter","hint","tooltip","className","icon","iconActive","iconClassName","iconComponent","iconName","isActive","label","labelClassName","tag","target","title","rest","NavigationComponent","data-cy","data-pendo","key","navigationLink","navigationItem","navigationItemActive","undefined","activeClassName","titleClassName","HeaderNavigationTrigger","div","HeaderNavigationTriggerCustom","children"],"mappings":";;AAAA,OAAOA,gBAAgB,aAAa;AACpC,SAAwBC,UAAU,QAAQ,QAAQ;AAClD,SAASC,0BAA0B,QAAQ,iCAAiC;AAK5E,SAASC,aAAa,QAAQ,uBAAuB;AACrD,SAASC,2BAA2B,QAAQ,8BAA8B;AAC1E,YAAYC,YAAY,kCAAkC;AAC1D,SAASC,WAAW,QAAQ,iBAAiB;AAE7C,oCAAoC,GACpC,OAAO,MAAMC,uBAAsD,CAAC,EAChEC,EAAE,EACFC,EAAE,EACFC,OAAO,EACPC,IAAI,EACJC,OAAO,EACPC,SAAS,EACTC,IAAI,EACJC,UAAU,EACVC,aAAa,EACbC,aAAa,EACbC,QAAQ,EACRC,QAAQ,EACRC,KAAK,EACLC,cAAc,EACdC,GAAG,EACHC,MAAM,EACNC,KAAK,EACL,GAAGC,MACN;IACG,MAAMC,sBAAsBzB,WAAWC;IAEvC,OAAOI,0BACH,eAACoB;QACGC,WAAS,CAAC,gBAAgB,EAAEnB,IAAI;QAChCoB,cAAY,CAAC,gBAAgB,EAAEpB,IAAI;QAClC,GAAGiB,IAAI;QACRI,KAAKrB;QACLC,IAAIA;QACJe,OAAOb;QACPE,WAAWb,WAAWK,OAAOyB,cAAc,EAAEzB,OAAO0B,cAAc,EAAElB,WAAW;YAC3E,CAACR,OAAO2B,oBAAoB,CAAC,EAAEb,aAAa;QAChD;QACAA,UAAU,OAAOA,aAAa,aAAaA,WAAWc;QACtDC,iBAAiB7B,OAAO2B,oBAAoB;QAC5CT,QAAQA;qBAER,KAACnB;QACGkB,KAAKnB,cAAcO,SAASY;QAC5BL,eAAeA;QACfD,eAAeA;QACfE,UAAUA;QACVM,OAAOJ;QACPe,gBAAgBd;SAGxBT;AAER,EAAE;AAEF,2CAA2C,GAC3C,OAAO,MAAMwB,0BAA4D,CAAC,EACtE5B,EAAE,EACFK,SAAS,EACTH,OAAO,EACPI,IAAI,EACJC,UAAU,EACVC,aAAa,EACbC,aAAa,EACbC,QAAQ,EACRC,QAAQ,EACRC,KAAK,EACLC,cAAc,EACdV,IAAI,EACJW,GAAG,EACHV,OAAO,EACPY,KAAK,EACL,GAAGC,MACN;IACG,OAAOnB,0BACH,KAAC+B;QACGV,WAAS,CAAC,mBAAmB,EAAEnB,IAAI;QACnCoB,cAAY,CAAC,mBAAmB,EAAEpB,IAAI;QACrC,GAAGiB,IAAI;QACRD,OAAOb;QACPE,WAAWb,WACPK,OAAO0B,cAAc,EACrB1B,OAAOyB,cAAc,EACrB;YACI,CAACzB,OAAO2B,oBAAoB,CAAC,EAAEb,aAAa;QAChD,GACA,kBACAN;kBAGJ,cAAA,KAACT;YACGkB,KAAKnB,cAAcO,SAASY;YAC5BL,eAAeA;YACfD,eAAeA;YACfE,UAAUA;YACVM,OAAOJ;YACPe,gBAAgBd;;QAGxBT;AAER,EAAE;AAEF,8CAA8C,GAC9C,OAAO,MAAM0B,gCAWT,CAAC,EAAEC,QAAQ,EAAE/B,EAAE,EAAEK,SAAS,EAAED,OAAO,EAAEY,KAAK,EAAE,GAAGC,MAAM,GACrDnB,0BACI,KAAC+B;QACGV,WAAS,CAAC,kBAAkB,EAAEnB,IAAI;QAClCoB,cAAY,CAAC,kBAAkB,EAAEpB,IAAI;QACpC,GAAGiB,IAAI;QACRD,OAAOA;QACPX,WAAWb,WACPK,OAAO0B,cAAc,EACrB1B,OAAOyB,cAAc,EACrB,kBACAjB;kBAGH0B;QAEL3B,SACF"}
@@ -1,12 +0,0 @@
1
- import { FC } from 'react';
2
- declare const _default: {
3
- title: string;
4
- component: FC<import("./header-navigation").HeaderNavigationStackedProps>;
5
- parameters: {};
6
- decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
7
- };
8
- export default _default;
9
- export declare const DefaultNavigation: () => import("react/jsx-runtime").JSX.Element;
10
- export declare const WithLogoTextAndOverflow: () => import("react/jsx-runtime").JSX.Element;
11
- export declare const WithAllMonolithData: () => import("react/jsx-runtime").JSX.Element;
12
- //# sourceMappingURL=header-navigation-stacked.stories.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"header-navigation-stacked.stories.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation-stacked.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAC;;;;;;;AASrC,wBAKE;AAIF,eAAO,MAAM,iBAAiB,+CAa7B,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAmBnC,CAAC;AAQF,eAAO,MAAM,mBAAmB,+CAoF/B,CAAC"}
@@ -1,6 +0,0 @@
1
- /* stylelint-disable no-descending-specificity */
2
- @import (reference) '@servicetitan/tokens/core/tokens.less';
3
-
4
- .rocket-icon {
5
- transform: scale(0.9) translate(2px, -2px) rotate(45deg);
6
- }
@@ -1,3 +0,0 @@
1
- export const __esModule: true;
2
- export const rocketIcon: string;
3
-
@@ -1,59 +0,0 @@
1
- import { PopoverPropsStrict } from '@servicetitan/design-system';
2
- import { FC, ReactElement, ReactNode } from 'react';
3
- import { HeaderNavigationItemData } from '../../utils/navigation-legacy';
4
- export interface HeaderNavigationOverflowProps {
5
- direction: PopoverPropsStrict['direction'];
6
- width: PopoverPropsStrict['width'];
7
- portal?: boolean;
8
- }
9
- export interface HeaderNavigationProps {
10
- /** extra navigation */
11
- children?: ReactNode;
12
- /** container class name */
13
- className?: string;
14
- /** extra navigation container class name */
15
- rightClassName?: string;
16
- /** container id */
17
- id?: string;
18
- /** left content (usually used for logo) */
19
- left?: ReactElement;
20
- /** left container class name */
21
- leftClassName?: string;
22
- /** minimal width for navigation bar */
23
- minWidth?: number;
24
- /** main navigation items */
25
- items?: HeaderNavigationItemData[];
26
- /** main navigation overflow items */
27
- itemsOverflow?: HeaderNavigationItemData[];
28
- /** props for main items overflow component */
29
- overflow?: HeaderNavigationOverflowProps;
30
- }
31
- export declare const HeaderNavigation: FC<HeaderNavigationProps>;
32
- export interface HeaderNavigationStackedProps {
33
- /** container class name */
34
- className?: string;
35
- /** extra navigation */
36
- right?: ReactNode;
37
- /** extra navigation container class name */
38
- rightClassName?: string;
39
- /** container id */
40
- id?: string;
41
- /** left content (usually used for logo) */
42
- left?: ReactElement;
43
- /** left container class name */
44
- leftClassName?: string;
45
- /** center content */
46
- center?: ReactElement;
47
- /** center container class name */
48
- centerClassName?: string;
49
- /** minimal width for navigation bar */
50
- minWidth?: number;
51
- /** main navigation items */
52
- items?: HeaderNavigationItemData[];
53
- /** main navigation overflow items */
54
- itemsOverflow?: HeaderNavigationItemData[];
55
- /** props for main items overflow component */
56
- overflow?: HeaderNavigationOverflowProps;
57
- }
58
- export declare const HeaderNavigationStacked: FC<HeaderNavigationStackedProps>;
59
- //# sourceMappingURL=header-navigation.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"header-navigation.d.ts","sourceRoot":"","sources":["../../../src/components/header-navigation/header-navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAEhF,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAC;AAE9F,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AAWzE,MAAM,WAAW,6BAA6B;IAC1C,SAAS,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC3C,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACnC,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AA0CD,MAAM,WAAW,qBAAqB;IAClC,uBAAuB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,2CAA2C;IAC3C,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,gCAAgC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACnC,qCAAqC;IACrC,aAAa,CAAC,EAAE,wBAAwB,EAAE,CAAC;IAC3C,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,6BAA6B,CAAC;CAC5C;AAQD,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAiGtD,CAAC;AAEF,MAAM,WAAW,4BAA4B;IACzC,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,2CAA2C;IAC3C,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,gCAAgC;IAChC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qBAAqB;IACrB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,kCAAkC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACnC,qCAAqC;IACrC,aAAa,CAAC,EAAE,wBAAwB,EAAE,CAAC;IAC3C,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,6BAA6B,CAAC;CAC5C;AAED,eAAO,MAAM,uBAAuB,EAAE,EAAE,CAAC,4BAA4B,CA8GpE,CAAC"}
@@ -1,228 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { createElement as _createElement } from "react";
3
- import { Icon, Popover } from '@servicetitan/design-system';
4
- import classNames from 'classnames';
5
- import { useCallback, useEffect, useRef, useState } from 'react';
6
- import { NavigationLegacyContext } from '../../utils/navigation-context';
7
- import { HeaderNavigationItem } from './header-navigation-content';
8
- import * as Styles from './header-navigation.module.less';
9
- function useForceUpdate() {
10
- const [, setTick] = useState(0);
11
- return useCallback(()=>{
12
- setTick((tick)=>tick + 1);
13
- }, []);
14
- }
15
- const HeaderNavigationOverflow = ({ items, overflow })=>{
16
- const [isOpen, setIsOpen] = useState(false);
17
- var _overflow_direction, _overflow_width;
18
- return /*#__PURE__*/ _jsx(Popover, {
19
- open: isOpen,
20
- trigger: /*#__PURE__*/ _jsx(Icon, {
21
- name: "more_vert",
22
- size: "24px",
23
- className: "c-pointer",
24
- onClick: ()=>setIsOpen(true),
25
- color: "white",
26
- "data-cy": "navigation-overflow-trigger",
27
- "data-pendo": "navigation-overflow-trigger"
28
- }),
29
- direction: (_overflow_direction = overflow === null || overflow === void 0 ? void 0 : overflow.direction) !== null && _overflow_direction !== void 0 ? _overflow_direction : 'bl',
30
- width: (_overflow_width = overflow === null || overflow === void 0 ? void 0 : overflow.width) !== null && _overflow_width !== void 0 ? _overflow_width : 'xs',
31
- portal: overflow === null || overflow === void 0 ? void 0 : overflow.portal,
32
- onClickOutside: ()=>setIsOpen(false),
33
- wrapperClassName: "d-if-i align-items-center",
34
- popoverContentClassName: Styles.overflowPopover,
35
- children: /*#__PURE__*/ _jsx("div", {
36
- onClick: ()=>setIsOpen(false),
37
- className: Styles.navigationOverflow,
38
- "data-cy": "navigation-overflow-content",
39
- children: items.map((item)=>/*#__PURE__*/ _createElement(HeaderNavigationItem, {
40
- ...item,
41
- key: item.id,
42
- minimized: false,
43
- main: false
44
- }))
45
- })
46
- });
47
- };
48
- var MinimizedState = /*#__PURE__*/ function(MinimizedState) {
49
- MinimizedState[MinimizedState["Calculating"] = 0] = "Calculating";
50
- MinimizedState[MinimizedState["Minimized"] = 1] = "Minimized";
51
- MinimizedState[MinimizedState["Full"] = 2] = "Full";
52
- return MinimizedState;
53
- }(MinimizedState || {});
54
- export const HeaderNavigation = ({ children, className, id, items, itemsOverflow, left, leftClassName, rightClassName, minWidth = 800, overflow })=>{
55
- const leftRef = useRef(null);
56
- const rightRef = useRef(null);
57
- const centerRef = useRef(null);
58
- const navigationRef = useRef(null);
59
- const forceUpdate = useForceUpdate();
60
- const [minimized, setMinimized] = useState(0);
61
- useEffect(()=>{
62
- const handleResize = ()=>{
63
- setMinimized(0);
64
- forceUpdate();
65
- };
66
- window.addEventListener('resize', handleResize);
67
- return ()=>window.removeEventListener('resize', handleResize);
68
- }, [
69
- forceUpdate
70
- ]);
71
- useEffect(()=>{
72
- setMinimized(0);
73
- forceUpdate();
74
- }, [
75
- items,
76
- itemsOverflow,
77
- forceUpdate
78
- ]);
79
- const updateIsMinimized = ()=>{
80
- if (centerRef.current && navigationRef.current) {
81
- if (navigationRef.current.clientWidth > centerRef.current.clientWidth) {
82
- setMinimized(1);
83
- } else if (minimized === 0) {
84
- setMinimized(2);
85
- }
86
- }
87
- };
88
- useEffect(()=>{
89
- updateIsMinimized();
90
- });
91
- return /*#__PURE__*/ _jsx(NavigationLegacyContext.Provider, {
92
- value: true,
93
- children: /*#__PURE__*/ _jsxs("div", {
94
- className: classNames(Styles.header, className, {
95
- [Styles.calculating]: minimized === 0
96
- }),
97
- style: {
98
- minWidth: `${minWidth}px`
99
- },
100
- id: id,
101
- "data-cy": "header-navigation",
102
- children: [
103
- /*#__PURE__*/ _jsx("div", {
104
- className: leftClassName,
105
- ref: leftRef,
106
- "data-cy": "navigation-left",
107
- children: left
108
- }),
109
- /*#__PURE__*/ _jsx("div", {
110
- ref: centerRef,
111
- className: classNames('d-if flex-grow-1 flex-basis-0 justify-content-center', Styles.center),
112
- "data-cy": "navigation-items",
113
- children: /*#__PURE__*/ _jsxs("div", {
114
- ref: navigationRef,
115
- className: classNames('d-if'),
116
- children: [
117
- items === null || items === void 0 ? void 0 : items.map((item)=>/*#__PURE__*/ _createElement(HeaderNavigationItem, {
118
- ...item,
119
- minimized: minimized === 1,
120
- main: true,
121
- key: item.id
122
- })),
123
- !!(itemsOverflow === null || itemsOverflow === void 0 ? void 0 : itemsOverflow.length) && /*#__PURE__*/ _jsx(HeaderNavigationOverflow, {
124
- items: itemsOverflow,
125
- overflow: overflow
126
- })
127
- ]
128
- })
129
- }),
130
- /*#__PURE__*/ _jsx("div", {
131
- className: classNames('d-f flex-row justify-content-end align-items-center', Styles.right, rightClassName),
132
- ref: rightRef,
133
- "data-cy": "navigation-right",
134
- children: children
135
- })
136
- ]
137
- })
138
- });
139
- };
140
- export const HeaderNavigationStacked = ({ className, id, items, itemsOverflow, left, leftClassName, right, rightClassName, center, centerClassName, minWidth = 800, overflow })=>{
141
- const bottomRef = useRef(null);
142
- const navigationRef = useRef(null);
143
- const forceUpdate = useForceUpdate();
144
- const [minimized, setMinimized] = useState(0);
145
- useEffect(()=>{
146
- const handleResize = ()=>{
147
- setMinimized(0);
148
- forceUpdate();
149
- };
150
- window.addEventListener('resize', handleResize);
151
- return ()=>window.removeEventListener('resize', handleResize);
152
- }, [
153
- forceUpdate
154
- ]);
155
- useEffect(()=>{
156
- setMinimized(0);
157
- forceUpdate();
158
- }, [
159
- items,
160
- itemsOverflow,
161
- forceUpdate
162
- ]);
163
- const updateIsMinimized = ()=>{
164
- if (bottomRef.current && navigationRef.current) {
165
- if (navigationRef.current.clientWidth + 16 > bottomRef.current.clientWidth) {
166
- setMinimized(1);
167
- } else if (minimized === 0) {
168
- setMinimized(2);
169
- }
170
- }
171
- };
172
- useEffect(()=>{
173
- updateIsMinimized();
174
- });
175
- return /*#__PURE__*/ _jsx(NavigationLegacyContext.Provider, {
176
- value: true,
177
- children: /*#__PURE__*/ _jsxs("div", {
178
- className: classNames(Styles.headerStacked, {
179
- [Styles.calculating]: minimized === 0
180
- }, className),
181
- style: {
182
- minWidth: `${minWidth}px`
183
- },
184
- id: id,
185
- "data-cy": "header-navigation",
186
- children: [
187
- /*#__PURE__*/ _jsx("div", {
188
- className: classNames(Styles.heTopLeft, leftClassName),
189
- "data-cy": "navigation-left",
190
- children: left
191
- }),
192
- /*#__PURE__*/ _jsx("div", {
193
- className: classNames(Styles.heTopCenter, centerClassName),
194
- "data-cy": "navigation-center",
195
- children: center
196
- }),
197
- /*#__PURE__*/ _jsx("div", {
198
- className: classNames('d-f flex-row justify-content-end align-items-center', Styles.heTopRight, rightClassName),
199
- "data-cy": "navigation-right",
200
- children: right
201
- }),
202
- /*#__PURE__*/ _jsx("div", {
203
- ref: bottomRef,
204
- className: classNames(Styles.heBottom, 'd-if flex-grow-1 flex-basis-0 justify-content-center', Styles.center),
205
- "data-cy": "navigation-items",
206
- children: /*#__PURE__*/ _jsxs("div", {
207
- ref: navigationRef,
208
- className: classNames('d-if'),
209
- children: [
210
- items === null || items === void 0 ? void 0 : items.map((item)=>/*#__PURE__*/ _createElement(HeaderNavigationItem, {
211
- ...item,
212
- minimized: minimized === 1,
213
- main: true,
214
- key: item.id
215
- })),
216
- !!(itemsOverflow === null || itemsOverflow === void 0 ? void 0 : itemsOverflow.length) && /*#__PURE__*/ _jsx(HeaderNavigationOverflow, {
217
- items: itemsOverflow,
218
- overflow: overflow
219
- })
220
- ]
221
- })
222
- })
223
- ]
224
- })
225
- });
226
- };
227
-
228
- //# sourceMappingURL=header-navigation.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/components/header-navigation/header-navigation.tsx"],"sourcesContent":["import { Icon, Popover, PopoverPropsStrict } from '@servicetitan/design-system';\nimport classNames from 'classnames';\nimport { FC, ReactElement, ReactNode, useCallback, useEffect, useRef, useState } from 'react';\nimport { NavigationLegacyContext } from '../../utils/navigation-context';\nimport { HeaderNavigationItemData } from '../../utils/navigation-legacy';\nimport { HeaderNavigationItem } from './header-navigation-content';\nimport * as Styles from './header-navigation.module.less';\n\nfunction useForceUpdate() {\n const [, setTick] = useState(0);\n return useCallback(() => {\n setTick(tick => tick + 1);\n }, []);\n}\n\nexport interface HeaderNavigationOverflowProps {\n direction: PopoverPropsStrict['direction'];\n width: PopoverPropsStrict['width'];\n portal?: boolean;\n}\n\nconst HeaderNavigationOverflow: FC<{\n items: HeaderNavigationItemData[];\n overflow?: HeaderNavigationOverflowProps;\n}> = ({ items, overflow }) => {\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n <Popover\n open={isOpen}\n trigger={\n <Icon\n name=\"more_vert\"\n size=\"24px\"\n className=\"c-pointer\"\n onClick={() => setIsOpen(true)}\n color=\"white\"\n data-cy=\"navigation-overflow-trigger\"\n data-pendo=\"navigation-overflow-trigger\"\n />\n }\n direction={overflow?.direction ?? 'bl'}\n width={overflow?.width ?? 'xs'}\n portal={overflow?.portal}\n onClickOutside={() => setIsOpen(false)}\n wrapperClassName=\"d-if-i align-items-center\"\n popoverContentClassName={Styles.overflowPopover}\n >\n <div\n onClick={() => setIsOpen(false)}\n className={Styles.navigationOverflow}\n data-cy=\"navigation-overflow-content\"\n >\n {items.map(item => (\n <HeaderNavigationItem {...item} key={item.id} minimized={false} main={false} />\n ))}\n </div>\n </Popover>\n );\n};\n\nexport interface HeaderNavigationProps {\n /** extra navigation */\n children?: ReactNode;\n /** container class name */\n className?: string;\n /** extra navigation container class name */\n rightClassName?: string;\n /** container id */\n id?: string;\n /** left content (usually used for logo) */\n left?: ReactElement;\n /** left container class name */\n leftClassName?: string;\n /** minimal width for navigation bar */\n minWidth?: number;\n /** main navigation items */\n items?: HeaderNavigationItemData[];\n /** main navigation overflow items */\n itemsOverflow?: HeaderNavigationItemData[];\n /** props for main items overflow component */\n overflow?: HeaderNavigationOverflowProps;\n}\n\nenum MinimizedState {\n Calculating,\n Minimized,\n Full,\n}\n\nexport const HeaderNavigation: FC<HeaderNavigationProps> = ({\n children,\n className,\n id,\n items,\n itemsOverflow,\n left,\n leftClassName,\n rightClassName,\n minWidth = 800,\n overflow,\n}) => {\n const leftRef = useRef<HTMLDivElement>(null);\n const rightRef = useRef<HTMLDivElement>(null);\n const centerRef = useRef<HTMLDivElement>(null);\n const navigationRef = useRef<HTMLDivElement>(null);\n const forceUpdate = useForceUpdate();\n const [minimized, setMinimized] = useState(MinimizedState.Calculating);\n\n useEffect(() => {\n const handleResize = () => {\n setMinimized(MinimizedState.Calculating);\n forceUpdate();\n };\n\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, [forceUpdate]);\n\n useEffect(() => {\n setMinimized(MinimizedState.Calculating);\n forceUpdate();\n }, [items, itemsOverflow, forceUpdate]);\n\n const updateIsMinimized = () => {\n if (centerRef.current && navigationRef.current) {\n if (navigationRef.current.clientWidth > centerRef.current.clientWidth) {\n setMinimized(MinimizedState.Minimized);\n } else if (minimized === MinimizedState.Calculating) {\n setMinimized(MinimizedState.Full);\n }\n }\n };\n\n useEffect(() => {\n updateIsMinimized();\n });\n\n return (\n <NavigationLegacyContext.Provider value>\n <div\n className={classNames(Styles.header, className, {\n [Styles.calculating]: minimized === MinimizedState.Calculating,\n })}\n style={{ minWidth: `${minWidth}px` }}\n id={id}\n data-cy=\"header-navigation\"\n >\n <div className={leftClassName} ref={leftRef} data-cy=\"navigation-left\">\n {left}\n </div>\n <div\n ref={centerRef}\n className={classNames(\n 'd-if flex-grow-1 flex-basis-0 justify-content-center',\n Styles.center\n )}\n data-cy=\"navigation-items\"\n >\n <div ref={navigationRef} className={classNames('d-if')}>\n {items?.map(item => (\n <HeaderNavigationItem\n {...item}\n minimized={minimized === MinimizedState.Minimized}\n main\n key={item.id}\n />\n ))}\n {!!itemsOverflow?.length && (\n <HeaderNavigationOverflow items={itemsOverflow} overflow={overflow} />\n )}\n </div>\n </div>\n <div\n className={classNames(\n 'd-f flex-row justify-content-end align-items-center',\n Styles.right,\n rightClassName\n )}\n ref={rightRef}\n data-cy=\"navigation-right\"\n >\n {children}\n </div>\n </div>\n </NavigationLegacyContext.Provider>\n );\n};\n\nexport interface HeaderNavigationStackedProps {\n /** container class name */\n className?: string;\n /** extra navigation */\n right?: ReactNode;\n /** extra navigation container class name */\n rightClassName?: string;\n /** container id */\n id?: string;\n /** left content (usually used for logo) */\n left?: ReactElement;\n /** left container class name */\n leftClassName?: string;\n /** center content */\n center?: ReactElement;\n /** center container class name */\n centerClassName?: string;\n /** minimal width for navigation bar */\n minWidth?: number;\n /** main navigation items */\n items?: HeaderNavigationItemData[];\n /** main navigation overflow items */\n itemsOverflow?: HeaderNavigationItemData[];\n /** props for main items overflow component */\n overflow?: HeaderNavigationOverflowProps;\n}\n\nexport const HeaderNavigationStacked: FC<HeaderNavigationStackedProps> = ({\n className,\n id,\n items,\n itemsOverflow,\n left,\n leftClassName,\n right,\n rightClassName,\n center,\n centerClassName,\n minWidth = 800,\n overflow,\n}) => {\n const bottomRef = useRef<HTMLDivElement>(null);\n const navigationRef = useRef<HTMLDivElement>(null);\n const forceUpdate = useForceUpdate();\n const [minimized, setMinimized] = useState(MinimizedState.Calculating);\n\n useEffect(() => {\n const handleResize = () => {\n setMinimized(MinimizedState.Calculating);\n forceUpdate();\n };\n\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, [forceUpdate]);\n\n useEffect(() => {\n setMinimized(MinimizedState.Calculating);\n forceUpdate();\n }, [items, itemsOverflow, forceUpdate]);\n\n const updateIsMinimized = () => {\n if (bottomRef.current && navigationRef.current) {\n if (navigationRef.current.clientWidth + 16 > bottomRef.current.clientWidth) {\n setMinimized(MinimizedState.Minimized);\n } else if (minimized === MinimizedState.Calculating) {\n setMinimized(MinimizedState.Full);\n }\n }\n };\n\n useEffect(() => {\n updateIsMinimized();\n });\n\n return (\n <NavigationLegacyContext.Provider value>\n <div\n className={classNames(\n Styles.headerStacked,\n {\n [Styles.calculating]: minimized === MinimizedState.Calculating,\n },\n className\n )}\n style={{ minWidth: `${minWidth}px` }}\n id={id}\n data-cy=\"header-navigation\"\n >\n <div\n className={classNames(Styles.heTopLeft, leftClassName)}\n data-cy=\"navigation-left\"\n >\n {left}\n </div>\n <div\n className={classNames(Styles.heTopCenter, centerClassName)}\n data-cy=\"navigation-center\"\n >\n {center}\n </div>\n <div\n className={classNames(\n 'd-f flex-row justify-content-end align-items-center',\n Styles.heTopRight,\n rightClassName\n )}\n data-cy=\"navigation-right\"\n >\n {right}\n </div>\n <div\n ref={bottomRef}\n className={classNames(\n Styles.heBottom,\n 'd-if flex-grow-1 flex-basis-0 justify-content-center',\n Styles.center\n )}\n data-cy=\"navigation-items\"\n >\n <div ref={navigationRef} className={classNames('d-if')}>\n {items?.map(item => (\n <HeaderNavigationItem\n {...item}\n minimized={minimized === MinimizedState.Minimized}\n main\n key={item.id}\n />\n ))}\n {!!itemsOverflow?.length && (\n <HeaderNavigationOverflow items={itemsOverflow} overflow={overflow} />\n )}\n </div>\n </div>\n </div>\n </NavigationLegacyContext.Provider>\n );\n};\n"],"names":["Icon","Popover","classNames","useCallback","useEffect","useRef","useState","NavigationLegacyContext","HeaderNavigationItem","Styles","useForceUpdate","setTick","tick","HeaderNavigationOverflow","items","overflow","isOpen","setIsOpen","open","trigger","name","size","className","onClick","color","data-cy","data-pendo","direction","width","portal","onClickOutside","wrapperClassName","popoverContentClassName","overflowPopover","div","navigationOverflow","map","item","key","id","minimized","main","MinimizedState","HeaderNavigation","children","itemsOverflow","left","leftClassName","rightClassName","minWidth","leftRef","rightRef","centerRef","navigationRef","forceUpdate","setMinimized","handleResize","window","addEventListener","removeEventListener","updateIsMinimized","current","clientWidth","Provider","value","header","calculating","style","ref","center","length","right","HeaderNavigationStacked","centerClassName","bottomRef","headerStacked","heTopLeft","heTopCenter","heTopRight","heBottom"],"mappings":"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"}