@servicetitan/navigation 10.7.0 → 11.0.0-canary.237.4d902dc.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 (149) hide show
  1. package/dist/components/header-navigation/header-navigation-extra.stories.d.ts.map +1 -1
  2. package/dist/components/header-navigation/header-navigation-extra.stories.js +5 -5
  3. package/dist/components/header-navigation/header-navigation-extra.stories.js.map +1 -1
  4. package/dist/components/header-navigation/header-navigation-links.d.ts.map +1 -1
  5. package/dist/components/header-navigation/header-navigation-links.js +2 -2
  6. package/dist/components/header-navigation/header-navigation-links.js.map +1 -1
  7. package/dist/components/header-navigation/header-navigation-stacked.stories.d.ts.map +1 -1
  8. package/dist/components/header-navigation/header-navigation-stacked.stories.js +1 -1
  9. package/dist/components/header-navigation/header-navigation-stacked.stories.js.map +1 -1
  10. package/dist/components/header-navigation/header-navigation.stories.d.ts.map +1 -1
  11. package/dist/components/header-navigation/header-navigation.stories.js +2 -2
  12. package/dist/components/header-navigation/header-navigation.stories.js.map +1 -1
  13. package/dist/components/header-navigation/with-tooltip.d.ts +1 -1
  14. package/dist/components/header-navigation/with-tooltip.d.ts.map +1 -1
  15. package/dist/components/left-navigation/header-navigation-tiny.stories.d.ts.map +1 -1
  16. package/dist/components/left-navigation/header-navigation-tiny.stories.js +2 -2
  17. package/dist/components/left-navigation/header-navigation-tiny.stories.js.map +1 -1
  18. package/dist/components/links.d.ts.map +1 -1
  19. package/dist/components/links.js +7 -7
  20. package/dist/components/links.js.map +1 -1
  21. package/dist/components/logo/logo-company-title.d.ts +1 -0
  22. package/dist/components/logo/logo-company-title.d.ts.map +1 -1
  23. package/dist/components/logo/logo-company-title.js +2 -2
  24. package/dist/components/logo/logo-company-title.js.map +1 -1
  25. package/dist/components/profile-dropdown/profile-dropdown.d.ts +6 -3
  26. package/dist/components/profile-dropdown/profile-dropdown.d.ts.map +1 -1
  27. package/dist/components/profile-dropdown/profile-dropdown.js +7 -8
  28. package/dist/components/profile-dropdown/profile-dropdown.js.map +1 -1
  29. package/dist/components/profile-dropdown/profile-dropdown.module.less +4 -0
  30. package/dist/components/profile-dropdown/profile-dropdown.stories.js +2 -2
  31. package/dist/components/profile-dropdown/profile-dropdown.stories.js.map +1 -1
  32. package/dist/components/titan-layout/index.d.ts +6 -0
  33. package/dist/components/titan-layout/index.d.ts.map +1 -0
  34. package/dist/components/titan-layout/index.js +6 -0
  35. package/dist/components/titan-layout/index.js.map +1 -0
  36. package/dist/components/titan-layout/interface-internal.d.ts +6 -0
  37. package/dist/components/titan-layout/interface-internal.d.ts.map +1 -0
  38. package/dist/components/titan-layout/interface-internal.js +2 -0
  39. package/dist/components/titan-layout/interface-internal.js.map +1 -0
  40. package/dist/components/titan-layout/interface.d.ts +21 -0
  41. package/dist/components/titan-layout/interface.d.ts.map +1 -0
  42. package/dist/components/titan-layout/interface.js +2 -0
  43. package/dist/components/titan-layout/interface.js.map +1 -0
  44. package/dist/components/titan-layout/layout-context.d.ts +20 -0
  45. package/dist/components/titan-layout/layout-context.d.ts.map +1 -0
  46. package/dist/components/titan-layout/layout-context.js +12 -0
  47. package/dist/components/titan-layout/layout-context.js.map +1 -0
  48. package/dist/components/titan-layout/layout-header-links.d.ts +7 -0
  49. package/dist/components/titan-layout/layout-header-links.d.ts.map +1 -0
  50. package/dist/components/titan-layout/layout-header-links.js +32 -0
  51. package/dist/components/titan-layout/layout-header-links.js.map +1 -0
  52. package/dist/components/titan-layout/layout-header.d.ts +20 -0
  53. package/dist/components/titan-layout/layout-header.d.ts.map +1 -0
  54. package/dist/components/titan-layout/layout-header.js +11 -0
  55. package/dist/components/titan-layout/layout-header.js.map +1 -0
  56. package/dist/components/titan-layout/layout-header.module.less +153 -0
  57. package/dist/components/titan-layout/layout-logo.d.ts +12 -0
  58. package/dist/components/titan-layout/layout-logo.d.ts.map +1 -0
  59. package/dist/components/titan-layout/layout-logo.js +15 -0
  60. package/dist/components/titan-layout/layout-logo.js.map +1 -0
  61. package/dist/components/titan-layout/layout-logo.stories.d.ts +13 -0
  62. package/dist/components/titan-layout/layout-logo.stories.d.ts.map +1 -0
  63. package/dist/components/titan-layout/layout-logo.stories.js +17 -0
  64. package/dist/components/titan-layout/layout-logo.stories.js.map +1 -0
  65. package/dist/components/titan-layout/layout-profile.d.ts +9 -0
  66. package/dist/components/titan-layout/layout-profile.d.ts.map +1 -0
  67. package/dist/components/titan-layout/layout-profile.js +44 -0
  68. package/dist/components/titan-layout/layout-profile.js.map +1 -0
  69. package/dist/components/titan-layout/layout-profile.stories.d.ts +13 -0
  70. package/dist/components/titan-layout/layout-profile.stories.d.ts.map +1 -0
  71. package/dist/components/titan-layout/layout-profile.stories.js +13 -0
  72. package/dist/components/titan-layout/layout-profile.stories.js.map +1 -0
  73. package/dist/components/titan-layout/layout-sidebar-links-internal.d.ts +46 -0
  74. package/dist/components/titan-layout/layout-sidebar-links-internal.d.ts.map +1 -0
  75. package/dist/components/titan-layout/layout-sidebar-links-internal.js +61 -0
  76. package/dist/components/titan-layout/layout-sidebar-links-internal.js.map +1 -0
  77. package/dist/components/titan-layout/layout-sidebar-links.d.ts +6 -0
  78. package/dist/components/titan-layout/layout-sidebar-links.d.ts.map +1 -0
  79. package/dist/components/titan-layout/layout-sidebar-links.js +21 -0
  80. package/dist/components/titan-layout/layout-sidebar-links.js.map +1 -0
  81. package/dist/components/titan-layout/layout-sidebar.d.ts +18 -0
  82. package/dist/components/titan-layout/layout-sidebar.d.ts.map +1 -0
  83. package/dist/components/titan-layout/layout-sidebar.js +65 -0
  84. package/dist/components/titan-layout/layout-sidebar.js.map +1 -0
  85. package/dist/components/titan-layout/layout-sidebar.module.less +528 -0
  86. package/dist/components/titan-layout/titan-layout.d.ts +36 -0
  87. package/dist/components/titan-layout/titan-layout.d.ts.map +1 -0
  88. package/dist/components/titan-layout/titan-layout.js +109 -0
  89. package/dist/components/titan-layout/titan-layout.js.map +1 -0
  90. package/dist/components/titan-layout/titan-layout.module.less +53 -0
  91. package/dist/components/titan-layout/titan-layout.stories.d.ts +18 -0
  92. package/dist/components/titan-layout/titan-layout.stories.d.ts.map +1 -0
  93. package/dist/components/titan-layout/titan-layout.stories.js +62 -0
  94. package/dist/components/titan-layout/titan-layout.stories.js.map +1 -0
  95. package/dist/components/titan-layout/with-tooltip.d.ts +4 -0
  96. package/dist/components/titan-layout/with-tooltip.d.ts.map +1 -0
  97. package/dist/components/titan-layout/with-tooltip.js +4 -0
  98. package/dist/components/titan-layout/with-tooltip.js.map +1 -0
  99. package/dist/index.d.ts +2 -1
  100. package/dist/index.d.ts.map +1 -1
  101. package/dist/index.js +2 -1
  102. package/dist/index.js.map +1 -1
  103. package/dist/test/data.d.ts.map +1 -1
  104. package/dist/test/data.js +3 -3
  105. package/dist/test/data.js.map +1 -1
  106. package/dist/utils/navigation-legacy.d.ts +3 -1
  107. package/dist/utils/navigation-legacy.d.ts.map +1 -1
  108. package/dist/utils/use-breakpoint.d.ts +7 -0
  109. package/dist/utils/use-breakpoint.d.ts.map +1 -0
  110. package/dist/utils/use-breakpoint.js +13 -0
  111. package/dist/utils/use-breakpoint.js.map +1 -0
  112. package/package.json +5 -6
  113. package/src/components/header-navigation/header-navigation-extra.stories.tsx +7 -0
  114. package/src/components/header-navigation/header-navigation-links.tsx +2 -0
  115. package/src/components/header-navigation/header-navigation-stacked.stories.tsx +4 -0
  116. package/src/components/header-navigation/header-navigation.stories.tsx +5 -0
  117. package/src/components/left-navigation/header-navigation-tiny.stories.tsx +6 -0
  118. package/src/components/left-navigation/side-navigation-links.tsx +1 -1
  119. package/src/components/links.tsx +33 -13
  120. package/src/components/logo/logo-company-title.tsx +8 -6
  121. package/src/components/profile-dropdown/profile-dropdown.module.less +4 -0
  122. package/src/components/profile-dropdown/profile-dropdown.stories.tsx +4 -4
  123. package/src/components/profile-dropdown/profile-dropdown.tsx +43 -46
  124. package/src/components/titan-layout/index.ts +5 -0
  125. package/src/components/titan-layout/interface-internal.ts +6 -0
  126. package/src/components/titan-layout/interface.ts +26 -0
  127. package/src/components/titan-layout/layout-context.tsx +30 -0
  128. package/src/components/titan-layout/layout-header-links.tsx +144 -0
  129. package/src/components/titan-layout/layout-header.module.less +153 -0
  130. package/src/components/titan-layout/layout-header.module.less.d.ts +16 -0
  131. package/src/components/titan-layout/layout-header.tsx +86 -0
  132. package/src/components/titan-layout/layout-logo.stories.tsx +31 -0
  133. package/src/components/titan-layout/layout-logo.tsx +57 -0
  134. package/src/components/titan-layout/layout-profile.stories.tsx +37 -0
  135. package/src/components/titan-layout/layout-profile.tsx +116 -0
  136. package/src/components/titan-layout/layout-sidebar-links-internal.tsx +265 -0
  137. package/src/components/titan-layout/layout-sidebar-links.tsx +56 -0
  138. package/src/components/titan-layout/layout-sidebar.module.less +528 -0
  139. package/src/components/titan-layout/layout-sidebar.module.less.d.ts +50 -0
  140. package/src/components/titan-layout/layout-sidebar.tsx +298 -0
  141. package/src/components/titan-layout/titan-layout.module.less +53 -0
  142. package/src/components/titan-layout/titan-layout.module.less.d.ts +11 -0
  143. package/src/components/titan-layout/titan-layout.stories.tsx +194 -0
  144. package/src/components/titan-layout/titan-layout.tsx +270 -0
  145. package/src/components/titan-layout/with-tooltip.tsx +16 -0
  146. package/src/index.ts +2 -1
  147. package/src/test/data.tsx +3 -2
  148. package/src/utils/navigation-legacy.ts +3 -1
  149. package/src/utils/use-breakpoint.ts +19 -0
