@servicetitan/navigation 12.0.3 → 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.
- package/dist/components/counter-tag.d.ts +1 -1
- package/dist/components/counter-tag.d.ts.map +1 -1
- package/dist/components/counter-tag.js.map +1 -1
- package/dist/components/profile-dropdown/interface.d.ts +55 -0
- package/dist/components/profile-dropdown/interface.d.ts.map +1 -0
- package/dist/components/profile-dropdown/interface.js.map +1 -0
- package/dist/components/profile-dropdown/profile-dropdown-legacy.stories.d.ts +13 -0
- package/dist/components/profile-dropdown/profile-dropdown-legacy.stories.d.ts.map +1 -0
- package/dist/components/profile-dropdown/profile-dropdown-stacked.stories.d.ts +5 -1
- package/dist/components/profile-dropdown/profile-dropdown-stacked.stories.d.ts.map +1 -1
- package/dist/components/profile-dropdown/profile-dropdown.d.ts +9 -79
- package/dist/components/profile-dropdown/profile-dropdown.d.ts.map +1 -1
- package/dist/components/profile-dropdown/profile-dropdown.js +22 -22
- package/dist/components/profile-dropdown/profile-dropdown.js.map +1 -1
- package/dist/components/profile-dropdown/profile-dropdown.stories.d.ts +5 -1
- package/dist/components/profile-dropdown/profile-dropdown.stories.d.ts.map +1 -1
- package/dist/components/titan-layout/interface-internal.d.ts +12 -0
- package/dist/components/titan-layout/interface-internal.d.ts.map +1 -1
- package/dist/components/titan-layout/interface-internal.js.map +1 -1
- package/dist/components/titan-layout/interface.d.ts +66 -13
- package/dist/components/titan-layout/interface.d.ts.map +1 -1
- package/dist/components/titan-layout/interface.js.map +1 -1
- package/dist/components/titan-layout/layout-header-dark.d.ts.map +1 -1
- package/dist/components/titan-layout/layout-header-dark.js +21 -11
- package/dist/components/titan-layout/layout-header-dark.js.map +1 -1
- package/dist/components/titan-layout/layout-header-links-internal.d.ts +22 -3
- package/dist/components/titan-layout/layout-header-links-internal.d.ts.map +1 -1
- package/dist/components/titan-layout/layout-header-links-internal.js +15 -18
- package/dist/components/titan-layout/layout-header-links-internal.js.map +1 -1
- package/dist/components/titan-layout/layout-header-links.d.ts +3 -4
- package/dist/components/titan-layout/layout-header-links.d.ts.map +1 -1
- package/dist/components/titan-layout/layout-header-links.js +25 -5
- package/dist/components/titan-layout/layout-header-links.js.map +1 -1
- package/dist/components/titan-layout/layout-header.d.ts +2 -2
- package/dist/components/titan-layout/layout-header.d.ts.map +1 -1
- package/dist/components/titan-layout/layout-header.js.map +1 -1
- package/dist/components/titan-layout/layout-header.module.less +31 -0
- package/dist/components/titan-layout/layout-header.module.less.d.ts +2 -0
- package/dist/components/titan-layout/layout-profile.d.ts +8 -5
- package/dist/components/titan-layout/layout-profile.d.ts.map +1 -1
- package/dist/components/titan-layout/layout-profile.js +30 -28
- package/dist/components/titan-layout/layout-profile.js.map +1 -1
- package/dist/components/titan-layout/layout-sidebar-links-internal.d.ts +48 -25
- package/dist/components/titan-layout/layout-sidebar-links-internal.d.ts.map +1 -1
- package/dist/components/titan-layout/layout-sidebar-links-internal.js +56 -52
- package/dist/components/titan-layout/layout-sidebar-links-internal.js.map +1 -1
- package/dist/components/titan-layout/layout-sidebar-links.d.ts +3 -3
- package/dist/components/titan-layout/layout-sidebar-links.d.ts.map +1 -1
- package/dist/components/titan-layout/layout-sidebar-links.js +33 -18
- package/dist/components/titan-layout/layout-sidebar-links.js.map +1 -1
- package/dist/components/titan-layout/layout-sidebar.d.ts.map +1 -1
- package/dist/components/titan-layout/layout-sidebar.js +49 -24
- package/dist/components/titan-layout/layout-sidebar.js.map +1 -1
- package/dist/components/titan-layout/titan-layout-default.stories.d.ts +16 -0
- package/dist/components/titan-layout/titan-layout-default.stories.d.ts.map +1 -0
- package/dist/components/titan-layout/titan-layout-legacy.stories.d.ts +10 -0
- package/dist/components/titan-layout/titan-layout-legacy.stories.d.ts.map +1 -0
- package/dist/components/titan-layout/titan-layout-links.d.ts +5 -0
- package/dist/components/titan-layout/titan-layout-links.d.ts.map +1 -0
- package/dist/components/titan-layout/titan-layout-links.js +34 -0
- package/dist/components/titan-layout/titan-layout-links.js.map +1 -0
- package/dist/components/titan-layout/titan-layout-stacked.stories.d.ts +10 -0
- package/dist/components/titan-layout/titan-layout-stacked.stories.d.ts.map +1 -0
- package/dist/components/titan-layout/titan-layout.d.ts +5 -4
- package/dist/components/titan-layout/titan-layout.d.ts.map +1 -1
- package/dist/components/titan-layout/titan-layout.js +10 -8
- package/dist/components/titan-layout/titan-layout.js.map +1 -1
- package/dist/index.d.ts +1 -6
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +0 -4
- package/dist/index.js.map +1 -1
- package/dist/test/data.d.ts +26 -23
- package/dist/test/data.d.ts.map +1 -1
- package/dist/test/data.js +26 -69
- package/dist/test/data.js.map +1 -1
- package/dist/test/titan-layout.d.ts +16 -0
- package/dist/test/titan-layout.d.ts.map +1 -0
- package/dist/test/titan-layout.js +21 -0
- package/dist/test/titan-layout.js.map +1 -0
- package/dist/utils/navigation-context.d.ts +3 -22
- package/dist/utils/navigation-context.d.ts.map +1 -1
- package/dist/utils/navigation-context.js +2 -10
- package/dist/utils/navigation-context.js.map +1 -1
- package/dist/utils/navigation.d.ts +2 -7
- package/dist/utils/navigation.d.ts.map +1 -1
- package/dist/utils/navigation.js.map +1 -1
- package/package.json +2 -2
- package/src/components/counter-tag.tsx +1 -1
- package/src/components/profile-dropdown/interface.ts +47 -0
- package/src/components/profile-dropdown/profile-dropdown-legacy.stories.tsx +25 -0
- package/src/components/profile-dropdown/profile-dropdown-stacked.stories.tsx +15 -7
- package/src/components/profile-dropdown/profile-dropdown.stories.tsx +50 -43
- package/src/components/profile-dropdown/profile-dropdown.tsx +39 -115
- package/src/components/titan-layout/interface-internal.ts +13 -0
- package/src/components/titan-layout/interface.ts +72 -16
- package/src/components/titan-layout/layout-header-dark.tsx +17 -4
- package/src/components/titan-layout/layout-header-links-internal.tsx +41 -54
- package/src/components/titan-layout/layout-header-links.tsx +65 -12
- package/src/components/titan-layout/layout-header.module.less +31 -0
- package/src/components/titan-layout/layout-header.module.less.d.ts +2 -0
- package/src/components/titan-layout/layout-header.tsx +2 -2
- package/src/components/titan-layout/layout-profile.tsx +53 -34
- package/src/components/titan-layout/layout-sidebar-links-internal.tsx +169 -116
- package/src/components/titan-layout/layout-sidebar-links.tsx +73 -24
- package/src/components/titan-layout/layout-sidebar.tsx +52 -28
- package/src/components/titan-layout/{titan-layout.stories.tsx → titan-layout-default.stories.tsx} +125 -113
- package/src/components/titan-layout/titan-layout-legacy.stories.tsx +24 -0
- package/src/components/titan-layout/titan-layout-links.tsx +34 -0
- package/src/components/titan-layout/titan-layout-stacked.stories.tsx +30 -0
- package/src/components/titan-layout/titan-layout.tsx +12 -9
- package/src/index.ts +1 -12
- package/src/test/data.tsx +31 -83
- package/src/test/titan-layout.tsx +34 -0
- package/src/utils/navigation-context.tsx +9 -35
- package/src/utils/navigation.ts +3 -10
- package/dist/components/header-navigation/header-navigation-content.d.ts +0 -30
- package/dist/components/header-navigation/header-navigation-content.d.ts.map +0 -1
- package/dist/components/header-navigation/header-navigation-content.js +0 -58
- package/dist/components/header-navigation/header-navigation-content.js.map +0 -1
- package/dist/components/header-navigation/header-navigation-extra-stacked.stories.d.ts +0 -9
- package/dist/components/header-navigation/header-navigation-extra-stacked.stories.d.ts.map +0 -1
- package/dist/components/header-navigation/header-navigation-extra.stories.d.ts +0 -12
- package/dist/components/header-navigation/header-navigation-extra.stories.d.ts.map +0 -1
- package/dist/components/header-navigation/header-navigation-links.d.ts +0 -11
- package/dist/components/header-navigation/header-navigation-links.d.ts.map +0 -1
- package/dist/components/header-navigation/header-navigation-links.js +0 -62
- package/dist/components/header-navigation/header-navigation-links.js.map +0 -1
- package/dist/components/header-navigation/header-navigation-stacked.stories.d.ts +0 -12
- package/dist/components/header-navigation/header-navigation-stacked.stories.d.ts.map +0 -1
- package/dist/components/header-navigation/header-navigation-stories.module.less +0 -6
- package/dist/components/header-navigation/header-navigation-stories.module.less.d.ts +0 -3
- package/dist/components/header-navigation/header-navigation.d.ts +0 -59
- package/dist/components/header-navigation/header-navigation.d.ts.map +0 -1
- package/dist/components/header-navigation/header-navigation.js +0 -228
- package/dist/components/header-navigation/header-navigation.js.map +0 -1
- package/dist/components/header-navigation/header-navigation.module.less +0 -260
- package/dist/components/header-navigation/header-navigation.module.less.d.ts +0 -22
- package/dist/components/header-navigation/header-navigation.stories.d.ts +0 -12
- package/dist/components/header-navigation/header-navigation.stories.d.ts.map +0 -1
- package/dist/components/header-navigation/index.d.ts +0 -2
- package/dist/components/header-navigation/index.d.ts.map +0 -1
- package/dist/components/header-navigation/index.js +0 -3
- package/dist/components/header-navigation/index.js.map +0 -1
- package/dist/components/header-navigation/with-tooltip.d.ts +0 -4
- package/dist/components/header-navigation/with-tooltip.d.ts.map +0 -1
- package/dist/components/header-navigation/with-tooltip.js +0 -10
- package/dist/components/header-navigation/with-tooltip.js.map +0 -1
- package/dist/components/layout.stories.d.ts +0 -13
- package/dist/components/layout.stories.d.ts.map +0 -1
- package/dist/components/left-navigation/header-navigation-extra-tiny.stories.d.ts +0 -9
- package/dist/components/left-navigation/header-navigation-extra-tiny.stories.d.ts.map +0 -1
- package/dist/components/left-navigation/header-navigation-tiny-links.d.ts +0 -18
- package/dist/components/left-navigation/header-navigation-tiny-links.d.ts.map +0 -1
- package/dist/components/left-navigation/header-navigation-tiny-links.js +0 -79
- package/dist/components/left-navigation/header-navigation-tiny-links.js.map +0 -1
- package/dist/components/left-navigation/header-navigation-tiny.d.ts +0 -23
- package/dist/components/left-navigation/header-navigation-tiny.d.ts.map +0 -1
- package/dist/components/left-navigation/header-navigation-tiny.js +0 -32
- package/dist/components/left-navigation/header-navigation-tiny.js.map +0 -1
- package/dist/components/left-navigation/header-navigation-tiny.module.less +0 -117
- package/dist/components/left-navigation/header-navigation-tiny.module.less.d.ts +0 -15
- package/dist/components/left-navigation/header-navigation-tiny.stories.d.ts +0 -12
- package/dist/components/left-navigation/header-navigation-tiny.stories.d.ts.map +0 -1
- package/dist/components/left-navigation/index.d.ts +0 -5
- package/dist/components/left-navigation/index.d.ts.map +0 -1
- package/dist/components/left-navigation/index.js +0 -5
- package/dist/components/left-navigation/index.js.map +0 -1
- package/dist/components/left-navigation/interface-internal.d.ts +0 -10
- package/dist/components/left-navigation/interface-internal.d.ts.map +0 -1
- package/dist/components/left-navigation/interface-internal.js +0 -3
- package/dist/components/left-navigation/interface-internal.js.map +0 -1
- package/dist/components/left-navigation/interface.d.ts +0 -20
- package/dist/components/left-navigation/interface.d.ts.map +0 -1
- package/dist/components/left-navigation/interface.js.map +0 -1
- package/dist/components/left-navigation/side-navigation-context.d.ts +0 -8
- package/dist/components/left-navigation/side-navigation-context.d.ts.map +0 -1
- package/dist/components/left-navigation/side-navigation-context.js +0 -8
- package/dist/components/left-navigation/side-navigation-context.js.map +0 -1
- package/dist/components/left-navigation/side-navigation-links-internal.d.ts +0 -28
- package/dist/components/left-navigation/side-navigation-links-internal.d.ts.map +0 -1
- package/dist/components/left-navigation/side-navigation-links-internal.js +0 -89
- package/dist/components/left-navigation/side-navigation-links-internal.js.map +0 -1
- package/dist/components/left-navigation/side-navigation-links.d.ts +0 -6
- package/dist/components/left-navigation/side-navigation-links.d.ts.map +0 -1
- package/dist/components/left-navigation/side-navigation-links.js +0 -48
- package/dist/components/left-navigation/side-navigation-links.js.map +0 -1
- package/dist/components/left-navigation/side-navigation.d.ts +0 -29
- package/dist/components/left-navigation/side-navigation.d.ts.map +0 -1
- package/dist/components/left-navigation/side-navigation.js +0 -411
- package/dist/components/left-navigation/side-navigation.js.map +0 -1
- package/dist/components/left-navigation/side-navigation.module.less +0 -530
- package/dist/components/left-navigation/side-navigation.module.less.d.ts +0 -48
- package/dist/components/left-navigation/side-navigation.stories.d.ts +0 -17
- package/dist/components/left-navigation/side-navigation.stories.d.ts.map +0 -1
- package/dist/components/left-navigation/with-tooltip.d.ts +0 -4
- package/dist/components/left-navigation/with-tooltip.d.ts.map +0 -1
- package/dist/components/left-navigation/with-tooltip.js +0 -15
- package/dist/components/left-navigation/with-tooltip.js.map +0 -1
- package/dist/components/links.d.ts +0 -5
- package/dist/components/links.d.ts.map +0 -1
- package/dist/components/links.js +0 -35
- package/dist/components/links.js.map +0 -1
- package/dist/components/profile-dropdown/profile-dropdown-tiny.stories.d.ts +0 -9
- package/dist/components/profile-dropdown/profile-dropdown-tiny.stories.d.ts.map +0 -1
- package/dist/components/titan-layout/layout-profile.stories.d.ts +0 -13
- package/dist/components/titan-layout/layout-profile.stories.d.ts.map +0 -1
- package/dist/components/titan-layout/titan-layout.stories.d.ts +0 -29
- package/dist/components/titan-layout/titan-layout.stories.d.ts.map +0 -1
- package/dist/utils/navigation-legacy.d.ts +0 -88
- package/dist/utils/navigation-legacy.d.ts.map +0 -1
- package/dist/utils/navigation-legacy.js +0 -3
- package/dist/utils/navigation-legacy.js.map +0 -1
- package/src/components/header-navigation/header-navigation-content.tsx +0 -120
- package/src/components/header-navigation/header-navigation-extra-stacked.stories.tsx +0 -19
- package/src/components/header-navigation/header-navigation-extra.stories.tsx +0 -142
- package/src/components/header-navigation/header-navigation-links.tsx +0 -141
- package/src/components/header-navigation/header-navigation-stacked.stories.tsx +0 -146
- package/src/components/header-navigation/header-navigation-stories.module.less +0 -6
- package/src/components/header-navigation/header-navigation-stories.module.less.d.ts +0 -3
- package/src/components/header-navigation/header-navigation.module.less +0 -260
- package/src/components/header-navigation/header-navigation.module.less.d.ts +0 -22
- package/src/components/header-navigation/header-navigation.stories.tsx +0 -165
- package/src/components/header-navigation/header-navigation.tsx +0 -327
- package/src/components/header-navigation/index.ts +0 -1
- package/src/components/header-navigation/with-tooltip.tsx +0 -15
- package/src/components/layout.stories.tsx +0 -103
- package/src/components/left-navigation/header-navigation-extra-tiny.stories.tsx +0 -21
- package/src/components/left-navigation/header-navigation-tiny-links.tsx +0 -145
- package/src/components/left-navigation/header-navigation-tiny.module.less +0 -117
- package/src/components/left-navigation/header-navigation-tiny.module.less.d.ts +0 -15
- package/src/components/left-navigation/header-navigation-tiny.stories.tsx +0 -178
- package/src/components/left-navigation/header-navigation-tiny.tsx +0 -65
- package/src/components/left-navigation/index.ts +0 -4
- package/src/components/left-navigation/interface-internal.ts +0 -11
- package/src/components/left-navigation/interface.ts +0 -26
- package/src/components/left-navigation/side-navigation-context.tsx +0 -13
- package/src/components/left-navigation/side-navigation-links-internal.tsx +0 -151
- package/src/components/left-navigation/side-navigation-links.tsx +0 -57
- package/src/components/left-navigation/side-navigation.module.less +0 -530
- package/src/components/left-navigation/side-navigation.module.less.d.ts +0 -48
- package/src/components/left-navigation/side-navigation.stories.tsx +0 -226
- package/src/components/left-navigation/side-navigation.tsx +0 -543
- package/src/components/left-navigation/with-tooltip.tsx +0 -16
- package/src/components/links.tsx +0 -54
- package/src/components/profile-dropdown/profile-dropdown-tiny.stories.tsx +0 -25
- package/src/components/titan-layout/layout-profile.stories.tsx +0 -46
- package/src/utils/navigation-legacy.ts +0 -106
- /package/dist/components/{left-navigation → profile-dropdown}/interface.js +0 -0
|
@@ -2,7 +2,7 @@ import { FC } from 'react';
|
|
|
2
2
|
import { CounterTagData } from '../utils/counter-tag';
|
|
3
3
|
export interface CounterTagProps extends CounterTagData {
|
|
4
4
|
[key: string]: any;
|
|
5
|
-
className
|
|
5
|
+
className?: string;
|
|
6
6
|
}
|
|
7
7
|
export declare const CounterTag: FC<{
|
|
8
8
|
className?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"counter-tag.d.ts","sourceRoot":"","sources":["../../src/components/counter-tag.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACnD,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"counter-tag.d.ts","sourceRoot":"","sources":["../../src/components/counter-tag.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACnD,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,EAAE,eAAe,GAAG,SAAS,CAAC;CACrC,CAkBA,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/counter-tag.tsx"],"sourcesContent":["import { Tag } from '@servicetitan/design-system';\nimport classNames from 'classnames';\nimport { FC } from 'react';\nimport { CounterTagData } from '../utils/counter-tag';\n\nexport interface CounterTagProps extends CounterTagData {\n [key: string]: any;\n className
|
|
1
|
+
{"version":3,"sources":["../../src/components/counter-tag.tsx"],"sourcesContent":["import { Tag } from '@servicetitan/design-system';\nimport classNames from 'classnames';\nimport { FC } from 'react';\nimport { CounterTagData } from '../utils/counter-tag';\n\nexport interface CounterTagProps extends CounterTagData {\n [key: string]: any;\n className?: string;\n}\n\nexport const CounterTag: FC<{\n className?: string;\n longClassName?: string;\n data: CounterTagProps | undefined;\n}> = ({ className, data, longClassName }) => {\n const { value, className: dataClassName, ...rest } = data ?? {};\n\n return value ? (\n <Tag\n color=\"critical\"\n {...rest}\n className={classNames(\n className,\n dataClassName,\n typeof value === 'number' && value > 10 && longClassName\n )}\n compact\n badge\n >\n {value}\n </Tag>\n ) : null;\n};\n"],"names":["Tag","classNames","CounterTag","className","data","longClassName","value","dataClassName","rest","color","compact","badge"],"mappings":";AAAA,SAASA,GAAG,QAAQ,8BAA8B;AAClD,OAAOC,gBAAgB,aAAa;AASpC,OAAO,MAAMC,aAIR,CAAC,EAAEC,SAAS,EAAEC,IAAI,EAAEC,aAAa,EAAE;IACpC,MAAM,EAAEC,KAAK,EAAEH,WAAWI,aAAa,EAAE,GAAGC,MAAM,GAAGJ,iBAAAA,kBAAAA,OAAQ,CAAC;IAE9D,OAAOE,sBACH,KAACN;QACGS,OAAM;QACL,GAAGD,IAAI;QACRL,WAAWF,WACPE,WACAI,eACA,OAAOD,UAAU,YAAYA,QAAQ,MAAMD;QAE/CK,OAAO;QACPC,KAAK;kBAEJL;SAEL;AACR,EAAE"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { PopoverPropsStrict } from '@servicetitan/design-system';
|
|
2
|
+
import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
|
|
3
|
+
import { CounterTagData, CounterTagValue } from '../../utils/counter-tag';
|
|
4
|
+
export type ProfileDropdownTriggerProps = {
|
|
5
|
+
info?: {
|
|
6
|
+
title: string;
|
|
7
|
+
text: string;
|
|
8
|
+
};
|
|
9
|
+
imageSrc?: string | null;
|
|
10
|
+
avatarBadge?: boolean | string;
|
|
11
|
+
badge?: {
|
|
12
|
+
content?: number | string;
|
|
13
|
+
className: string;
|
|
14
|
+
};
|
|
15
|
+
} & Omit<ComponentPropsWithoutRef<'div'>, 'onClick'>;
|
|
16
|
+
export type ProfileDropdownProps = {
|
|
17
|
+
direction?: PopoverPropsStrict['direction'];
|
|
18
|
+
trigger?: Omit<ProfileDropdownTriggerProps, 'onClick' | 'open' | 'hintArrow'>;
|
|
19
|
+
hintPopup?: {
|
|
20
|
+
className?: string;
|
|
21
|
+
content: FC<{
|
|
22
|
+
openProfile(): void;
|
|
23
|
+
}>;
|
|
24
|
+
width?: PopoverPropsStrict['width'];
|
|
25
|
+
onClose?: () => void;
|
|
26
|
+
};
|
|
27
|
+
portal?: boolean;
|
|
28
|
+
width?: PopoverPropsStrict['width'];
|
|
29
|
+
onClose?(): void;
|
|
30
|
+
onOpen?(): void;
|
|
31
|
+
} & ComponentPropsWithoutRef<'div'>;
|
|
32
|
+
export type ProfileItemContent = {
|
|
33
|
+
children: string;
|
|
34
|
+
text?: string;
|
|
35
|
+
} | {
|
|
36
|
+
children: ReactNode;
|
|
37
|
+
text: string;
|
|
38
|
+
};
|
|
39
|
+
export type ProfileDropdownSectionProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {
|
|
40
|
+
children: ReactNode;
|
|
41
|
+
id: string;
|
|
42
|
+
tooltip?: string;
|
|
43
|
+
tag?: CounterTagData;
|
|
44
|
+
counter?: CounterTagValue;
|
|
45
|
+
} & ProfileItemContent;
|
|
46
|
+
export type ProfileDropdownLinkProps = Omit<ComponentPropsWithoutRef<'a'>, 'children'> & {
|
|
47
|
+
id: string;
|
|
48
|
+
children: ReactNode;
|
|
49
|
+
external?: boolean;
|
|
50
|
+
tooltip?: string;
|
|
51
|
+
to: string;
|
|
52
|
+
tag?: CounterTagData;
|
|
53
|
+
counter?: CounterTagValue;
|
|
54
|
+
} & ProfileItemContent;
|
|
55
|
+
//# sourceMappingURL=interface.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"interface.d.ts","sourceRoot":"","sources":["../../../src/components/profile-dropdown/interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,wBAAwB,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAE1E,MAAM,MAAM,2BAA2B,GAAG;IACtC,IAAI,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;CAC5D,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC;AAErD,MAAM,MAAM,oBAAoB,GAAG;IAC/B,SAAS,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC5C,OAAO,CAAC,EAAE,IAAI,CAAC,2BAA2B,EAAE,SAAS,GAAG,MAAM,GAAG,WAAW,CAAC,CAAC;IAC9E,SAAS,CAAC,EAAE;QACR,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,OAAO,EAAE,EAAE,CAAC;YAAE,WAAW,IAAI,IAAI,CAAA;SAAE,CAAC,CAAC;QACrC,KAAK,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;QACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;KACxB,CAAC;IACF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,kBAAkB,CAAC,OAAO,CAAC,CAAC;IACpC,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,MAAM,CAAC,IAAI,IAAI,CAAC;CACnB,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAEpC,MAAM,MAAM,kBAAkB,GACxB;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,GACnC;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5C,MAAM,MAAM,2BAA2B,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAC1F,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,cAAc,CAAC;IACrB,OAAO,CAAC,EAAE,eAAe,CAAC;CAC7B,GAAG,kBAAkB,CAAC;AAEvB,MAAM,MAAM,wBAAwB,GAAG,IAAI,CAAC,wBAAwB,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,GAAG;IACrF,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,CAAC,EAAE,cAAc,CAAC;IACrB,OAAO,CAAC,EAAE,eAAe,CAAC;CAC7B,GAAG,kBAAkB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/profile-dropdown/interface.ts"],"sourcesContent":["import { PopoverPropsStrict } from '@servicetitan/design-system';\nimport { ComponentPropsWithoutRef, FC, ReactNode } from 'react';\nimport { CounterTagData, CounterTagValue } from '../../utils/counter-tag';\n\nexport type ProfileDropdownTriggerProps = {\n info?: { title: string; text: string };\n imageSrc?: string | null;\n avatarBadge?: boolean | string;\n badge?: { content?: number | string; className: string };\n} & Omit<ComponentPropsWithoutRef<'div'>, 'onClick'>;\n\nexport type ProfileDropdownProps = {\n direction?: PopoverPropsStrict['direction'];\n trigger?: Omit<ProfileDropdownTriggerProps, 'onClick' | 'open' | 'hintArrow'>;\n hintPopup?: {\n className?: string;\n content: FC<{ openProfile(): void }>;\n width?: PopoverPropsStrict['width'];\n onClose?: () => void;\n };\n portal?: boolean;\n width?: PopoverPropsStrict['width'];\n onClose?(): void;\n onOpen?(): void;\n} & ComponentPropsWithoutRef<'div'>;\n\nexport type ProfileItemContent =\n | { children: string; text?: string }\n | { children: ReactNode; text: string };\n\nexport type ProfileDropdownSectionProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {\n children: ReactNode;\n id: string;\n tooltip?: string;\n tag?: CounterTagData;\n counter?: CounterTagValue;\n} & ProfileItemContent;\n\nexport type ProfileDropdownLinkProps = Omit<ComponentPropsWithoutRef<'a'>, 'children'> & {\n id: string;\n children: ReactNode;\n external?: boolean;\n tooltip?: string;\n to: string;\n tag?: CounterTagData;\n counter?: CounterTagValue;\n} & ProfileItemContent;\n"],"names":[],"mappings":"AAsCA,WAQuB"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
title: string;
|
|
3
|
+
component: (({ children, direction, trigger, hintPopup, portal, width, onClose, onOpen, ...rest }: import("./interface").ProfileDropdownProps) => import("react/jsx-runtime").JSX.Element) & {
|
|
4
|
+
Divider: import("react").FC;
|
|
5
|
+
Link: ({ children, className, external, id, counter, tag, target, text, to, tooltip, onClick, ...rest }: import("./interface").ProfileDropdownLinkProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
Section: ({ children, className, counter, id, tag, text, tooltip, onClick, ...rest }: import("./interface").ProfileDropdownSectionProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
};
|
|
8
|
+
parameters: {};
|
|
9
|
+
decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
|
|
10
|
+
};
|
|
11
|
+
export default _default;
|
|
12
|
+
export { ProfileDropdownDefault, ProfileDropdownWithBothBadges, ProfileDropdownWithCounter, ProfileDropdownWithErrorLogo, ProfileDropdownWithInfo, ProfileDropdownWithHintAndInfoPopup, ProfileDropdownWithHintPopup, ProfileDropdownWithLogo, } from './profile-dropdown.stories';
|
|
13
|
+
//# sourceMappingURL=profile-dropdown-legacy.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"profile-dropdown-legacy.stories.d.ts","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown-legacy.stories.tsx"],"names":[],"mappings":";;;;;;;;;;AAQA,wBAKE;AAEF,OAAO,EACH,sBAAsB,EACtB,6BAA6B,EAC7B,0BAA0B,EAC1B,4BAA4B,EAC5B,uBAAuB,EACvB,mCAAmC,EACnC,4BAA4B,EAC5B,uBAAuB,GAC1B,MAAM,4BAA4B,CAAC"}
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
declare const _default: {
|
|
2
2
|
title: string;
|
|
3
|
-
component: import("./
|
|
3
|
+
component: (({ children, direction, trigger, hintPopup, portal, width, onClose, onOpen, ...rest }: import("./interface").ProfileDropdownProps) => import("react/jsx-runtime").JSX.Element) & {
|
|
4
|
+
Divider: import("react").FC;
|
|
5
|
+
Link: ({ children, className, external, id, counter, tag, target, text, to, tooltip, onClick, ...rest }: import("./interface").ProfileDropdownLinkProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
Section: ({ children, className, counter, id, tag, text, tooltip, onClick, ...rest }: import("./interface").ProfileDropdownSectionProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
};
|
|
4
8
|
parameters: {};
|
|
5
9
|
decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
|
|
6
10
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"profile-dropdown-stacked.stories.d.ts","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown-stacked.stories.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"profile-dropdown-stacked.stories.d.ts","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown-stacked.stories.tsx"],"names":[],"mappings":";;;;;;;;;;AAcA,wBAKE;AAEF,OAAO,EACH,sBAAsB,EACtB,6BAA6B,EAC7B,0BAA0B,EAC1B,4BAA4B,EAC5B,uBAAuB,EACvB,mCAAmC,EACnC,4BAA4B,EAC5B,uBAAuB,GAC1B,MAAM,4BAA4B,CAAC"}
|
|
@@ -1,82 +1,12 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
imageSrc?: string | null;
|
|
11
|
-
avatarBadge?: boolean | string;
|
|
12
|
-
badge?: {
|
|
13
|
-
content?: number | string;
|
|
14
|
-
className: string;
|
|
15
|
-
};
|
|
16
|
-
hintArrow?: boolean;
|
|
17
|
-
open: boolean;
|
|
18
|
-
onClick?(e: MouseEvent): void;
|
|
19
|
-
}
|
|
20
|
-
declare const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps>;
|
|
21
|
-
export type ProfileItemContent = {
|
|
22
|
-
children: string;
|
|
23
|
-
text?: string;
|
|
24
|
-
} | {
|
|
25
|
-
children: ReactNode;
|
|
26
|
-
text: string;
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { ProfileDropdownLinkProps, ProfileDropdownProps, ProfileDropdownSectionProps } from './interface';
|
|
3
|
+
declare function DesktopProfileDropdownSection({ children, className, counter, id, tag, text, tooltip, onClick, ...rest }: ProfileDropdownSectionProps): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function DesktopProfileDropdownLink({ children, className, external, id, counter, tag, target, text, to, tooltip, onClick, ...rest }: ProfileDropdownLinkProps): import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare function DesktopProfileDropdownComponent({ children, direction, trigger, hintPopup, portal, width, onClose, onOpen, ...rest }: ProfileDropdownProps): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare const DesktopProfileDropdown: typeof DesktopProfileDropdownComponent & {
|
|
7
|
+
Divider: FC;
|
|
8
|
+
Link: typeof DesktopProfileDropdownLink;
|
|
9
|
+
Section: typeof DesktopProfileDropdownSection;
|
|
27
10
|
};
|
|
28
|
-
export interface ProfileDropdownSectionPropsStrict {
|
|
29
|
-
children: ReactNode;
|
|
30
|
-
id: string;
|
|
31
|
-
tooltip?: string;
|
|
32
|
-
className?: string;
|
|
33
|
-
tag?: CounterTagData;
|
|
34
|
-
counter?: CounterTagValue;
|
|
35
|
-
onClick?(e: MouseEvent): void;
|
|
36
|
-
}
|
|
37
|
-
export type ProfileDropdownSectionProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & ProfileDropdownSectionPropsStrict & ProfileItemContent;
|
|
38
|
-
export declare const ProfileDropdownSection: FC<ProfileDropdownSectionProps>;
|
|
39
|
-
export declare const ProfileDropdownDivider: FC;
|
|
40
|
-
export interface ProfileDropdownLinkPropsStrict {
|
|
41
|
-
id: string;
|
|
42
|
-
children: ReactNode;
|
|
43
|
-
className?: string;
|
|
44
|
-
external?: boolean;
|
|
45
|
-
target?: HTMLAttributeAnchorTarget;
|
|
46
|
-
tooltip?: string;
|
|
47
|
-
to: string;
|
|
48
|
-
tag?: CounterTagData;
|
|
49
|
-
counter?: CounterTagValue;
|
|
50
|
-
}
|
|
51
|
-
export type ProfileDropdownLinkProps = Omit<ComponentPropsWithoutRef<'a'>, 'children'> & ProfileDropdownLinkPropsStrict & ProfileItemContent;
|
|
52
|
-
export declare const ProfileDropdownLink: FC<ProfileDropdownLinkProps>;
|
|
53
|
-
export interface ProfileDropdownPropsStrict {
|
|
54
|
-
children?: ReactNode;
|
|
55
|
-
className?: string;
|
|
56
|
-
direction?: PopoverPropsStrict['direction'];
|
|
57
|
-
trigger?: Omit<ProfileDropdownTriggerProps, 'onClick' | 'open' | 'hintArrow'>;
|
|
58
|
-
hintPopup?: {
|
|
59
|
-
className?: string;
|
|
60
|
-
content: FC<{
|
|
61
|
-
openProfile(): void;
|
|
62
|
-
}>;
|
|
63
|
-
width?: PopoverPropsStrict['width'];
|
|
64
|
-
onClose?: () => void;
|
|
65
|
-
};
|
|
66
|
-
portal?: boolean;
|
|
67
|
-
width?: PopoverPropsStrict['width'];
|
|
68
|
-
onClose?(): void;
|
|
69
|
-
onOpen?(): void;
|
|
70
|
-
}
|
|
71
|
-
export interface ProfileDropdownProps extends ProfileDropdownPropsStrict {
|
|
72
|
-
[key: string]: any;
|
|
73
|
-
}
|
|
74
|
-
export interface ProfileDropdownType extends FC<ProfileDropdownProps> {
|
|
75
|
-
Divider: typeof ProfileDropdownDivider;
|
|
76
|
-
Link: typeof ProfileDropdownLink;
|
|
77
|
-
Trigger: typeof ProfileDropdownTrigger;
|
|
78
|
-
Section: typeof ProfileDropdownSection;
|
|
79
|
-
}
|
|
80
|
-
export declare const ProfileDropdown: ProfileDropdownType;
|
|
81
11
|
export {};
|
|
82
12
|
//# sourceMappingURL=profile-dropdown.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"profile-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"profile-dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.tsx"],"names":[],"mappings":"AAOA,OAAO,EAEH,EAAE,EAOL,MAAM,OAAO,CAAC;AAOf,OAAO,EACH,wBAAwB,EACxB,oBAAoB,EACpB,2BAA2B,EAE9B,MAAM,aAAa,CAAC;AAuHrB,iBAAS,6BAA6B,CAAC,EACnC,QAAQ,EACR,SAAS,EACT,OAAO,EACP,EAAE,EACF,GAAG,EACH,IAAI,EACJ,OAAO,EACP,OAAO,EACP,GAAG,IAAI,EACV,EAAE,2BAA2B,2CA8B7B;AAID,iBAAS,0BAA0B,CAAC,EAChC,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,EAAE,EACF,OAAO,EACP,GAAG,EACH,MAAM,EACN,IAAI,EACJ,EAAE,EACF,OAAO,EACP,OAAO,EACP,GAAG,IAAI,EACV,EAAE,wBAAwB,2CA8C1B;AAED,iBAAS,+BAA+B,CAAC,EACrC,QAAQ,EAER,SAAS,EACT,OAAO,EACP,SAAS,EACT,MAAM,EACN,KAAK,EACL,OAAO,EACP,MAAM,EAEN,GAAG,IAAI,EACV,EAAE,oBAAoB,2CA2EtB;AAED,eAAO,MAAM,sBAAsB;;;;CAIjC,CAAC"}
|
|
@@ -6,17 +6,15 @@ import SvgAccountActive from '@servicetitan/anvil2/assets/icons/st/gnav_account_
|
|
|
6
6
|
import SvgAccountInactive from '@servicetitan/anvil2/assets/icons/st/gnav_account_inactive.svg';
|
|
7
7
|
import { BodyText, Popover } from '@servicetitan/design-system';
|
|
8
8
|
import classNames from 'classnames';
|
|
9
|
-
import { useCallback,
|
|
10
|
-
import { NavigationComponentContext, NavigationLegacyContext } from '../../utils/navigation-context';
|
|
9
|
+
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
11
10
|
import { getCounterTag } from '../../utils/side-nav';
|
|
12
11
|
import { CounterTag } from '../counter-tag';
|
|
12
|
+
import { useTitanLayoutContext } from '../titan-layout';
|
|
13
13
|
import { withTooltip } from '../titan-layout/with-tooltip';
|
|
14
14
|
import * as Styles from './profile-dropdown.module.less';
|
|
15
|
-
|
|
16
|
-
const ProfileDropdownTrigger = ({ avatarBadge, badge, className, hintArrow, imageSrc, info, onClick, open })=>{
|
|
15
|
+
const ProfileDropdownTrigger = ({ info, imageSrc, avatarBadge, badge, className, hintArrow, open, onClick, ...rest })=>{
|
|
17
16
|
const [avatarSource, setAvatarSource] = useState(imageSrc !== null && imageSrc !== void 0 ? imageSrc : '');
|
|
18
17
|
const [avatarSourceError, setAvatarSourceError] = useState(false);
|
|
19
|
-
const isLegacy = useContext(NavigationLegacyContext);
|
|
20
18
|
useEffect(()=>{
|
|
21
19
|
const src = imageSrc !== null && imageSrc !== void 0 ? imageSrc : '';
|
|
22
20
|
if (src === avatarSource) {
|
|
@@ -32,20 +30,20 @@ const ProfileDropdownTrigger = ({ avatarBadge, badge, className, hintArrow, imag
|
|
|
32
30
|
setAvatarSourceError(true);
|
|
33
31
|
}, []);
|
|
34
32
|
return /*#__PURE__*/ _jsxs("div", {
|
|
33
|
+
"data-cy": "profile-dropdown-trigger",
|
|
34
|
+
"data-pendo": "profile-dropdown-trigger",
|
|
35
|
+
...rest,
|
|
35
36
|
className: classNames('d-f align-items-center cursor-pointer position-relative p-x-1 p-y-half', 'profile-dropdown-trigger', Styles.triggerContainer, {
|
|
36
|
-
[Styles.triggerContainerHintArrow]: hintArrow
|
|
37
|
-
[Styles.triggerContainerLegacy]: isLegacy
|
|
37
|
+
[Styles.triggerContainerHintArrow]: hintArrow
|
|
38
38
|
}, className),
|
|
39
39
|
onClick: onClick,
|
|
40
|
-
"data-cy": "profile-dropdown-trigger",
|
|
41
|
-
"data-pendo": "profile-dropdown-trigger",
|
|
42
40
|
children: [
|
|
43
41
|
avatarSource && !avatarSourceError ? /*#__PURE__*/ _jsx("img", {
|
|
44
42
|
src: avatarSource,
|
|
45
43
|
className: classNames(Styles.profileImage, 'profile-dropdown-image'),
|
|
46
44
|
onError: onAvatarError,
|
|
47
45
|
alt: "user dropdown menu"
|
|
48
|
-
}) :
|
|
46
|
+
}) : /*#__PURE__*/ _jsx(Icon, {
|
|
49
47
|
className: "c-inherit-i",
|
|
50
48
|
size: "large",
|
|
51
49
|
svg: open ? SvgAccountActive : SvgAccountInactive
|
|
@@ -96,7 +94,7 @@ const useTag = (counter, tag)=>useMemo(()=>{
|
|
|
96
94
|
counter,
|
|
97
95
|
tag
|
|
98
96
|
]);
|
|
99
|
-
|
|
97
|
+
function DesktopProfileDropdownSection({ children, className, counter, id, tag, text, tooltip, onClick, ...rest }) {
|
|
100
98
|
const clickHandler = (e)=>{
|
|
101
99
|
if (onClick) {
|
|
102
100
|
onClick(e);
|
|
@@ -118,10 +116,10 @@ export const ProfileDropdownSection = ({ children, className, counter, id, tag,
|
|
|
118
116
|
}), tooltip, {
|
|
119
117
|
placement: 'left'
|
|
120
118
|
});
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
const NavigationComponent =
|
|
119
|
+
}
|
|
120
|
+
const DesktopProfileDropdownDivider = Popover.Divider;
|
|
121
|
+
function DesktopProfileDropdownLink({ children, className, external, id, counter, tag, target, text, to, tooltip, onClick, ...rest }) {
|
|
122
|
+
const { NavigationComponent } = useTitanLayoutContext();
|
|
125
123
|
const isExternalLink = external !== null && external !== void 0 ? external : to === null || to === void 0 ? void 0 : to.startsWith('http');
|
|
126
124
|
const tagElement = useTag(counter, tag);
|
|
127
125
|
return withTooltip(isExternalLink ? /*#__PURE__*/ _jsxs("a", {
|
|
@@ -151,8 +149,8 @@ export const ProfileDropdownLink = ({ children, className, external, id, counter
|
|
|
151
149
|
}), tooltip, {
|
|
152
150
|
placement: 'left'
|
|
153
151
|
});
|
|
154
|
-
}
|
|
155
|
-
|
|
152
|
+
}
|
|
153
|
+
function DesktopProfileDropdownComponent({ children, direction, trigger, hintPopup, portal, width, onClose, onOpen, ...rest }) {
|
|
156
154
|
const [open, setOpen] = useState(false);
|
|
157
155
|
const handleClose = useCallback(()=>{
|
|
158
156
|
setOpen(false);
|
|
@@ -189,8 +187,8 @@ export const ProfileDropdown = ({ children, className, direction, hintPopup, onC
|
|
|
189
187
|
});
|
|
190
188
|
var _hintPopup_width;
|
|
191
189
|
return /*#__PURE__*/ _jsx("div", {
|
|
192
|
-
className: className,
|
|
193
190
|
"data-cy": "profile-dropdown",
|
|
191
|
+
...rest,
|
|
194
192
|
children: !!hintPopup && hintShown && HintComponent ? /*#__PURE__*/ _jsx(Popover, {
|
|
195
193
|
direction: direction !== null && direction !== void 0 ? direction : 'bl',
|
|
196
194
|
width: (_hintPopup_width = hintPopup.width) !== null && _hintPopup_width !== void 0 ? _hintPopup_width : 'xs',
|
|
@@ -221,9 +219,11 @@ export const ProfileDropdown = ({ children, className, direction, hintPopup, onC
|
|
|
221
219
|
})
|
|
222
220
|
})
|
|
223
221
|
});
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
222
|
+
}
|
|
223
|
+
export const DesktopProfileDropdown = Object.assign(DesktopProfileDropdownComponent, {
|
|
224
|
+
Divider: DesktopProfileDropdownDivider,
|
|
225
|
+
Link: DesktopProfileDropdownLink,
|
|
226
|
+
Section: DesktopProfileDropdownSection
|
|
227
|
+
});
|
|
228
228
|
|
|
229
229
|
//# sourceMappingURL=profile-dropdown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/profile-dropdown/profile-dropdown.tsx"],"sourcesContent":["import { Icon } from '@servicetitan/anvil2';\nimport SvgExpandLess from '@servicetitan/anvil2/assets/icons/material/round/expand_less.svg';\nimport SvgExpandMore from '@servicetitan/anvil2/assets/icons/material/round/expand_more.svg';\nimport SvgAccountActive from '@servicetitan/anvil2/assets/icons/st/gnav_account_active.svg';\nimport SvgAccountInactive from '@servicetitan/anvil2/assets/icons/st/gnav_account_inactive.svg';\nimport { BodyText, Popover, PopoverPropsStrict } from '@servicetitan/design-system';\nimport classNames from 'classnames';\nimport {\n ComponentPropsWithoutRef,\n FC,\n HTMLAttributeAnchorTarget,\n MouseEvent,\n MouseEventHandler,\n ReactNode,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from 'react';\n\nimport { CounterTagData, CounterTagValue } from '../../utils/counter-tag';\nimport {\n NavigationComponentContext,\n NavigationLegacyContext,\n} from '../../utils/navigation-context';\nimport { getCounterTag } from '../../utils/side-nav';\nimport { CounterTag } from '../counter-tag';\nimport { withTooltip } from '../titan-layout/with-tooltip';\nimport * as Styles from './profile-dropdown.module.less';\nimport { ProfileLogo } from './profile-icon';\n\nexport interface ProfileDropdownTriggerProps {\n className?: string;\n info?: { title: string; text: string };\n imageSrc?: string | null;\n avatarBadge?: boolean | string;\n badge?: { content?: number | string; className: string };\n hintArrow?: boolean;\n open: boolean;\n onClick?(e: MouseEvent): void;\n}\n\nconst ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({\n avatarBadge,\n badge,\n className,\n hintArrow,\n imageSrc,\n info,\n onClick,\n open,\n}) => {\n const [avatarSource, setAvatarSource] = useState(imageSrc ?? '');\n const [avatarSourceError, setAvatarSourceError] = useState(false);\n const isLegacy = useContext(NavigationLegacyContext);\n\n useEffect(() => {\n const src = imageSrc ?? '';\n\n if (src === avatarSource) {\n return;\n }\n\n setAvatarSource(src);\n setAvatarSourceError(false);\n }, [imageSrc, avatarSource]);\n\n const onAvatarError = useCallback(() => {\n setAvatarSourceError(true);\n }, []);\n\n return (\n <div\n className={classNames(\n 'd-f align-items-center cursor-pointer position-relative p-x-1 p-y-half',\n 'profile-dropdown-trigger',\n Styles.triggerContainer,\n {\n [Styles.triggerContainerHintArrow]: hintArrow,\n [Styles.triggerContainerLegacy]: isLegacy,\n },\n className\n )}\n onClick={onClick}\n data-cy=\"profile-dropdown-trigger\"\n data-pendo=\"profile-dropdown-trigger\"\n >\n {avatarSource && !avatarSourceError ? (\n <img\n src={avatarSource}\n className={classNames(Styles.profileImage, 'profile-dropdown-image')}\n onError={onAvatarError}\n alt=\"user dropdown menu\"\n />\n ) : isLegacy ? (\n <ProfileLogo />\n ) : (\n <Icon\n className=\"c-inherit-i\"\n size=\"large\"\n svg={open ? SvgAccountActive : SvgAccountInactive}\n />\n )}\n\n {!!info && (\n <div className={Styles.info}>\n <BodyText\n bold\n title={info.title}\n className=\"t-truncate c-inherit\"\n size=\"xsmall\"\n >\n {info.title}\n </BodyText>\n <BodyText\n title={info.text}\n className=\"t-truncate c-neutral-70 tt-uppercase\"\n size=\"xsmall\"\n >\n {info.text}\n </BodyText>\n </div>\n )}\n\n <Icon\n svg={open ? SvgExpandLess : SvgExpandMore}\n className={classNames(Styles.expandIcon, 'c-inherit-i')}\n size=\"small\"\n />\n\n {!!avatarBadge && (\n <div\n className={classNames(\n Styles.avatarBadge,\n avatarBadge === true ? 'bg-blue-500' : `bg-${avatarBadge}`\n )}\n />\n )}\n {!!badge && (\n <span\n className={classNames(\n Styles.badge,\n badge.content ? Styles.badgeWithContent : Styles.badgeNoContent,\n badge.className\n )}\n >\n {badge.content}\n </span>\n )}\n </div>\n );\n};\n\nconst useTag = (counter?: CounterTagValue, tag?: CounterTagData) =>\n useMemo(() => {\n const data = getCounterTag(counter, tag);\n\n return data ? (\n <div className={Styles.counterWrapper}>\n <CounterTag className={Styles.counter} data={data} />\n </div>\n ) : undefined;\n }, [counter, tag]);\n\nexport type ProfileItemContent =\n | { children: string; text?: string }\n | { children: ReactNode; text: string };\n\nexport interface ProfileDropdownSectionPropsStrict {\n children: ReactNode;\n id: string;\n tooltip?: string;\n className?: string;\n tag?: CounterTagData;\n counter?: CounterTagValue;\n onClick?(e: MouseEvent): void;\n}\n\nexport type ProfileDropdownSectionProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> &\n ProfileDropdownSectionPropsStrict &\n ProfileItemContent;\n\nexport const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({\n children,\n className,\n counter,\n id,\n tag,\n text,\n tooltip,\n onClick,\n ...rest\n}) => {\n const clickHandler: MouseEventHandler<never> = e => {\n if (onClick) {\n onClick(e);\n } else {\n e.stopPropagation();\n }\n };\n\n const tagElement = useTag(counter, tag);\n\n return withTooltip(\n <div\n className={classNames(\n Styles.dropdownSection,\n tagElement && Styles.dropdownSectionWithCounter,\n !!onClick && Styles.dropdownLink,\n className\n )}\n onClick={clickHandler}\n data-cy={`profile-dropdown-section-${id}`}\n data-pendo={`profile-dropdown-section-${id}`}\n {...rest}\n >\n {children}\n {tagElement}\n </div>,\n tooltip,\n { placement: 'left' }\n );\n};\n\nexport const ProfileDropdownDivider: FC = Popover.Divider;\n\nexport interface ProfileDropdownLinkPropsStrict {\n id: string;\n children: ReactNode;\n className?: string;\n external?: boolean;\n target?: HTMLAttributeAnchorTarget;\n tooltip?: string;\n to: string;\n tag?: CounterTagData;\n counter?: CounterTagValue;\n}\n\nexport type ProfileDropdownLinkProps = Omit<ComponentPropsWithoutRef<'a'>, 'children'> &\n ProfileDropdownLinkPropsStrict &\n ProfileItemContent;\n\nexport const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({\n children,\n className,\n external,\n id,\n counter,\n tag,\n target,\n text,\n to,\n tooltip,\n onClick,\n ...rest\n}: ProfileDropdownLinkProps) => {\n const NavigationComponent = useContext(NavigationComponentContext);\n\n const isExternalLink = external ?? to?.startsWith('http');\n\n const tagElement = useTag(counter, tag);\n\n return withTooltip(\n isExternalLink ? (\n <a\n className={classNames(\n Styles.dropdownSection,\n tagElement && Styles.dropdownSectionWithCounter,\n Styles.dropdownLink,\n className\n )}\n href={to}\n target={target}\n data-cy={`profile-dropdown-link-${id}`}\n data-pendo={`profile-dropdown-link-${id}`}\n {...rest}\n >\n {children}\n {tagElement}\n </a>\n ) : (\n <NavigationComponent\n className={classNames(\n Styles.dropdownSection,\n Styles.dropdownLink,\n { [Styles.dropdownSectionWithCounter]: !!tagElement },\n className\n )}\n target={target}\n to={to}\n data-cy={`profile-dropdown-link-${id}`}\n data-pendo={`profile-dropdown-link-${id}`}\n {...rest}\n >\n {children}\n {tagElement}\n </NavigationComponent>\n ),\n tooltip,\n { placement: 'left' }\n );\n};\n\nexport interface ProfileDropdownPropsStrict {\n children?: ReactNode;\n className?: string;\n direction?: PopoverPropsStrict['direction'];\n trigger?: Omit<ProfileDropdownTriggerProps, 'onClick' | 'open' | 'hintArrow'>;\n hintPopup?: {\n className?: string;\n content: FC<{ openProfile(): void }>;\n width?: PopoverPropsStrict['width'];\n onClose?: () => void;\n };\n portal?: boolean;\n width?: PopoverPropsStrict['width'];\n onClose?(): void;\n onOpen?(): void;\n}\n\nexport interface ProfileDropdownProps extends ProfileDropdownPropsStrict {\n [key: string]: any;\n}\n\nexport interface ProfileDropdownType extends FC<ProfileDropdownProps> {\n Divider: typeof ProfileDropdownDivider;\n Link: typeof ProfileDropdownLink;\n Trigger: typeof ProfileDropdownTrigger;\n Section: typeof ProfileDropdownSection;\n}\n\nexport const ProfileDropdown: ProfileDropdownType = (({\n children,\n className,\n direction,\n hintPopup,\n onClose,\n onOpen,\n portal,\n trigger,\n width,\n}) => {\n const [open, setOpen] = useState(false);\n const handleClose = useCallback(() => {\n setOpen(false);\n onClose?.();\n }, [onClose]);\n const handleOpen = useCallback(() => {\n setOpen(true);\n onOpen?.();\n }, [onOpen]);\n const onTriggerClick = useCallback(\n (e: MouseEvent) => {\n e.stopPropagation();\n setOpen(!open);\n\n if (open) {\n onClose?.();\n } else {\n onOpen?.();\n }\n },\n [open, onOpen, onClose]\n );\n const hintShown = !!hintPopup && !open;\n const HintComponent = hintPopup?.content;\n\n const triggerElement = (\n <ProfileDropdownTrigger\n {...trigger}\n onClick={children ? onTriggerClick : undefined}\n hintArrow={hintShown}\n open={open}\n />\n );\n\n return (\n <div className={className} data-cy=\"profile-dropdown\">\n {!!hintPopup && hintShown && HintComponent ? (\n <Popover\n direction={direction ?? 'bl'}\n width={hintPopup.width ?? 'xs'}\n trigger={triggerElement}\n popoverContentClassName={Styles.hint}\n onClickOutside={hintPopup?.onClose}\n open\n >\n <div className={classNames(Styles.hintContent, hintPopup.className)}>\n <HintComponent openProfile={handleOpen} />\n </div>\n </Popover>\n ) : (\n <Popover\n direction={direction ?? 'bl'}\n width={width ?? 'xs'}\n trigger={triggerElement}\n open={open}\n portal={portal}\n onClickOutside={handleClose}\n className={Styles.dropdown}\n popoverContentClassName={classNames(\n Styles.dropdownContent,\n Styles.dropdownContentBottomLeft\n )}\n >\n <div\n className={Styles.dropdownContentWrapper}\n onClick={handleClose}\n data-cy=\"profile-dropdown-content\"\n >\n {children}\n </div>\n </Popover>\n )}\n </div>\n );\n}) as ProfileDropdownType;\n\nProfileDropdown.Divider = ProfileDropdownDivider;\nProfileDropdown.Link = ProfileDropdownLink;\nProfileDropdown.Section = ProfileDropdownSection;\n"],"names":["Icon","SvgExpandLess","SvgExpandMore","SvgAccountActive","SvgAccountInactive","BodyText","Popover","classNames","useCallback","useContext","useEffect","useMemo","useState","NavigationComponentContext","NavigationLegacyContext","getCounterTag","CounterTag","withTooltip","Styles","ProfileLogo","ProfileDropdownTrigger","avatarBadge","badge","className","hintArrow","imageSrc","info","onClick","open","avatarSource","setAvatarSource","avatarSourceError","setAvatarSourceError","isLegacy","src","onAvatarError","div","triggerContainer","triggerContainerHintArrow","triggerContainerLegacy","data-cy","data-pendo","img","profileImage","onError","alt","size","svg","bold","title","text","expandIcon","span","content","badgeWithContent","badgeNoContent","useTag","counter","tag","data","counterWrapper","undefined","ProfileDropdownSection","children","id","tooltip","rest","clickHandler","e","stopPropagation","tagElement","dropdownSection","dropdownSectionWithCounter","dropdownLink","placement","ProfileDropdownDivider","Divider","ProfileDropdownLink","external","target","to","NavigationComponent","isExternalLink","startsWith","a","href","ProfileDropdown","direction","hintPopup","onClose","onOpen","portal","trigger","width","setOpen","handleClose","handleOpen","onTriggerClick","hintShown","HintComponent","triggerElement","popoverContentClassName","hint","onClickOutside","hintContent","openProfile","dropdown","dropdownContent","dropdownContentBottomLeft","dropdownContentWrapper","Link","Section"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/profile-dropdown/profile-dropdown.tsx"],"sourcesContent":["import { Icon } from '@servicetitan/anvil2';\nimport SvgExpandLess from '@servicetitan/anvil2/assets/icons/material/round/expand_less.svg';\nimport SvgExpandMore from '@servicetitan/anvil2/assets/icons/material/round/expand_more.svg';\nimport SvgAccountActive from '@servicetitan/anvil2/assets/icons/st/gnav_account_active.svg';\nimport SvgAccountInactive from '@servicetitan/anvil2/assets/icons/st/gnav_account_inactive.svg';\nimport { BodyText, Popover } from '@servicetitan/design-system';\nimport classNames from 'classnames';\nimport {\n ComponentPropsWithoutRef,\n FC,\n MouseEvent,\n MouseEventHandler,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from 'react';\n\nimport { CounterTagData, CounterTagValue } from '../../utils/counter-tag';\nimport { getCounterTag } from '../../utils/side-nav';\nimport { CounterTag } from '../counter-tag';\nimport { useTitanLayoutContext } from '../titan-layout';\nimport { withTooltip } from '../titan-layout/with-tooltip';\nimport {\n ProfileDropdownLinkProps,\n ProfileDropdownProps,\n ProfileDropdownSectionProps,\n ProfileDropdownTriggerProps,\n} from './interface';\nimport * as Styles from './profile-dropdown.module.less';\n\nconst ProfileDropdownTrigger: FC<\n ProfileDropdownTriggerProps & {\n hintArrow?: boolean;\n open: boolean;\n onClick: ComponentPropsWithoutRef<'div'>['onClick'];\n }\n> = ({ info, imageSrc, avatarBadge, badge, className, hintArrow, open, onClick, ...rest }) => {\n const [avatarSource, setAvatarSource] = useState(imageSrc ?? '');\n const [avatarSourceError, setAvatarSourceError] = useState(false);\n\n useEffect(() => {\n const src = imageSrc ?? '';\n\n if (src === avatarSource) {\n return;\n }\n\n setAvatarSource(src);\n setAvatarSourceError(false);\n }, [imageSrc, avatarSource]);\n\n const onAvatarError = useCallback(() => {\n setAvatarSourceError(true);\n }, []);\n\n return (\n <div\n data-cy=\"profile-dropdown-trigger\"\n data-pendo=\"profile-dropdown-trigger\"\n {...rest}\n className={classNames(\n 'd-f align-items-center cursor-pointer position-relative p-x-1 p-y-half',\n 'profile-dropdown-trigger',\n Styles.triggerContainer,\n {\n [Styles.triggerContainerHintArrow]: hintArrow,\n },\n className\n )}\n onClick={onClick}\n >\n {avatarSource && !avatarSourceError ? (\n <img\n src={avatarSource}\n className={classNames(Styles.profileImage, 'profile-dropdown-image')}\n onError={onAvatarError}\n alt=\"user dropdown menu\"\n />\n ) : (\n <Icon\n className=\"c-inherit-i\"\n size=\"large\"\n svg={open ? SvgAccountActive : SvgAccountInactive}\n />\n )}\n\n {!!info && (\n <div className={Styles.info}>\n <BodyText\n bold\n title={info.title}\n className=\"t-truncate c-inherit\"\n size=\"xsmall\"\n >\n {info.title}\n </BodyText>\n <BodyText\n title={info.text}\n className=\"t-truncate c-neutral-70 tt-uppercase\"\n size=\"xsmall\"\n >\n {info.text}\n </BodyText>\n </div>\n )}\n\n <Icon\n svg={open ? SvgExpandLess : SvgExpandMore}\n className={classNames(Styles.expandIcon, 'c-inherit-i')}\n size=\"small\"\n />\n\n {!!avatarBadge && (\n <div\n className={classNames(\n Styles.avatarBadge,\n avatarBadge === true ? 'bg-blue-500' : `bg-${avatarBadge}`\n )}\n />\n )}\n {!!badge && (\n <span\n className={classNames(\n Styles.badge,\n badge.content ? Styles.badgeWithContent : Styles.badgeNoContent,\n badge.className\n )}\n >\n {badge.content}\n </span>\n )}\n </div>\n );\n};\n\nconst useTag = (counter?: CounterTagValue, tag?: CounterTagData) =>\n useMemo(() => {\n const data = getCounterTag(counter, tag);\n\n return data ? (\n <div className={Styles.counterWrapper}>\n <CounterTag className={Styles.counter} data={data} />\n </div>\n ) : undefined;\n }, [counter, tag]);\n\nfunction DesktopProfileDropdownSection({\n children,\n className,\n counter,\n id,\n tag,\n text,\n tooltip,\n onClick,\n ...rest\n}: ProfileDropdownSectionProps) {\n const clickHandler: MouseEventHandler<never> = e => {\n if (onClick) {\n onClick(e);\n } else {\n e.stopPropagation();\n }\n };\n\n const tagElement = useTag(counter, tag);\n\n return withTooltip(\n <div\n className={classNames(\n Styles.dropdownSection,\n tagElement && Styles.dropdownSectionWithCounter,\n !!onClick && Styles.dropdownLink,\n className\n )}\n onClick={clickHandler}\n data-cy={`profile-dropdown-section-${id}`}\n data-pendo={`profile-dropdown-section-${id}`}\n {...rest}\n >\n {children}\n {tagElement}\n </div>,\n tooltip,\n { placement: 'left' }\n );\n}\n\nconst DesktopProfileDropdownDivider: FC = Popover.Divider;\n\nfunction DesktopProfileDropdownLink({\n children,\n className,\n external,\n id,\n counter,\n tag,\n target,\n text,\n to,\n tooltip,\n onClick,\n ...rest\n}: ProfileDropdownLinkProps) {\n const { NavigationComponent } = useTitanLayoutContext();\n\n const isExternalLink = external ?? to?.startsWith('http');\n\n const tagElement = useTag(counter, tag);\n\n return withTooltip(\n isExternalLink ? (\n <a\n className={classNames(\n Styles.dropdownSection,\n tagElement && Styles.dropdownSectionWithCounter,\n Styles.dropdownLink,\n className\n )}\n href={to}\n target={target}\n data-cy={`profile-dropdown-link-${id}`}\n data-pendo={`profile-dropdown-link-${id}`}\n {...rest}\n >\n {children}\n {tagElement}\n </a>\n ) : (\n <NavigationComponent\n className={classNames(\n Styles.dropdownSection,\n Styles.dropdownLink,\n { [Styles.dropdownSectionWithCounter]: !!tagElement },\n className\n )}\n target={target}\n to={to}\n data-cy={`profile-dropdown-link-${id}`}\n data-pendo={`profile-dropdown-link-${id}`}\n {...rest}\n >\n {children}\n {tagElement}\n </NavigationComponent>\n ),\n tooltip,\n { placement: 'left' }\n );\n}\n\nfunction DesktopProfileDropdownComponent({\n children,\n\n direction,\n trigger,\n hintPopup,\n portal,\n width,\n onClose,\n onOpen,\n\n ...rest\n}: ProfileDropdownProps) {\n const [open, setOpen] = useState(false);\n const handleClose = useCallback(() => {\n setOpen(false);\n onClose?.();\n }, [onClose]);\n const handleOpen = useCallback(() => {\n setOpen(true);\n onOpen?.();\n }, [onOpen]);\n const onTriggerClick = useCallback(\n (e: MouseEvent) => {\n e.stopPropagation();\n setOpen(!open);\n\n if (open) {\n onClose?.();\n } else {\n onOpen?.();\n }\n },\n [open, onOpen, onClose]\n );\n const hintShown = !!hintPopup && !open;\n const HintComponent = hintPopup?.content;\n\n const triggerElement = (\n <ProfileDropdownTrigger\n {...trigger}\n onClick={children ? onTriggerClick : undefined}\n hintArrow={hintShown}\n open={open}\n />\n );\n\n return (\n <div data-cy=\"profile-dropdown\" {...rest}>\n {!!hintPopup && hintShown && HintComponent ? (\n <Popover\n direction={direction ?? 'bl'}\n width={hintPopup.width ?? 'xs'}\n trigger={triggerElement}\n popoverContentClassName={Styles.hint}\n onClickOutside={hintPopup?.onClose}\n open\n >\n <div className={classNames(Styles.hintContent, hintPopup.className)}>\n <HintComponent openProfile={handleOpen} />\n </div>\n </Popover>\n ) : (\n <Popover\n direction={direction ?? 'bl'}\n width={width ?? 'xs'}\n trigger={triggerElement}\n open={open}\n portal={portal}\n onClickOutside={handleClose}\n className={Styles.dropdown}\n popoverContentClassName={classNames(\n Styles.dropdownContent,\n Styles.dropdownContentBottomLeft\n )}\n >\n <div\n className={Styles.dropdownContentWrapper}\n onClick={handleClose}\n data-cy=\"profile-dropdown-content\"\n >\n {children}\n </div>\n </Popover>\n )}\n </div>\n );\n}\n\nexport const DesktopProfileDropdown = Object.assign(DesktopProfileDropdownComponent, {\n Divider: DesktopProfileDropdownDivider,\n Link: DesktopProfileDropdownLink,\n Section: DesktopProfileDropdownSection,\n});\n"],"names":["Icon","SvgExpandLess","SvgExpandMore","SvgAccountActive","SvgAccountInactive","BodyText","Popover","classNames","useCallback","useEffect","useMemo","useState","getCounterTag","CounterTag","useTitanLayoutContext","withTooltip","Styles","ProfileDropdownTrigger","info","imageSrc","avatarBadge","badge","className","hintArrow","open","onClick","rest","avatarSource","setAvatarSource","avatarSourceError","setAvatarSourceError","src","onAvatarError","div","data-cy","data-pendo","triggerContainer","triggerContainerHintArrow","img","profileImage","onError","alt","size","svg","bold","title","text","expandIcon","span","content","badgeWithContent","badgeNoContent","useTag","counter","tag","data","counterWrapper","undefined","DesktopProfileDropdownSection","children","id","tooltip","clickHandler","e","stopPropagation","tagElement","dropdownSection","dropdownSectionWithCounter","dropdownLink","placement","DesktopProfileDropdownDivider","Divider","DesktopProfileDropdownLink","external","target","to","NavigationComponent","isExternalLink","startsWith","a","href","DesktopProfileDropdownComponent","direction","trigger","hintPopup","portal","width","onClose","onOpen","setOpen","handleClose","handleOpen","onTriggerClick","hintShown","HintComponent","triggerElement","popoverContentClassName","hint","onClickOutside","hintContent","openProfile","dropdown","dropdownContent","dropdownContentBottomLeft","dropdownContentWrapper","DesktopProfileDropdown","Object","assign","Link","Section"],"mappings":"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"}
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
declare const _default: {
|
|
2
2
|
title: string;
|
|
3
|
-
component: import("./
|
|
3
|
+
component: (({ children, direction, trigger, hintPopup, portal, width, onClose, onOpen, ...rest }: import("./interface").ProfileDropdownProps) => import("react/jsx-runtime").JSX.Element) & {
|
|
4
|
+
Divider: import("react").FC;
|
|
5
|
+
Link: ({ children, className, external, id, counter, tag, target, text, to, tooltip, onClick, ...rest }: import("./interface").ProfileDropdownLinkProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
Section: ({ children, className, counter, id, tag, text, tooltip, onClick, ...rest }: import("./interface").ProfileDropdownSectionProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
};
|
|
4
8
|
parameters: {};
|
|
5
9
|
decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
|
|
6
10
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"profile-dropdown.stories.d.ts","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.stories.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"profile-dropdown.stories.d.ts","sourceRoot":"","sources":["../../../src/components/profile-dropdown/profile-dropdown.stories.tsx"],"names":[],"mappings":";;;;;;;;;;AASA,wBAKE;AAEF,eAAO,MAAM,sBAAsB,+CA2BlC,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAanC,CAAC;AAEF,eAAO,MAAM,4BAA4B,+CAMxC,CAAC;AAEF,eAAO,MAAM,uBAAuB,+CAOnC,CAAC;AAEF,eAAO,MAAM,0BAA0B,+CAQtC,CAAC;AAEF,eAAO,MAAM,6BAA6B,+CAOzC,CAAC;AAKF,eAAO,MAAM,4BAA4B,+CA+BxC,CAAC;AAEF,eAAO,MAAM,mCAAmC,+CAW/C,CAAC"}
|
|
@@ -1,6 +1,18 @@
|
|
|
1
|
+
import { IconProps } from '@servicetitan/anvil2';
|
|
1
2
|
import { FC } from 'react';
|
|
3
|
+
import { CounterTagData } from '../../utils/counter-tag';
|
|
2
4
|
import { NavLinkComponentProps } from '../../utils/navigation-context';
|
|
3
5
|
export interface NavigationComponentProps {
|
|
4
6
|
navigationComponent: FC<NavLinkComponentProps>;
|
|
5
7
|
}
|
|
8
|
+
export interface NavigationItemPropsStrict {
|
|
9
|
+
id: string;
|
|
10
|
+
to: string;
|
|
11
|
+
title: string;
|
|
12
|
+
isActive: boolean | ((pathname: string) => boolean) | undefined;
|
|
13
|
+
icon: IconProps['svg'] | undefined;
|
|
14
|
+
iconActive: IconProps['svg'] | undefined;
|
|
15
|
+
tag: CounterTagData | undefined;
|
|
16
|
+
className: string | undefined;
|
|
17
|
+
}
|
|
6
18
|
//# sourceMappingURL=interface-internal.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interface-internal.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/interface-internal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAEvE,MAAM,WAAW,wBAAwB;IACrC,mBAAmB,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;CAClD"}
|
|
1
|
+
{"version":3,"file":"interface-internal.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/interface-internal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAC3B,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAEvE,MAAM,WAAW,wBAAwB;IACrC,mBAAmB,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;CAClD;AACD,MAAM,WAAW,yBAAyB;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,SAAS,CAAC;IAChE,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACnC,UAAU,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IAEzC,GAAG,EAAE,cAAc,GAAG,SAAS,CAAC;IAChC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;CACjC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/titan-layout/interface-internal.ts"],"sourcesContent":["import { FC } from 'react';\nimport { NavLinkComponentProps } from '../../utils/navigation-context';\n\nexport interface NavigationComponentProps {\n navigationComponent: FC<NavLinkComponentProps>;\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/titan-layout/interface-internal.ts"],"sourcesContent":["import { IconProps } from '@servicetitan/anvil2';\nimport { FC } from 'react';\nimport { CounterTagData } from '../../utils/counter-tag';\nimport { NavLinkComponentProps } from '../../utils/navigation-context';\n\nexport interface NavigationComponentProps {\n navigationComponent: FC<NavLinkComponentProps>;\n}\nexport interface NavigationItemPropsStrict {\n id: string;\n to: string;\n title: string;\n isActive: boolean | ((pathname: string) => boolean) | undefined;\n icon: IconProps['svg'] | undefined;\n iconActive: IconProps['svg'] | undefined;\n\n tag: CounterTagData | undefined;\n className: string | undefined;\n}\n"],"names":[],"mappings":"AAQA,WAUC"}
|
|
@@ -1,21 +1,74 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
1
|
+
import { IconProps } from '@servicetitan/anvil2';
|
|
2
|
+
import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
|
|
3
|
+
import { CounterTagData, CounterTagValue } from '../../utils/counter-tag';
|
|
3
4
|
import { TitanLayoutSidebarContextType } from './layout-context';
|
|
4
|
-
export interface
|
|
5
|
-
children:
|
|
5
|
+
export interface TitanLayoutLinkWrapperProps {
|
|
6
|
+
children: ReactNode;
|
|
6
7
|
context: TitanLayoutSidebarContextType;
|
|
8
|
+
isMobile: boolean;
|
|
7
9
|
}
|
|
8
|
-
export
|
|
9
|
-
wrapper?: FC<TitanLayoutSidebarLinkWrapperProps>;
|
|
10
|
-
}
|
|
11
|
-
export interface TitanLayoutSidebarTriggerProps extends Omit<TitanLayoutSidebarLinkProps, 'to' | 'isActive'> {
|
|
12
|
-
isActive?: boolean;
|
|
13
|
-
wrapper?: FC<TitanLayoutSidebarLinkWrapperProps>;
|
|
14
|
-
onClick?: () => void;
|
|
15
|
-
onMobileClick?: () => void;
|
|
16
|
-
}
|
|
10
|
+
export type TitanLayoutLinkWrapper = FC<TitanLayoutLinkWrapperProps>;
|
|
17
11
|
export interface TitanLayoutState {
|
|
18
12
|
navCollapsed: boolean;
|
|
19
13
|
submenuExpanded?: string;
|
|
20
14
|
}
|
|
15
|
+
export interface TitanLayoutLinkExtraProps {
|
|
16
|
+
showTitle?: boolean;
|
|
17
|
+
flashing?: boolean;
|
|
18
|
+
}
|
|
19
|
+
export interface TitanLayoutLinkSideProps {
|
|
20
|
+
counter: CounterTagValue;
|
|
21
|
+
}
|
|
22
|
+
export type TitanLayoutLinkProps = {
|
|
23
|
+
/** link id */
|
|
24
|
+
id: string;
|
|
25
|
+
/** link href */
|
|
26
|
+
to: string;
|
|
27
|
+
/** link title */
|
|
28
|
+
title: string;
|
|
29
|
+
/** callback to return active state. By default, it compares link href with current pathname */
|
|
30
|
+
isActive?: boolean | ((pathname: string) => boolean);
|
|
31
|
+
/** svg icon (anvil2) of inactive item */
|
|
32
|
+
icon: IconProps['svg'] | undefined;
|
|
33
|
+
/** svg icon (anvil2) of active item */
|
|
34
|
+
iconActive: IconProps['svg'] | undefined;
|
|
35
|
+
/** item tag (optional). shown if it is set and value is true or greater than 0 */
|
|
36
|
+
tag?: CounterTagData;
|
|
37
|
+
counter?: CounterTagValue;
|
|
38
|
+
/** class name of link item */
|
|
39
|
+
className?: string;
|
|
40
|
+
/** tooltip text (for extra links) */
|
|
41
|
+
tooltip?: string;
|
|
42
|
+
/** wrapper component for link element (used for side links) */
|
|
43
|
+
wrapper?: TitanLayoutLinkWrapper;
|
|
44
|
+
/** props for extra link element */
|
|
45
|
+
extra?: TitanLayoutLinkExtraProps;
|
|
46
|
+
/** props for side nav link element (mobile version) */
|
|
47
|
+
side?: TitanLayoutLinkSideProps;
|
|
48
|
+
} & Omit<ComponentPropsWithoutRef<'a'>, 'children' | 'title'>;
|
|
49
|
+
export type TitanLayoutTriggerProps = {
|
|
50
|
+
/** link id */
|
|
51
|
+
id: string;
|
|
52
|
+
/** link title */
|
|
53
|
+
title: string;
|
|
54
|
+
/** active state */
|
|
55
|
+
isActive?: boolean;
|
|
56
|
+
/** svg icon (anvil2) of inactive item */
|
|
57
|
+
icon: IconProps['svg'] | undefined;
|
|
58
|
+
/** svg icon (anvil2) of active item */
|
|
59
|
+
iconActive: IconProps['svg'] | undefined;
|
|
60
|
+
/** item tag (optional). shown if it is set and value is true or greater than 0 */
|
|
61
|
+
tag?: CounterTagData;
|
|
62
|
+
counter?: CounterTagValue;
|
|
63
|
+
/** class name of link item */
|
|
64
|
+
className?: string;
|
|
65
|
+
/** tooltip text (for extra links) */
|
|
66
|
+
tooltip?: string;
|
|
67
|
+
/** wrapper component for link element (used for side links) */
|
|
68
|
+
wrapper?: TitanLayoutLinkWrapper;
|
|
69
|
+
/** props for extra link element */
|
|
70
|
+
extra?: TitanLayoutLinkExtraProps;
|
|
71
|
+
/** props for nav link element (mobile version) */
|
|
72
|
+
side?: TitanLayoutLinkSideProps;
|
|
73
|
+
} & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'title'>;
|
|
21
74
|
//# sourceMappingURL=interface.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interface.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"interface.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,wBAAwB,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1E,OAAO,EAAE,6BAA6B,EAAE,MAAM,kBAAkB,CAAC;AAEjE,MAAM,WAAW,2BAA2B;IACxC,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,6BAA6B,CAAC;IACvC,QAAQ,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,sBAAsB,GAAG,EAAE,CAAC,2BAA2B,CAAC,CAAC;AAErE,MAAM,WAAW,gBAAgB;IAC7B,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,yBAAyB;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,wBAAwB;IACrC,OAAO,EAAE,eAAe,CAAC;CAC5B;AAED,MAAM,MAAM,oBAAoB,GAAG;IAC/B,cAAc;IACd,EAAE,EAAE,MAAM,CAAC;IACX,gBAAgB;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC;IACrD,yCAAyC;IACzC,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACnC,uCAAuC;IACvC,UAAU,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACzC,kFAAkF;IAClF,GAAG,CAAC,EAAE,cAAc,CAAC;IACrB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,mCAAmC;IACnC,KAAK,CAAC,EAAE,yBAAyB,CAAC;IAClC,uDAAuD;IACvD,IAAI,CAAC,EAAE,wBAAwB,CAAC;CACnC,GAAG,IAAI,CAAC,wBAAwB,CAAC,GAAG,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,CAAC;AAE9D,MAAM,MAAM,uBAAuB,GAAG;IAClC,cAAc;IACd,EAAE,EAAE,MAAM,CAAC;IACX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACnC,uCAAuC;IACvC,UAAU,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACzC,kFAAkF;IAClF,GAAG,CAAC,EAAE,cAAc,CAAC;IACrB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,mCAAmC;IACnC,KAAK,CAAC,EAAE,yBAAyB,CAAC;IAClC,kDAAkD;IAClD,IAAI,CAAC,EAAE,wBAAwB,CAAC;CACnC,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/titan-layout/interface.ts"],"sourcesContent":["import { FC,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/titan-layout/interface.ts"],"sourcesContent":["import { IconProps } from '@servicetitan/anvil2';\nimport { ComponentPropsWithoutRef, FC, ReactNode } from 'react';\nimport { CounterTagData, CounterTagValue } from '../../utils/counter-tag';\nimport { TitanLayoutSidebarContextType } from './layout-context';\n\nexport interface TitanLayoutLinkWrapperProps {\n children: ReactNode;\n context: TitanLayoutSidebarContextType;\n isMobile: boolean;\n}\n\nexport type TitanLayoutLinkWrapper = FC<TitanLayoutLinkWrapperProps>;\n\nexport interface TitanLayoutState {\n navCollapsed: boolean;\n submenuExpanded?: string;\n}\n\nexport interface TitanLayoutLinkExtraProps {\n showTitle?: boolean;\n flashing?: boolean;\n}\n\nexport interface TitanLayoutLinkSideProps {\n counter: CounterTagValue;\n}\n\nexport type TitanLayoutLinkProps = {\n /** link id */\n id: string;\n /** link href */\n to: string;\n /** link title */\n title: string;\n /** callback to return active state. By default, it compares link href with current pathname */\n isActive?: boolean | ((pathname: string) => boolean);\n /** svg icon (anvil2) of inactive item */\n icon: IconProps['svg'] | undefined;\n /** svg icon (anvil2) of active item */\n iconActive: IconProps['svg'] | undefined;\n /** item tag (optional). shown if it is set and value is true or greater than 0 */\n tag?: CounterTagData;\n counter?: CounterTagValue;\n /** class name of link item */\n className?: string;\n\n /** tooltip text (for extra links) */\n tooltip?: string;\n /** wrapper component for link element (used for side links) */\n wrapper?: TitanLayoutLinkWrapper;\n /** props for extra link element */\n extra?: TitanLayoutLinkExtraProps;\n /** props for side nav link element (mobile version) */\n side?: TitanLayoutLinkSideProps;\n} & Omit<ComponentPropsWithoutRef<'a'>, 'children' | 'title'>;\n\nexport type TitanLayoutTriggerProps = {\n /** link id */\n id: string;\n /** link title */\n title: string;\n /** active state */\n isActive?: boolean;\n /** svg icon (anvil2) of inactive item */\n icon: IconProps['svg'] | undefined;\n /** svg icon (anvil2) of active item */\n iconActive: IconProps['svg'] | undefined;\n /** item tag (optional). shown if it is set and value is true or greater than 0 */\n tag?: CounterTagData;\n counter?: CounterTagValue;\n /** class name of link item */\n className?: string;\n\n /** tooltip text (for extra links) */\n tooltip?: string;\n /** wrapper component for link element (used for side links) */\n wrapper?: TitanLayoutLinkWrapper;\n /** props for extra link element */\n extra?: TitanLayoutLinkExtraProps;\n /** props for nav link element (mobile version) */\n side?: TitanLayoutLinkSideProps;\n} & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'title'>;\n"],"names":[],"mappings":"AAwDA,WAyBgE"}
|