@@ -0,0 +1,528 @@
1
+ /* stylelint-disable no-descending-specificity */
2
+ @import (reference) '@servicetitan/tokens/core/tokens.less';
3
+
4
+ @text-color: var(--colorsTextInverted, @color-white);
5
+ @text-color-active: var(--colorsTextPrimarySubdued, @color-blue-300);
6
+ @border-color: var(--colorsTextOnGrey, @color-neutral-200);
7
+ @bg-color: #0f1d26;
8
+ @bg-color-hover: rgba(255, 255, 255, 0.08);
9
+ @bg-color-active: rgba(120, 187, 250, 0.2);
10
+
11
+ .nav {
12
+ background-color: @bg-color;
13
+ display: flex;
14
+ flex-direction: column;
15
+ align-items: stretch;
16
+ }
17
+
18
+ // desktop version positioned with flex
19
+ .nav-flex {
20
+ flex-basis: var(--nav-offset-left);
21
+ flex-grow: 0;
22
+ flex-shrink: 0;
23
+ }
24
+
25
+ // desktop version positioned with fixed
26
+ .nav-fixed {
27
+ position: fixed;
28
+ top: var(--nav-offset-top);
29
+ bottom: 0;
30
+ left: 0;
31
+ }
32
+
33
+ // mobile version
34
+ .nav-drawer {
35
+ display: none;
36
+ position: fixed;
37
+ max-width: 400px;
38
+ width: 0;
39
+ top: 0;
40
+ bottom: 0;
41
+ left: 0;
42
+ z-index: 991;
43
+
44
+ .nav-main {
45
+ padding-left: @spacing-2;
46
+ padding-right: @spacing-2;
47
+ }
48
+ .nav-close-wrapper {
49
+ display: flex;
50
+ justify-content: flex-end;
51
+ margin-right: -@spacing-2;
52
+
53
+ .nav-close {
54
+ padding-top: @spacing-2;
55
+ padding-left: @spacing-2;
56
+ padding-right: @spacing-2;
57
+ }
58
+ }
59
+
60
+ .nav-item {
61
+ margin-bottom: @spacing-half;
62
+ }
63
+ .nav-top {
64
+ margin-bottom: @spacing-half;
65
+ }
66
+ .nav-bottom {
67
+ .divider {
68
+ margin-bottom: @spacing-half;
69
+ }
70
+ }
71
+
72
+ .submenu {
73
+ .submenu-item {
74
+ margin-bottom: @spacing-half;
75
+ }
76
+ }
77
+ }
78
+
79
+ // mobile version opened
80
+ .nav-drawer-opened {
81
+ display: flex;
82
+ width: 90vw;
83
+ }
84
+
85
+ @media only screen and (min-width: 361px) {
86
+ width: 85vw;
87
+ }
88
+ @media only screen and (min-width: 481px) {
89
+ width: 80vw;
90
+ }
91
+
92
+ // desktop version collapsed
93
+ .nav-slim {
94
+ width: 64px;
95
+
96
+ .toggle {
97
+ width: 64px;
98
+ margin-top: @spacing-1;
99
+ margin-bottom: 12px;
100
+ display: flex;
101
+ justify-content: center;
102
+
103
+ .toggle-icon-wrapper {
104
+ padding-left: @spacing-half;
105
+ padding-right: @spacing-half;
106
+ }
107
+ }
108
+
109
+ .nav-item {
110
+ flex-direction: column;
111
+ width: 64px;
112
+ overflow-x: hidden;
113
+ padding-top: @spacing-1;
114
+
115
+ &:not(:first-child) {
116
+ margin-top: @spacing-half;
117
+ }
118
+
119
+ .nav-item-counter[data-anv][data-anv] {
120
+ position: absolute;
121
+ right: 0;
122
+ top: 4px;
123
+ z-index: auto;
124
+
125
+ &.nav-item-counter-long {
126
+ right: 2px;
127
+ }
128
+ }
129
+
130
+ .nav-item-icon-wrapper {
131
+ flex: 1;
132
+ padding: @spacing-half;
133
+ }
134
+
135
+ .nav-item-text-expanded {
136
+ display: none;
137
+ }
138
+ .nav-item-text-collapsed {
139
+ font-family: @base-font-family;
140
+ font-size: 11px;
141
+ line-height: 11px;
142
+ margin: 2px @spacing-half @spacing-0;
143
+ text-align: center;
144
+ }
145
+
146
+ .nav-item-text-collapsed.nav-item-text-small {
147
+ font-size: 10.5px;
148
+ }
149
+ }
150
+
151
+ .nav-top .divider {
152
+ margin-top: @spacing-1;
153
+ }
154
+ }
155
+
156
+ // desktop version expanded
157
+ .nav-wide {
158
+ width: var(--nav-offset-left);
159
+ padding-top: @spacing-2;
160
+
161
+ .toggle {
162
+ .toggle-content {
163
+ margin: @spacing-2;
164
+
165
+ .toggle-icon-wrapper {
166
+ padding-left: @spacing-half;
167
+ padding-right: @spacing-half;
168
+ }
169
+
170
+ .toggle-text {
171
+ padding-left: @spacing-0 !important;
172
+ }
173
+ }
174
+ }
175
+
176
+ .nav-top .divider {
177
+ margin-top: @spacing-1;
178
+ margin-bottom: @spacing-1;
179
+ }
180
+ }
181
+
182
+ .nav-drawer,
183
+ .nav-wide {
184
+ .nav-item {
185
+ flex-direction: row;
186
+ margin-left: @spacing-1;
187
+ margin-right: @spacing-1;
188
+
189
+ .nav-item-icon-wrapper {
190
+ flex: 1;
191
+ padding: @spacing-1 @spacing-half;
192
+ }
193
+
194
+ .nav-item-text-expanded {
195
+ font-family: @base-font-family;
196
+ font-size: @typescale-3;
197
+ padding-left: @spacing-1;
198
+ flex: 1;
199
+ }
200
+
201
+ .nav-item-text-collapsed {
202
+ display: none;
203
+ }
204
+
205
+ .nav-item-counter[data-anv][data-anv] {
206
+ margin-right: @spacing-1;
207
+ position: relative;
208
+ transform: unset;
209
+ }
210
+ }
211
+ }
212
+ .divider {
213
+ border-top: 1px solid @border-color;
214
+ }
215
+
216
+ .nav-main {
217
+ position: relative;
218
+ overflow-y: auto;
219
+ padding-bottom: @spacing-1;
220
+ flex-grow: 1;
221
+ flex-basis: 0;
222
+
223
+ &::-webkit-scrollbar {
224
+ width: 0;
225
+ height: 0;
226
+ }
227
+ }
228
+
229
+ .nav-top {
230
+ display: flex;
231
+ flex-direction: column;
232
+ align-items: stretch;
233
+ }
234
+
235
+ .nav-bottom {
236
+ display: flex;
237
+ flex-direction: column;
238
+ }
239
+
240
+ .nav-footer {
241
+ display: flex;
242
+ flex-direction: column;
243
+ align-items: stretch;
244
+ background-color: @bg-color;
245
+
246
+ .toggle-wrapper {
247
+ display: block;
248
+
249
+ .toggle {
250
+ font-family: @base-font-family;
251
+ color: @text-color;
252
+ position: relative;
253
+ cursor: pointer;
254
+ outline: none;
255
+
256
+ &:hover {
257
+ .toggle-content {
258
+ background-color: @bg-color-hover;
259
+ }
260
+ }
261
+
262
+ .toggle-content {
263
+ display: flex;
264
+ justify-content: flex-start;
265
+ align-items: center;
266
+ flex-wrap: nowrap;
267
+ text-wrap: nowrap;
268
+ height: 32px;
269
+
270
+ border-radius: @border-radius-2;
271
+ }
272
+
273
+ .toggle-icon-wrapper {
274
+ height: 24px;
275
+ width: 24px;
276
+
277
+ .toggle-icon[data-anv][data-anv] > svg {
278
+ height: 24px;
279
+ width: 24px;
280
+ color: @text-color;
281
+ }
282
+ }
283
+
284
+ .toggle-text {
285
+ font-family: @base-font-family;
286
+ font-size: @typescale-3;
287
+ flex: 1;
288
+ }
289
+ }
290
+ }
291
+ }
292
+
293
+ .nav-item {
294
+ font-family: @base-font-family;
295
+ color: @text-color;
296
+ position: relative;
297
+ display: flex;
298
+ flex-direction: row;
299
+ justify-content: flex-start;
300
+ align-items: center;
301
+ outline: none;
302
+ overflow: hidden;
303
+
304
+ .nav-item-icon-wrapper {
305
+ border-radius: @border-radius-2;
306
+ display: flex;
307
+ justify-content: flex-start;
308
+ align-items: center;
309
+ flex-wrap: nowrap;
310
+ text-wrap: nowrap;
311
+ position: relative;
312
+ }
313
+
314
+ &.nav-item-active {
315
+ color: @text-color-active;
316
+
317
+ .nav-item-icon-wrapper {
318
+ background-color: @bg-color-active;
319
+ }
320
+ }
321
+
322
+ &.nav-item-icon-switch {
323
+ &.nav-item-active {
324
+ .nav-icon-inactive[data-anv][data-anv] {
325
+ display: none;
326
+ }
327
+ .nav-icon-active[data-anv][data-anv] {
328
+ display: block;
329
+ }
330
+ }
331
+ &:not(.nav-item-active) {
332
+ .nav-icon-inactive[data-anv][data-anv] {
333
+ display: block;
334
+ }
335
+ .nav-icon-active[data-anv][data-anv] {
336
+ display: none;
337
+ }
338
+ }
339
+ }
340
+
341
+ .nav-item-counter {
342
+ min-width: 12px !important;
343
+ min-height: 12px !important;
344
+ }
345
+
346
+ .nav-item-group-toggle-wrapper {
347
+ position: relative;
348
+ display: flex;
349
+ justify-content: center;
350
+ align-items: center;
351
+
352
+ .nav-item-group-toggle[data-anv][data-anv] {
353
+ color: inherit;
354
+ font-weight: @font-weight-semibold;
355
+ }
356
+
357
+ .nav-item-group-toggle-click {
358
+ position: absolute;
359
+ left: -@spacing-2;
360
+ right: -@spacing-half;
361
+ top: -@spacing-1;
362
+ bottom: -@spacing-1;
363
+ }
364
+ }
365
+
366
+ .nav-icon[data-anv][data-anv] {
367
+ height: 24px;
368
+ width: 24px;
369
+ color: inherit;
370
+
371
+ & > svg {
372
+ height: 24px;
373
+ width: 24px;
374
+ }
375
+ }
376
+ }
377
+
378
+ .nav-link {
379
+ cursor: pointer;
380
+
381
+ &:hover:not(.nav-item-active) .nav-item-icon-wrapper {
382
+ background-color: @bg-color-hover;
383
+ }
384
+ }
385
+ .nav-group-wrapper {
386
+ .nav-group-item {
387
+ position: relative;
388
+ }
389
+
390
+ .submenu-wrapper:not(.submenu-wrapper-collapsed) {
391
+ max-height: 2000px;
392
+ transition: max-height 0.7s ease-in-out;
393
+ }
394
+ }
395
+
396
+ .submenu-wrapper {
397
+ max-height: 0;
398
+ overflow: hidden;
399
+ transition: max-height unset;
400
+ }
401
+
402
+ .submenu {
403
+ margin-left: @spacing-3;
404
+
405
+ padding-left: @spacing-1;
406
+ padding-right: @spacing-1;
407
+ margin-bottom: @spacing-1;
408
+ position: relative;
409
+ font-family: @base-font-family;
410
+
411
+ .submenu-group-header[data-anv][data-anv] {
412
+ padding-top: @spacing-2;
413
+ padding-bottom: @spacing-half;
414
+ }
415
+ .submenu-group-header.submenu-group-header-empty[data-anv][data-anv] {
416
+ padding-top: @spacing-1;
417
+ }
418
+
419
+ .submenu-item {
420
+ padding: @spacing-1;
421
+ }
422
+
423
+ .submenu-link-active {
424
+ position: relative;
425
+ }
426
+
427
+ .submenu-link-active:before {
428
+ content: '';
429
+ position: absolute;
430
+ background-color: @text-color-active;
431
+ width: 3px;
432
+ top: @spacing-1;
433
+ bottom: @spacing-1;
434
+ left: -12px;
435
+ }
436
+
437
+ .submenu-item:before:not(.submenu-link-active) {
438
+ background-color: @bg-color-hover;
439
+ }
440
+
441
+ .divider + .divider {
442
+ display: none;
443
+ }
444
+
445
+ .divider:last-child {
446
+ display: none;
447
+ }
448
+
449
+ > *,
450
+ > *[data-anv][data-anv] {
451
+ border-left: 3px solid transparent;
452
+ padding-left: @spacing-1;
453
+ }
454
+
455
+ > *:last-child {
456
+ margin-bottom: @spacing-0;
457
+ }
458
+ }
459
+
460
+ .submenu-popover {
461
+ margin-left: -@spacing-1;
462
+ margin-right: -@spacing-1;
463
+ min-width: 240px;
464
+
465
+ .submenu-group-header[data-anv][data-anv] {
466
+ margin-top: @spacing-2;
467
+ padding-bottom: @spacing-half;
468
+ }
469
+
470
+ .submenu-group-header.submenu-group-header-empty[data-anv][data-anv] {
471
+ margin-top: @spacing-1;
472
+ }
473
+
474
+ .submenu-item {
475
+ padding-top: @spacing-1;
476
+ padding-bottom: @spacing-1;
477
+ }
478
+
479
+ .submenu-link-active {
480
+ background-color: @bg-color-active;
481
+ }
482
+ .submenu-link:hover:not(.submenu-link-active) {
483
+ background-color: @bg-color-hover;
484
+ }
485
+
486
+ > *,
487
+ > *[data-anv][data-anv] {
488
+ padding-left: @spacing-1;
489
+ padding-right: @spacing-1;
490
+ }
491
+ }
492
+
493
+ .submenu,
494
+ .submenu-popover {
495
+ display: flex;
496
+ flex-direction: column;
497
+
498
+ .submenu-group-header[data-anv][data-anv] {
499
+ color: @color-neutral-70;
500
+ }
501
+
502
+ .submenu-item {
503
+ color: @text-color;
504
+ font-size: @typescale-2;
505
+ border-radius: @border-radius-2;
506
+ display: flex;
507
+ flex-direction: row;
508
+ justify-content: space-between;
509
+ align-items: center;
510
+ }
511
+
512
+ .submenu-link {
513
+ cursor: pointer;
514
+ }
515
+
516
+ .submenu-link-active {
517
+ color: @text-color-active;
518
+ }
519
+
520
+ .submenu-link-counter {
521
+ position: relative !important;
522
+ transform: unset !important;
523
+ }
524
+
525
+ .submenu-link:hover:not(.submenu-link-active) {
526
+ background-color: @bg-color-hover;
527
+ }
528
+ }
@@ -0,0 +1,36 @@
1
+ import { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from 'react';
2
+ import { NavigationItemData } from '../../utils/navigation';
3
+ import { NavLinkComponentProps } from '../../utils/navigation-context';
4
+ import { TitanLayoutState } from './interface';
5
+ import { TitanLayoutLogoProps } from './layout-logo';
6
+ import { TitanLayoutSidebarLink, TitanLayoutSidebarTrigger } from './layout-sidebar-links';
7
+ type TitanLayoutChild = ReactElement<TitanLayoutContentProps> | ReactElement<TitanLayoutLogoProps>;
8
+ export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & {
9
+ empty?: boolean;
10
+ appearance?: 'legacy' | 'anvil1' | 'anvil2';
11
+ /** component used for navigation */
12
+ navigationComponent?: FC<NavLinkComponentProps>;
13
+ /** data for main navigation links */
14
+ navigationMainItems?: NavigationItemData[];
15
+ /** layout's content */
16
+ children?: TitanLayoutChild | TitanLayoutChild[];
17
+ state?: TitanLayoutState;
18
+ onStateChange?: (state: TitanLayoutState) => void;
19
+ header?: ReactElement;
20
+ profile?: ReactElement;
21
+ extraLinks?: ReactElement;
22
+ extraLinksTop?: ReactElement;
23
+ extraText?: string;
24
+ sidebarTop?: ReactElement[];
25
+ };
26
+ export interface TitanLayoutContentProps {
27
+ children: ReactNode;
28
+ }
29
+ export declare const TitanLayout: FC<TitanLayoutProps> & {
30
+ Content: FC<TitanLayoutContentProps>;
31
+ Logo: FC<TitanLayoutLogoProps>;
32
+ SidebarLink: typeof TitanLayoutSidebarLink;
33
+ SidebarTrigger: typeof TitanLayoutSidebarTrigger;
34
+ };
35
+ export {};
36
+ //# sourceMappingURL=titan-layout.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"titan-layout.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.tsx"],"names":[],"mappings":"AACA,OAAO,EAGH,wBAAwB,EACxB,EAAE,EAEF,YAAY,EACZ,SAAS,EAMZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAA2B,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAEhG,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAQ/C,OAAO,EAAmB,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAEtE,OAAO,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAI3F,KAAK,gBAAgB,GAAG,YAAY,CAAC,uBAAuB,CAAC,GAAG,YAAY,CAAC,oBAAoB,CAAC,CAAC;AAEnG,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACzF,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAE5C,oCAAoC;IACpC,mBAAmB,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAEhD,qCAAqC;IACrC,mBAAmB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE3C,uBAAuB;IACvB,QAAQ,CAAC,EAAE,gBAAgB,GAAG,gBAAgB,EAAE,CAAC;IAEjD,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAElD,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,YAAY,EAAE,CAAC;CAC/B,CAAC;AA0MF,MAAM,WAAW,uBAAuB;IACpC,QAAQ,EAAE,SAAS,CAAC;CACvB;AAGD,eAAO,MAAM,WAAW;;;;;CAKtB,CAAC"}
@@ -0,0 +1,109 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import classNames from 'classnames';
3
+ import { Children, Fragment, isValidElement, useCallback, useEffect, useMemo, useState, } from 'react';
4
+ import { DefaultNavLinkComponent } from '../../utils/navigation-context';
5
+ import { useTitanBreakpoint } from '../../utils/use-breakpoint';
6
+ import { LayoutContext, LayoutPlacementContext, } from './layout-context';
7
+ import { LayoutHeader } from './layout-header';
8
+ import { TitanLayoutLogo } from './layout-logo';
9
+ import { LayoutSidebar } from './layout-sidebar';
10
+ import { TitanLayoutSidebarLink, TitanLayoutSidebarTrigger } from './layout-sidebar-links';
11
+ import { InternalSideNavigationTrigger } from './layout-sidebar-links-internal';
12
+ import * as Styles from './titan-layout.module.less';
13
+ const defaultSidebarContext = {
14
+ styles: {
15
+ popoverContent: {
16
+ '--background-color-strong': '#24323C',
17
+ 'color': 'var(--color-white)',
18
+ },
19
+ },
20
+ };
21
+ const useVariant = (appearance) => useMemo(() => {
22
+ const isLegacy = appearance === 'legacy';
23
+ const isAnvil1 = appearance === 'anvil1';
24
+ const isAnvil2 = appearance === 'anvil2';
25
+ return {
26
+ isLegacy,
27
+ isAnvil1,
28
+ isAnvil2,
29
+ isSequent: isLegacy || isAnvil1,
30
+ };
31
+ }, [appearance]);
32
+ const useLayoutChildren = (children) => useMemo(() => Children.toArray(children).reduce((out, item) => {
33
+ if (item &&
34
+ isValidElement(item) &&
35
+ item.type &&
36
+ typeof item.type !== 'string') {
37
+ if (item.type.name === TitanLayoutContent.name) {
38
+ out.content = item;
39
+ }
40
+ else if (item.type.name === TitanLayoutLogo.name) {
41
+ out.logo = item;
42
+ }
43
+ }
44
+ return out;
45
+ }, {
46
+ logo: _jsx(TitanLayoutLogo, {}),
47
+ }), [children]);
48
+ const TitanLayoutComponent = ({ appearance = 'anvil2', id, children, navigationComponent, header, profile, state, onStateChange, navigationMainItems, extraLinks, extraLinksTop, extraText, sidebarTop, }) => {
49
+ const breakpoint = useTitanBreakpoint();
50
+ const isMobile = breakpoint.isMobile;
51
+ const context = useMemo(() => ({
52
+ NavigationComponent: navigationComponent !== null && navigationComponent !== void 0 ? navigationComponent : DefaultNavLinkComponent,
53
+ breakpoint,
54
+ isTitanLayout: true,
55
+ sidebar: defaultSidebarContext,
56
+ }), [navigationComponent, breakpoint]);
57
+ const variant = useVariant(appearance);
58
+ const [mobileDrawerOpened, setMobileDrawerOpened] = useState(false);
59
+ const { content, logo } = useLayoutChildren(children);
60
+ useEffect(() => {
61
+ if (!isMobile) {
62
+ setMobileDrawerOpened(false);
63
+ return;
64
+ }
65
+ const listener = () => {
66
+ setMobileDrawerOpened(false);
67
+ };
68
+ document.addEventListener('click', listener);
69
+ return () => document.removeEventListener('click', listener);
70
+ }, [isMobile]);
71
+ const onBurgerClick = useCallback((e) => {
72
+ setMobileDrawerOpened(true);
73
+ e.stopPropagation();
74
+ }, []);
75
+ const onBarExpandChange = useCallback((expanded) => {
76
+ if (isMobile) {
77
+ setMobileDrawerOpened(false);
78
+ }
79
+ else {
80
+ onStateChange === null || onStateChange === void 0 ? void 0 : onStateChange({ navCollapsed: !expanded });
81
+ }
82
+ }, [onStateChange, isMobile]);
83
+ const onSubmenuExpandChange = useCallback((id, expanded) => {
84
+ var _a;
85
+ onStateChange === null || onStateChange === void 0 ? void 0 : onStateChange({
86
+ navCollapsed: (_a = state === null || state === void 0 ? void 0 : state.navCollapsed) !== null && _a !== void 0 ? _a : false,
87
+ submenuExpanded: expanded ? id : undefined,
88
+ });
89
+ }, [state, onStateChange]);
90
+ const [layoutStyles] = useState({});
91
+ const layoutClass = variant.isLegacy
92
+ ? Styles.layoutLegacy
93
+ : variant.isAnvil1
94
+ ? Styles.layoutAnvil1
95
+ : Styles.layoutAnvil2;
96
+ return (_jsx(LayoutContext.Provider, { value: context, children: _jsx(LayoutPlacementContext.Provider, { value: "unset", children: _jsxs("div", { id: id, className: classNames(Styles.layout, isMobile
97
+ ? Styles.layoutMobile
98
+ : (state === null || state === void 0 ? void 0 : state.navCollapsed)
99
+ ? Styles.layoutNavSlim
100
+ : Styles.layoutNavWide, layoutClass), style: layoutStyles, children: [variant.isSequent && _jsx("div", { className: Styles.topPlaceholder }), _jsx(LayoutHeader, { className: Styles.top, logo: logo, profile: isMobile ? undefined : profile, center: header, rightText: isMobile ? undefined : extraText, right: _jsxs(Fragment, { children: [extraLinksTop, !isMobile && extraLinks] }), onBurgerClick: onBurgerClick }), _jsx(LayoutSidebar, { flex: !variant.isSequent, mobile: breakpoint.isMobile, barExpanded: isMobile ? mobileDrawerOpened : !(state === null || state === void 0 ? void 0 : state.navCollapsed), submenuExpanded: state === null || state === void 0 ? void 0 : state.submenuExpanded, onBarExpandChange: onBarExpandChange, onSubmenuExpandChange: onSubmenuExpandChange, top: sidebarTop, mainItems: navigationMainItems, navigationComponent: context.NavigationComponent, bottom: isMobile ? (_jsxs(Fragment, { children: [profile, extraLinks, !!extraText && (_jsx(InternalSideNavigationTrigger, { id: "__extra_text", title: extraText, submenuExpanded: undefined, dataPrefix: "navigation-extra-text", tag: undefined, icon: undefined, iconActive: undefined }))] })) : undefined }), content] }) }) }));
101
+ };
102
+ const TitanLayoutContent = ({ children }) => children;
103
+ export const TitanLayout = Object.assign(TitanLayoutComponent, {
104
+ Content: TitanLayoutContent,
105
+ Logo: TitanLayoutLogo,
106
+ SidebarLink: TitanLayoutSidebarLink,
107
+ SidebarTrigger: TitanLayoutSidebarTrigger,
108
+ });
109
+ //# sourceMappingURL=titan-layout.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"titan-layout.js","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.tsx"],"names":[],"mappings":"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"}