@servicetitan/navigation 13.0.0-canary.256.b93dc10.0 → 13.0.1
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/titan-layout/interface.d.ts +5 -0
- 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.module.less +18 -0
- package/dist/components/titan-layout/layout-profile.d.ts.map +1 -1
- package/dist/components/titan-layout/layout-profile.js +2 -3
- package/dist/components/titan-layout/layout-profile.js.map +1 -1
- package/dist/components/titan-layout/layout-sidebar-links-internal.d.ts +1 -1
- package/dist/components/titan-layout/layout-sidebar-links-internal.d.ts.map +1 -1
- package/dist/components/titan-layout/layout-sidebar-links-internal.js +36 -27
- package/dist/components/titan-layout/layout-sidebar-links-internal.js.map +1 -1
- package/dist/components/titan-layout/layout-sidebar.d.ts +1 -1
- package/dist/components/titan-layout/layout-sidebar.d.ts.map +1 -1
- package/dist/components/titan-layout/layout-sidebar.js +3 -14
- package/dist/components/titan-layout/layout-sidebar.js.map +1 -1
- package/dist/components/titan-layout/layout-sidebar.module.less +18 -29
- package/dist/components/titan-layout/titan-layout-default.stories.d.ts +1 -0
- package/dist/components/titan-layout/titan-layout-default.stories.d.ts.map +1 -1
- package/dist/components/titan-layout/titan-layout.d.ts +25 -0
- package/dist/components/titan-layout/titan-layout.d.ts.map +1 -1
- package/dist/components/titan-layout/titan-layout.js +2 -2
- package/dist/components/titan-layout/titan-layout.js.map +1 -1
- package/dist/utils/navigation.d.ts +1 -2
- 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/titan-layout/interface.ts +5 -0
- package/src/components/titan-layout/layout-header.module.less +18 -0
- package/src/components/titan-layout/layout-profile.tsx +3 -4
- package/src/components/titan-layout/layout-sidebar-links-internal.tsx +43 -33
- package/src/components/titan-layout/layout-sidebar.module.less +18 -29
- package/src/components/titan-layout/layout-sidebar.tsx +5 -24
- package/src/components/titan-layout/titan-layout-default.stories.tsx +17 -1
- package/src/components/titan-layout/titan-layout.tsx +34 -2
- package/src/utils/navigation.ts +1 -3
|
@@ -9,14 +9,19 @@ export interface TitanLayoutLinkWrapperProps {
|
|
|
9
9
|
}
|
|
10
10
|
export type TitanLayoutLinkWrapper = FC<TitanLayoutLinkWrapperProps>;
|
|
11
11
|
export interface TitanLayoutState {
|
|
12
|
+
/** flags if side nav is collapsed */
|
|
12
13
|
navCollapsed: boolean;
|
|
14
|
+
/** ;ost expanded submenu ids */
|
|
13
15
|
submenusExpanded?: string[];
|
|
14
16
|
}
|
|
15
17
|
export interface TitanLayoutLinkExtraProps {
|
|
18
|
+
/** link's title should be shown (for extra links we show icon only by default) */
|
|
16
19
|
showTitle?: boolean;
|
|
20
|
+
/** link is flashing */
|
|
17
21
|
flashing?: boolean;
|
|
18
22
|
}
|
|
19
23
|
export interface TitanLayoutLinkSideProps {
|
|
24
|
+
/** counter value used only for side links */
|
|
20
25
|
counter: CounterTagValue;
|
|
21
26
|
}
|
|
22
27
|
export type TitanLayoutLinkProps = {
|
|
@@ -1 +1 @@
|
|
|
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,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC/B;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
|
+
{"version":3,"file":"interface.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/interface.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
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 submenusExpanded?: 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":"
|
|
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 /** flags if side nav is collapsed */\n navCollapsed: boolean;\n /** ;ost expanded submenu ids */\n submenusExpanded?: string[];\n}\n\nexport interface TitanLayoutLinkExtraProps {\n /** link's title should be shown (for extra links we show icon only by default) */\n showTitle?: boolean;\n /** link is flashing */\n flashing?: boolean;\n}\n\nexport interface TitanLayoutLinkSideProps {\n /** counter value used only for side links */\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":"AA6DA,WAyBgE"}
|
|
@@ -113,6 +113,24 @@
|
|
|
113
113
|
margin-right: @spacing-2;
|
|
114
114
|
max-width: 400px;
|
|
115
115
|
}
|
|
116
|
+
|
|
117
|
+
.burger {
|
|
118
|
+
width: 64px;
|
|
119
|
+
display: flex;
|
|
120
|
+
flex-direction: row;
|
|
121
|
+
justify-content: center;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.header-light.header-desktop {
|
|
126
|
+
.he-top-left {
|
|
127
|
+
.logo-company-wrapper {
|
|
128
|
+
padding-left: @spacing-0 !important;
|
|
129
|
+
}
|
|
130
|
+
.logo-short-wrapper {
|
|
131
|
+
padding-left: @spacing-half !important;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
116
134
|
}
|
|
117
135
|
|
|
118
136
|
// desktop stacked header
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout-profile.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-profile.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"layout-profile.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-profile.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAC;AAGhD,OAAO,EACH,wBAAwB,EACxB,oBAAoB,EACpB,2BAA2B,EAC9B,MAAM,+BAA+B,CAAC;AAYvC,YAAY,EACR,oBAAoB,EACpB,2BAA2B,EAC3B,wBAAwB,GAC3B,MAAM,+BAA+B,CAAC;AAcvC,iBAAS,wBAAwB,CAAC,KAAK,EAAE,oBAAoB,2CAO5D;AAqED,iBAAS,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,2CAOjE;AA6BD,iBAAS,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,2CAO3D;AAmCD,eAAO,MAAM,eAAe;;;;CAI1B,CAAC"}
|
|
@@ -26,8 +26,7 @@ const MobileProfileDropdown = ({ direction, trigger, hintPopup, portal, width, o
|
|
|
26
26
|
const [expanded, setExpanded] = useState(false);
|
|
27
27
|
const { hasNotifications, NotificationsContextProvider } = useNotificationsState();
|
|
28
28
|
const { onNotificationsUpdate } = useNotificationsContext();
|
|
29
|
-
const onExpandToggle = (
|
|
30
|
-
e.stopPropagation();
|
|
29
|
+
const onExpandToggle = ()=>{
|
|
31
30
|
setExpanded(!expanded);
|
|
32
31
|
};
|
|
33
32
|
useEffect(()=>{
|
|
@@ -47,7 +46,7 @@ const MobileProfileDropdown = ({ direction, trigger, hintPopup, portal, width, o
|
|
|
47
46
|
className: className,
|
|
48
47
|
...rest,
|
|
49
48
|
submenuExpanded: expanded,
|
|
50
|
-
|
|
49
|
+
onSubmenuExpand: onExpandToggle,
|
|
51
50
|
onClick: onExpandToggle,
|
|
52
51
|
tag: {
|
|
53
52
|
value: hasNotifications
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/titan-layout/layout-profile.tsx"],"sourcesContent":["import SvgAccountActive from '@servicetitan/anvil2/assets/icons/st/gnav_account_active.svg';\nimport SvgAccountInactive from '@servicetitan/anvil2/assets/icons/st/gnav_account_inactive.svg';\n\nimport { FC, MouseEvent, useEffect, useState } from 'react';\nimport { NavLinkComponentProps } from '../../utils/navigation-context';\nimport { getCounterTag } from '../../utils/side-nav';\nimport {\n ProfileDropdownLinkProps,\n ProfileDropdownProps,\n ProfileDropdownSectionProps,\n} from '../profile-dropdown/interface';\nimport { DesktopProfileDropdown } from '../profile-dropdown/profile-dropdown';\nimport { NavigationComponentProps } from './interface-internal';\nimport { useTitanLayoutContext } from './layout-context';\nimport {\n InternalSideNavigationGroup,\n InternalSideNavigationGroupDivider,\n InternalSideNavigationGroupLink,\n InternalSideNavigationGroupTrigger,\n} from './layout-sidebar-links-internal';\nimport { useNotificationsContext, useNotificationsState } from './notifications-context';\n\nexport type {\n ProfileDropdownProps,\n ProfileDropdownSectionProps,\n ProfileDropdownLinkProps,\n} from '../profile-dropdown/interface';\n\nconst ExternalNavComponent: FC<NavLinkComponentProps> = ({\n children,\n isActive,\n to,\n activeClassName,\n ...props\n}) => (\n <a {...props} href={to}>\n {children}\n </a>\n);\n\nfunction ProfileDropdownComponent(props: ProfileDropdownProps) {\n const { breakpoint, NavigationComponent } = useTitanLayoutContext();\n return breakpoint.isMobile ? (\n <MobileProfileDropdown {...props} navigationComponent={NavigationComponent} />\n ) : (\n <DesktopProfileDropdown {...props} />\n );\n}\nconst profileId = '--profile';\n\nconst MobileProfileDropdown: FC<ProfileDropdownProps & NavigationComponentProps> = ({\n direction,\n trigger,\n hintPopup,\n portal,\n width,\n onClose,\n onOpen,\n className,\n children,\n ...rest\n}) => {\n const [expanded, setExpanded] = useState(false);\n const { hasNotifications, NotificationsContextProvider } = useNotificationsState();\n const { onNotificationsUpdate } = useNotificationsContext();\n const onExpandToggle = (e: MouseEvent<never>) => {\n e.stopPropagation();\n setExpanded(!expanded);\n };\n\n useEffect(() => {\n onNotificationsUpdate(profileId, hasNotifications);\n }, [hasNotifications, onNotificationsUpdate]);\n\n return (\n <NotificationsContextProvider>\n <InternalSideNavigationGroup\n id={profileId}\n to={undefined}\n title=\"Profile\"\n icon={SvgAccountInactive}\n iconActive={SvgAccountActive}\n isActive={expanded}\n className={className}\n {...rest}\n submenuExpanded={expanded}\n onExpandToggle={onExpandToggle}\n onClick={onExpandToggle}\n tag={{ value: hasNotifications }}\n >\n {children}\n </InternalSideNavigationGroup>\n </NotificationsContextProvider>\n );\n};\n\nconst ProfileDropdownDivider: FC = () => {\n const { breakpoint } = useTitanLayoutContext();\n return breakpoint.isMobile ? (\n <InternalSideNavigationGroupDivider />\n ) : (\n <DesktopProfileDropdown.Divider />\n );\n};\n\nconst getText = (children: any, text: any): string | undefined => {\n if (typeof children === 'string') {\n return children;\n }\n\n if (typeof text === 'string') {\n return text;\n }\n\n return undefined;\n};\n\nfunction ProfileDropdownSection(props: ProfileDropdownSectionProps) {\n const { breakpoint } = useTitanLayoutContext();\n return breakpoint.isMobile ? (\n <MobileProfileDropdownSection {...props} />\n ) : (\n <DesktopProfileDropdown.Section {...props} />\n );\n}\nconst MobileProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({\n id,\n tooltip,\n tag,\n counter,\n\n className,\n children,\n text,\n ...rest\n}) => {\n const sectionText = getText(children, text);\n const { onNotificationsUpdate } = useNotificationsContext();\n const tagData = getCounterTag(counter, tag);\n onNotificationsUpdate(id, !!tagData);\n\n return sectionText ? (\n <InternalSideNavigationGroupTrigger\n {...rest}\n id={id}\n title={sectionText}\n isActive={undefined}\n tag={tagData}\n className={className}\n />\n ) : null;\n};\n\nfunction ProfileDropdownLink(props: ProfileDropdownLinkProps) {\n const { breakpoint, NavigationComponent } = useTitanLayoutContext();\n return breakpoint.isMobile ? (\n <MobileProfileDropdownLink {...props} navigationComponent={NavigationComponent} />\n ) : (\n <DesktopProfileDropdown.Link {...props} />\n );\n}\nconst MobileProfileDropdownLink: FC<ProfileDropdownLinkProps & NavigationComponentProps> = ({\n id,\n external,\n to,\n tooltip,\n text,\n children,\n className,\n navigationComponent,\n tag,\n counter,\n ...rest\n}) => {\n const { onNotificationsUpdate } = useNotificationsContext();\n const linkText = getText(children, text);\n const isExternalLink = external ?? to?.startsWith('http');\n const tagData = getCounterTag(counter, tag);\n onNotificationsUpdate(id, !!tagData);\n\n return linkText ? (\n <InternalSideNavigationGroupLink\n {...rest}\n id={id}\n to={to}\n title={linkText}\n isActive={undefined}\n className={className}\n tag={tagData}\n parentId={profileId}\n navigationComponent={isExternalLink ? ExternalNavComponent : navigationComponent}\n />\n ) : null;\n};\n\nexport const ProfileDropdown = Object.assign(ProfileDropdownComponent, {\n Divider: ProfileDropdownDivider,\n Link: ProfileDropdownLink,\n Section: ProfileDropdownSection,\n});\n"],"names":["SvgAccountActive","SvgAccountInactive","useEffect","useState","getCounterTag","DesktopProfileDropdown","useTitanLayoutContext","InternalSideNavigationGroup","InternalSideNavigationGroupDivider","InternalSideNavigationGroupLink","InternalSideNavigationGroupTrigger","useNotificationsContext","useNotificationsState","ExternalNavComponent","children","isActive","to","activeClassName","props","a","href","ProfileDropdownComponent","breakpoint","NavigationComponent","isMobile","MobileProfileDropdown","navigationComponent","profileId","direction","trigger","hintPopup","portal","width","onClose","onOpen","className","rest","expanded","setExpanded","hasNotifications","NotificationsContextProvider","onNotificationsUpdate","onExpandToggle","e","stopPropagation","id","undefined","title","icon","iconActive","submenuExpanded","onClick","tag","value","ProfileDropdownDivider","Divider","getText","text","ProfileDropdownSection","MobileProfileDropdownSection","Section","tooltip","counter","sectionText","tagData","ProfileDropdownLink","MobileProfileDropdownLink","Link","external","linkText","isExternalLink","startsWith","parentId","ProfileDropdown","Object","assign"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/titan-layout/layout-profile.tsx"],"sourcesContent":["import SvgAccountActive from '@servicetitan/anvil2/assets/icons/st/gnav_account_active.svg';\nimport SvgAccountInactive from '@servicetitan/anvil2/assets/icons/st/gnav_account_inactive.svg';\n\nimport { FC, useEffect, useState } from 'react';\nimport { NavLinkComponentProps } from '../../utils/navigation-context';\nimport { getCounterTag } from '../../utils/side-nav';\nimport {\n ProfileDropdownLinkProps,\n ProfileDropdownProps,\n ProfileDropdownSectionProps,\n} from '../profile-dropdown/interface';\nimport { DesktopProfileDropdown } from '../profile-dropdown/profile-dropdown';\nimport { NavigationComponentProps } from './interface-internal';\nimport { useTitanLayoutContext } from './layout-context';\nimport {\n InternalSideNavigationGroup,\n InternalSideNavigationGroupDivider,\n InternalSideNavigationGroupLink,\n InternalSideNavigationGroupTrigger,\n} from './layout-sidebar-links-internal';\nimport { useNotificationsContext, useNotificationsState } from './notifications-context';\n\nexport type {\n ProfileDropdownProps,\n ProfileDropdownSectionProps,\n ProfileDropdownLinkProps,\n} from '../profile-dropdown/interface';\n\nconst ExternalNavComponent: FC<NavLinkComponentProps> = ({\n children,\n isActive,\n to,\n activeClassName,\n ...props\n}) => (\n <a {...props} href={to}>\n {children}\n </a>\n);\n\nfunction ProfileDropdownComponent(props: ProfileDropdownProps) {\n const { breakpoint, NavigationComponent } = useTitanLayoutContext();\n return breakpoint.isMobile ? (\n <MobileProfileDropdown {...props} navigationComponent={NavigationComponent} />\n ) : (\n <DesktopProfileDropdown {...props} />\n );\n}\nconst profileId = '--profile';\n\nconst MobileProfileDropdown: FC<ProfileDropdownProps & NavigationComponentProps> = ({\n direction,\n trigger,\n hintPopup,\n portal,\n width,\n onClose,\n onOpen,\n className,\n children,\n ...rest\n}) => {\n const [expanded, setExpanded] = useState(false);\n const { hasNotifications, NotificationsContextProvider } = useNotificationsState();\n const { onNotificationsUpdate } = useNotificationsContext();\n const onExpandToggle = () => {\n setExpanded(!expanded);\n };\n\n useEffect(() => {\n onNotificationsUpdate(profileId, hasNotifications);\n }, [hasNotifications, onNotificationsUpdate]);\n\n return (\n <NotificationsContextProvider>\n <InternalSideNavigationGroup\n id={profileId}\n to={undefined}\n title=\"Profile\"\n icon={SvgAccountInactive}\n iconActive={SvgAccountActive}\n isActive={expanded}\n className={className}\n {...rest}\n submenuExpanded={expanded}\n onSubmenuExpand={onExpandToggle}\n onClick={onExpandToggle}\n tag={{ value: hasNotifications }}\n >\n {children}\n </InternalSideNavigationGroup>\n </NotificationsContextProvider>\n );\n};\n\nconst ProfileDropdownDivider: FC = () => {\n const { breakpoint } = useTitanLayoutContext();\n return breakpoint.isMobile ? (\n <InternalSideNavigationGroupDivider />\n ) : (\n <DesktopProfileDropdown.Divider />\n );\n};\n\nconst getText = (children: any, text: any): string | undefined => {\n if (typeof children === 'string') {\n return children;\n }\n\n if (typeof text === 'string') {\n return text;\n }\n\n return undefined;\n};\n\nfunction ProfileDropdownSection(props: ProfileDropdownSectionProps) {\n const { breakpoint } = useTitanLayoutContext();\n return breakpoint.isMobile ? (\n <MobileProfileDropdownSection {...props} />\n ) : (\n <DesktopProfileDropdown.Section {...props} />\n );\n}\nconst MobileProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({\n id,\n tooltip,\n tag,\n counter,\n\n className,\n children,\n text,\n ...rest\n}) => {\n const sectionText = getText(children, text);\n const { onNotificationsUpdate } = useNotificationsContext();\n const tagData = getCounterTag(counter, tag);\n onNotificationsUpdate(id, !!tagData);\n\n return sectionText ? (\n <InternalSideNavigationGroupTrigger\n {...rest}\n id={id}\n title={sectionText}\n isActive={undefined}\n tag={tagData}\n className={className}\n />\n ) : null;\n};\n\nfunction ProfileDropdownLink(props: ProfileDropdownLinkProps) {\n const { breakpoint, NavigationComponent } = useTitanLayoutContext();\n return breakpoint.isMobile ? (\n <MobileProfileDropdownLink {...props} navigationComponent={NavigationComponent} />\n ) : (\n <DesktopProfileDropdown.Link {...props} />\n );\n}\nconst MobileProfileDropdownLink: FC<ProfileDropdownLinkProps & NavigationComponentProps> = ({\n id,\n external,\n to,\n tooltip,\n text,\n children,\n className,\n navigationComponent,\n tag,\n counter,\n ...rest\n}) => {\n const { onNotificationsUpdate } = useNotificationsContext();\n const linkText = getText(children, text);\n const isExternalLink = external ?? to?.startsWith('http');\n const tagData = getCounterTag(counter, tag);\n onNotificationsUpdate(id, !!tagData);\n\n return linkText ? (\n <InternalSideNavigationGroupLink\n {...rest}\n id={id}\n to={to}\n title={linkText}\n isActive={undefined}\n className={className}\n tag={tagData}\n parentId={profileId}\n navigationComponent={isExternalLink ? ExternalNavComponent : navigationComponent}\n />\n ) : null;\n};\n\nexport const ProfileDropdown = Object.assign(ProfileDropdownComponent, {\n Divider: ProfileDropdownDivider,\n Link: ProfileDropdownLink,\n Section: ProfileDropdownSection,\n});\n"],"names":["SvgAccountActive","SvgAccountInactive","useEffect","useState","getCounterTag","DesktopProfileDropdown","useTitanLayoutContext","InternalSideNavigationGroup","InternalSideNavigationGroupDivider","InternalSideNavigationGroupLink","InternalSideNavigationGroupTrigger","useNotificationsContext","useNotificationsState","ExternalNavComponent","children","isActive","to","activeClassName","props","a","href","ProfileDropdownComponent","breakpoint","NavigationComponent","isMobile","MobileProfileDropdown","navigationComponent","profileId","direction","trigger","hintPopup","portal","width","onClose","onOpen","className","rest","expanded","setExpanded","hasNotifications","NotificationsContextProvider","onNotificationsUpdate","onExpandToggle","id","undefined","title","icon","iconActive","submenuExpanded","onSubmenuExpand","onClick","tag","value","ProfileDropdownDivider","Divider","getText","text","ProfileDropdownSection","MobileProfileDropdownSection","Section","tooltip","counter","sectionText","tagData","ProfileDropdownLink","MobileProfileDropdownLink","Link","external","linkText","isExternalLink","startsWith","parentId","ProfileDropdown","Object","assign"],"mappings":"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"}
|
|
@@ -60,6 +60,6 @@ export declare const InternalSideNavigationGroup: FC<NavigationComponentProps &
|
|
|
60
60
|
children: ReactNode;
|
|
61
61
|
submenuExpanded: boolean;
|
|
62
62
|
onClick?: (e: MouseEvent<never>) => void;
|
|
63
|
-
|
|
63
|
+
onSubmenuExpand(id: string, expanded: boolean, force: boolean): void;
|
|
64
64
|
}>;
|
|
65
65
|
//# sourceMappingURL=layout-sidebar-links-internal.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout-sidebar-links-internal.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar-links-internal.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"layout-sidebar-links-internal.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar-links-internal.tsx"],"names":[],"mappings":"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"}
|
|
@@ -126,41 +126,50 @@ export const InternalSideNavigationGroupDivider = ()=>{
|
|
|
126
126
|
className: Styles.divider
|
|
127
127
|
});
|
|
128
128
|
};
|
|
129
|
-
export const InternalSideNavigationGroup = ({ id, to, title, isActive, icon, iconActive, className, tag, children, submenuExpanded,
|
|
130
|
-
const
|
|
131
|
-
if (
|
|
132
|
-
|
|
129
|
+
export const InternalSideNavigationGroup = ({ id, to, title, isActive, icon, iconActive, className, tag, children, submenuExpanded, onSubmenuExpand, onClick, navigationComponent, ...rest })=>{
|
|
130
|
+
const onRootClick = (e)=>{
|
|
131
|
+
if (submenuExpanded) {
|
|
132
|
+
onSubmenuExpand(id, true, true);
|
|
133
|
+
} else {
|
|
134
|
+
onSubmenuExpand(id, true, false);
|
|
133
135
|
e.preventDefault();
|
|
134
136
|
e.stopPropagation();
|
|
135
137
|
}
|
|
136
138
|
};
|
|
139
|
+
const onToggleClick = (e)=>{
|
|
140
|
+
onSubmenuExpand(id, !submenuExpanded, false);
|
|
141
|
+
e.preventDefault();
|
|
142
|
+
e.stopPropagation();
|
|
143
|
+
};
|
|
137
144
|
return /*#__PURE__*/ _jsxs("div", {
|
|
138
145
|
className: classNames(Styles.navGroupWrapper),
|
|
139
146
|
children: [
|
|
140
147
|
/*#__PURE__*/ _jsxs("div", {
|
|
141
148
|
className: Styles.navGroupItem,
|
|
142
|
-
onClickCapture: onRootClickCapture,
|
|
143
149
|
children: [
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
150
|
+
/*#__PURE__*/ _jsx("div", {
|
|
151
|
+
onClick: onRootClick,
|
|
152
|
+
children: to ? /*#__PURE__*/ _jsx(InternalSideNavigationLink, {
|
|
153
|
+
id: id,
|
|
154
|
+
to: to,
|
|
155
|
+
title: title,
|
|
156
|
+
isActive: isActive,
|
|
157
|
+
icon: icon,
|
|
158
|
+
iconActive: iconActive,
|
|
159
|
+
tag: tag,
|
|
160
|
+
className: className,
|
|
161
|
+
...rest,
|
|
162
|
+
navigationComponent: navigationComponent
|
|
163
|
+
}) : /*#__PURE__*/ _jsx(InternalSideNavigationTrigger, {
|
|
164
|
+
id: id,
|
|
165
|
+
title: title,
|
|
166
|
+
isActive: isActive === true || undefined,
|
|
167
|
+
icon: icon,
|
|
168
|
+
iconActive: iconActive,
|
|
169
|
+
tag: tag,
|
|
170
|
+
className: className,
|
|
171
|
+
...rest
|
|
172
|
+
})
|
|
164
173
|
}),
|
|
165
174
|
/*#__PURE__*/ _jsx("div", {
|
|
166
175
|
className: Styles.navItemGroupToggleWrapper,
|
|
@@ -169,10 +178,10 @@ export const InternalSideNavigationGroup = ({ id, to, title, isActive, icon, ico
|
|
|
169
178
|
size: "small",
|
|
170
179
|
icon: submenuExpanded ? SvgGroupCollapse : SvgGroupExpand,
|
|
171
180
|
className: Styles.navItemGroupToggle,
|
|
172
|
-
onClick:
|
|
181
|
+
onClick: onToggleClick,
|
|
173
182
|
"aria-label": "Toggle submenu",
|
|
174
183
|
"data-cy": "nav-item-group-expand"
|
|
175
|
-
}), 'View Submenu', {
|
|
184
|
+
}), submenuExpanded ? 'Hide Submenu' : 'View Submenu', {
|
|
176
185
|
placement: 'top-end'
|
|
177
186
|
})
|
|
178
187
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/titan-layout/layout-sidebar-links-internal.tsx"],"sourcesContent":["import { Button, Icon, IconProps } from '@servicetitan/anvil2';\nimport SvgGroupCollapse from '@servicetitan/anvil2/assets/icons/material/round/expand_less.svg';\nimport SvgGroupExpand from '@servicetitan/anvil2/assets/icons/material/round/expand_more.svg';\nimport classNames from 'classnames';\nimport { ComponentPropsWithoutRef, FC, Fragment, MouseEvent, ReactNode } from 'react';\n\nimport { BadgeTag, BadgeTagProps } from '../badge-tag';\nimport { NavigationComponentProps } from './interface-internal';\nimport * as Styles from './layout-sidebar.module.less';\nimport { withTooltip } from './with-tooltip';\n\nexport interface InternalSideNavigationItemContentProps {\n icon: IconProps['svg'] | undefined;\n iconActive: IconProps['svg'] | undefined;\n title: string;\n tag: BadgeTagProps | undefined;\n}\n\nconst InternalSideNavigationItemContent: FC<InternalSideNavigationItemContentProps> = ({\n icon,\n iconActive,\n tag,\n title,\n}) => (\n <Fragment>\n <div className={Styles.navItemIconWrapper}>\n {icon && (\n <Icon svg={icon} className={classNames(Styles.navIcon, Styles.navIconInactive)} />\n )}\n {iconActive && (\n <Icon\n svg={iconActive}\n className={classNames(Styles.navIcon, Styles.navIconActive)}\n />\n )}\n\n <div className={Styles.navItemTextExpanded} data-cy=\"nav-item-label\">\n {title}\n </div>\n {!!tag && (\n <BadgeTag\n data={tag}\n className={Styles.navItemCounter}\n longClassName={Styles.navItemCounterLong}\n />\n )}\n </div>\n\n <div\n className={classNames(Styles.navItemTextCollapsed, {\n [Styles.navItemTextSmall]: !!title && title.length >= 10,\n })}\n data-cy=\"nav-item-label\"\n >\n {title}\n </div>\n </Fragment>\n);\n\n/** Side Navigation menu item (for internal usage) */\nexport const InternalSideNavigationLink: FC<\n NavigationComponentProps & {\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 className: string | undefined;\n tag: BadgeTagProps | undefined;\n } & Omit<ComponentPropsWithoutRef<'a'>, 'children' | 'title'>\n> = ({\n id,\n to,\n title,\n isActive,\n icon,\n iconActive,\n className,\n tag,\n\n navigationComponent: NavigationComponent,\n ...rest\n}) => {\n return (\n <NavigationComponent\n data-cy={`navigation-item-${id}`}\n data-pendo={`navigation-item-${id}`}\n {...rest}\n className={classNames(Styles.navItem, Styles.navLink, className, {\n [Styles.navItemActive]: isActive === true,\n [Styles.navItemIconSwitch]: !!icon && !!iconActive,\n })}\n to={to}\n isActive={typeof isActive === 'function' ? isActive : undefined}\n activeClassName={Styles.navItemActive}\n >\n <InternalSideNavigationItemContent\n icon={icon}\n iconActive={iconActive}\n title={title}\n tag={tag}\n />\n </NavigationComponent>\n );\n};\n\n/** Side Navigation menu trigger (for internal usage) */\nexport const InternalSideNavigationTrigger: FC<\n {\n id: string;\n title: string;\n isActive: boolean | undefined;\n icon: IconProps['svg'] | undefined;\n iconActive: IconProps['svg'] | undefined;\n className: string | undefined;\n\n tag: BadgeTagProps | undefined;\n onClick?: (e: MouseEvent<never>) => void;\n } & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'title'>\n> = ({\n id,\n title,\n isActive,\n icon,\n iconActive,\n className,\n\n tag,\n ...rest\n}) => {\n return (\n <div\n data-cy={`navigation-item-${id}`}\n data-pendo={`navigation-item-${id}`}\n {...rest}\n className={classNames(Styles.navItem, className, {\n [Styles.navLink]: !!rest.onClick,\n [Styles.navItemActive]: isActive === true,\n [Styles.navItemIconSwitch]: !!icon && !!iconActive,\n })}\n >\n <InternalSideNavigationItemContent\n icon={icon}\n iconActive={iconActive}\n title={title}\n tag={tag}\n />\n </div>\n );\n};\n\nexport const InternalSideNavigationGroupLink: FC<\n NavigationComponentProps & {\n id: string;\n to: string;\n title: string;\n isActive: boolean | ((pathname: string) => boolean) | undefined;\n className: string | undefined;\n tag: BadgeTagProps | undefined;\n\n parentId: string;\n }\n> = ({\n id,\n to,\n title,\n isActive,\n className,\n tag,\n\n parentId,\n navigationComponent: NavigationComponent,\n ...rest\n}) => {\n return (\n <NavigationComponent\n key={id}\n data-cy={`navigation-item-${parentId}--${id}`}\n data-pendo={`navigation-item-${parentId}--${id}`}\n {...rest}\n to={to}\n className={classNames(Styles.submenuItem, Styles.submenuLink, className, {\n [Styles.submenuLinkActive]: isActive === true,\n })}\n isActive={typeof isActive === 'function' ? isActive : undefined}\n activeClassName={Styles.submenuLinkActive}\n >\n <span>{title}</span>\n <BadgeTag data={tag} className={Styles.submenuLinkCounter} />\n </NavigationComponent>\n );\n};\n\nexport const InternalSideNavigationGroupTrigger: FC<{\n id: string;\n title: string;\n isActive: boolean | ((pathname: string) => boolean) | undefined;\n className: string | undefined;\n tag: BadgeTagProps | undefined;\n\n onClick?: (e: MouseEvent<any>) => void;\n}> = ({\n id,\n title,\n isActive,\n className,\n tag,\n\n ...rest\n}) => {\n return (\n <div\n data-cy={`navigation-item-${id}`}\n data-pendo={`navigation-item-${id}`}\n key={id}\n {...rest}\n className={classNames(Styles.submenuItem, {\n [Styles.submenuLink]: !!rest.onClick,\n [Styles.submenuLinkActive]: isActive === true,\n })}\n >\n <span>{title}</span>\n <BadgeTag data={tag} className={Styles.submenuLinkCounter} />\n </div>\n );\n};\n\nexport const InternalSideNavigationGroupDivider = () => {\n return <div className={Styles.divider} />;\n};\n\nexport const InternalSideNavigationGroup: FC<\n NavigationComponentProps & {\n id: string;\n to: string | undefined;\n title: string;\n isActive: boolean | ((pathname: string) => boolean) | undefined;\n icon: IconProps['svg'] | undefined;\n iconActive: IconProps['svg'] | undefined;\n className: string | undefined;\n tag: BadgeTagProps | undefined;\n\n children: ReactNode;\n submenuExpanded: boolean;\n onClick?: (e: MouseEvent<never>) => void;\n onExpandToggle(e: MouseEvent<never>): void;\n }\n> = ({\n id,\n to,\n title,\n isActive,\n icon,\n iconActive,\n className,\n tag,\n\n children,\n submenuExpanded,\n onExpandToggle,\n onClick,\n navigationComponent,\n ...rest\n}) => {\n const onRootClickCapture = (e: MouseEvent<never>) => {\n if (!submenuExpanded) {\n onExpandToggle?.(e);\n e.preventDefault();\n e.stopPropagation();\n }\n };\n return (\n <div className={classNames(Styles.navGroupWrapper)}>\n <div className={Styles.navGroupItem} onClickCapture={onRootClickCapture}>\n {to ? (\n <InternalSideNavigationLink\n id={id}\n to={to}\n title={title}\n isActive={isActive}\n icon={icon}\n iconActive={iconActive}\n tag={tag}\n className={className}\n {...rest}\n navigationComponent={navigationComponent}\n />\n ) : (\n <InternalSideNavigationTrigger\n id={id}\n title={title}\n isActive={isActive === true || undefined}\n icon={icon}\n iconActive={iconActive}\n tag={tag}\n className={className}\n {...rest}\n />\n )}\n\n <div className={Styles.navItemGroupToggleWrapper}>\n {withTooltip(\n <Button\n appearance=\"secondary\"\n size=\"small\"\n icon={submenuExpanded ? SvgGroupCollapse : SvgGroupExpand}\n className={Styles.navItemGroupToggle}\n onClick={onExpandToggle}\n aria-label=\"Toggle submenu\"\n data-cy=\"nav-item-group-expand\"\n />,\n 'View Submenu',\n { placement: 'top-end' }\n )}\n </div>\n </div>\n <div\n className={classNames(Styles.submenuWrapper, {\n [Styles.submenuWrapperCollapsed]: !submenuExpanded,\n })}\n data-cy={`navigation-submenu-${id}`}\n >\n <div className={Styles.submenu}>{children}</div>\n </div>\n </div>\n );\n};\n"],"names":["Button","Icon","SvgGroupCollapse","SvgGroupExpand","classNames","Fragment","BadgeTag","Styles","withTooltip","InternalSideNavigationItemContent","icon","iconActive","tag","title","div","className","navItemIconWrapper","svg","navIcon","navIconInactive","navIconActive","navItemTextExpanded","data-cy","data","navItemCounter","longClassName","navItemCounterLong","navItemTextCollapsed","navItemTextSmall","length","InternalSideNavigationLink","id","to","isActive","navigationComponent","NavigationComponent","rest","data-pendo","navItem","navLink","navItemActive","navItemIconSwitch","undefined","activeClassName","InternalSideNavigationTrigger","onClick","InternalSideNavigationGroupLink","parentId","submenuItem","submenuLink","submenuLinkActive","span","submenuLinkCounter","InternalSideNavigationGroupTrigger","InternalSideNavigationGroupDivider","divider","InternalSideNavigationGroup","children","submenuExpanded","onExpandToggle","onRootClickCapture","e","preventDefault","stopPropagation","navGroupWrapper","navGroupItem","onClickCapture","navItemGroupToggleWrapper","appearance","size","navItemGroupToggle","aria-label","placement","submenuWrapper","submenuWrapperCollapsed","submenu"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/titan-layout/layout-sidebar-links-internal.tsx"],"sourcesContent":["import { Button, Icon, IconProps } from '@servicetitan/anvil2';\nimport SvgGroupCollapse from '@servicetitan/anvil2/assets/icons/material/round/expand_less.svg';\nimport SvgGroupExpand from '@servicetitan/anvil2/assets/icons/material/round/expand_more.svg';\nimport classNames from 'classnames';\nimport { ComponentPropsWithoutRef, FC, Fragment, MouseEvent, ReactNode } from 'react';\n\nimport { BadgeTag, BadgeTagProps } from '../badge-tag';\nimport { NavigationComponentProps } from './interface-internal';\nimport * as Styles from './layout-sidebar.module.less';\nimport { withTooltip } from './with-tooltip';\n\nexport interface InternalSideNavigationItemContentProps {\n icon: IconProps['svg'] | undefined;\n iconActive: IconProps['svg'] | undefined;\n title: string;\n tag: BadgeTagProps | undefined;\n}\n\nconst InternalSideNavigationItemContent: FC<InternalSideNavigationItemContentProps> = ({\n icon,\n iconActive,\n tag,\n title,\n}) => (\n <Fragment>\n <div className={Styles.navItemIconWrapper}>\n {icon && (\n <Icon svg={icon} className={classNames(Styles.navIcon, Styles.navIconInactive)} />\n )}\n {iconActive && (\n <Icon\n svg={iconActive}\n className={classNames(Styles.navIcon, Styles.navIconActive)}\n />\n )}\n\n <div className={Styles.navItemTextExpanded} data-cy=\"nav-item-label\">\n {title}\n </div>\n {!!tag && (\n <BadgeTag\n data={tag}\n className={Styles.navItemCounter}\n longClassName={Styles.navItemCounterLong}\n />\n )}\n </div>\n\n <div\n className={classNames(Styles.navItemTextCollapsed, {\n [Styles.navItemTextSmall]: !!title && title.length >= 10,\n })}\n data-cy=\"nav-item-label\"\n >\n {title}\n </div>\n </Fragment>\n);\n\n/** Side Navigation menu item (for internal usage) */\nexport const InternalSideNavigationLink: FC<\n NavigationComponentProps & {\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 className: string | undefined;\n tag: BadgeTagProps | undefined;\n } & Omit<ComponentPropsWithoutRef<'a'>, 'children' | 'title'>\n> = ({\n id,\n to,\n title,\n isActive,\n icon,\n iconActive,\n className,\n tag,\n\n navigationComponent: NavigationComponent,\n ...rest\n}) => {\n return (\n <NavigationComponent\n data-cy={`navigation-item-${id}`}\n data-pendo={`navigation-item-${id}`}\n {...rest}\n className={classNames(Styles.navItem, Styles.navLink, className, {\n [Styles.navItemActive]: isActive === true,\n [Styles.navItemIconSwitch]: !!icon && !!iconActive,\n })}\n to={to}\n isActive={typeof isActive === 'function' ? isActive : undefined}\n activeClassName={Styles.navItemActive}\n >\n <InternalSideNavigationItemContent\n icon={icon}\n iconActive={iconActive}\n title={title}\n tag={tag}\n />\n </NavigationComponent>\n );\n};\n\n/** Side Navigation menu trigger (for internal usage) */\nexport const InternalSideNavigationTrigger: FC<\n {\n id: string;\n title: string;\n isActive: boolean | undefined;\n icon: IconProps['svg'] | undefined;\n iconActive: IconProps['svg'] | undefined;\n className: string | undefined;\n\n tag: BadgeTagProps | undefined;\n onClick?: (e: MouseEvent<never>) => void;\n } & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'title'>\n> = ({\n id,\n title,\n isActive,\n icon,\n iconActive,\n className,\n\n tag,\n ...rest\n}) => {\n return (\n <div\n data-cy={`navigation-item-${id}`}\n data-pendo={`navigation-item-${id}`}\n {...rest}\n className={classNames(Styles.navItem, className, {\n [Styles.navLink]: !!rest.onClick,\n [Styles.navItemActive]: isActive === true,\n [Styles.navItemIconSwitch]: !!icon && !!iconActive,\n })}\n >\n <InternalSideNavigationItemContent\n icon={icon}\n iconActive={iconActive}\n title={title}\n tag={tag}\n />\n </div>\n );\n};\n\nexport const InternalSideNavigationGroupLink: FC<\n NavigationComponentProps & {\n id: string;\n to: string;\n title: string;\n isActive: boolean | ((pathname: string) => boolean) | undefined;\n className: string | undefined;\n tag: BadgeTagProps | undefined;\n\n parentId: string;\n }\n> = ({\n id,\n to,\n title,\n isActive,\n className,\n tag,\n\n parentId,\n navigationComponent: NavigationComponent,\n ...rest\n}) => {\n return (\n <NavigationComponent\n key={id}\n data-cy={`navigation-item-${parentId}--${id}`}\n data-pendo={`navigation-item-${parentId}--${id}`}\n {...rest}\n to={to}\n className={classNames(Styles.submenuItem, Styles.submenuLink, className, {\n [Styles.submenuLinkActive]: isActive === true,\n })}\n isActive={typeof isActive === 'function' ? isActive : undefined}\n activeClassName={Styles.submenuLinkActive}\n >\n <span>{title}</span>\n <BadgeTag data={tag} className={Styles.submenuLinkCounter} />\n </NavigationComponent>\n );\n};\n\nexport const InternalSideNavigationGroupTrigger: FC<{\n id: string;\n title: string;\n isActive: boolean | ((pathname: string) => boolean) | undefined;\n className: string | undefined;\n tag: BadgeTagProps | undefined;\n\n onClick?: (e: MouseEvent<any>) => void;\n}> = ({\n id,\n title,\n isActive,\n className,\n tag,\n\n ...rest\n}) => {\n return (\n <div\n data-cy={`navigation-item-${id}`}\n data-pendo={`navigation-item-${id}`}\n key={id}\n {...rest}\n className={classNames(Styles.submenuItem, {\n [Styles.submenuLink]: !!rest.onClick,\n [Styles.submenuLinkActive]: isActive === true,\n })}\n >\n <span>{title}</span>\n <BadgeTag data={tag} className={Styles.submenuLinkCounter} />\n </div>\n );\n};\n\nexport const InternalSideNavigationGroupDivider = () => {\n return <div className={Styles.divider} />;\n};\n\nexport const InternalSideNavigationGroup: FC<\n NavigationComponentProps & {\n id: string;\n to: string | undefined;\n title: string;\n isActive: boolean | ((pathname: string) => boolean) | undefined;\n icon: IconProps['svg'] | undefined;\n iconActive: IconProps['svg'] | undefined;\n className: string | undefined;\n tag: BadgeTagProps | undefined;\n\n children: ReactNode;\n submenuExpanded: boolean;\n onClick?: (e: MouseEvent<never>) => void;\n onSubmenuExpand(id: string, expanded: boolean, force: boolean): void;\n }\n> = ({\n id,\n to,\n title,\n isActive,\n icon,\n iconActive,\n className,\n tag,\n\n children,\n submenuExpanded,\n onSubmenuExpand,\n onClick,\n navigationComponent,\n ...rest\n}) => {\n const onRootClick = (e: MouseEvent<never>) => {\n if (submenuExpanded) {\n onSubmenuExpand(id, true, true);\n } else {\n onSubmenuExpand(id, true, false);\n e.preventDefault();\n e.stopPropagation();\n }\n };\n const onToggleClick = (e: MouseEvent<never>) => {\n onSubmenuExpand(id, !submenuExpanded, false);\n e.preventDefault();\n e.stopPropagation();\n };\n\n return (\n <div className={classNames(Styles.navGroupWrapper)}>\n <div className={Styles.navGroupItem}>\n <div onClick={onRootClick}>\n {to ? (\n <InternalSideNavigationLink\n id={id}\n to={to}\n title={title}\n isActive={isActive}\n icon={icon}\n iconActive={iconActive}\n tag={tag}\n className={className}\n {...rest}\n navigationComponent={navigationComponent}\n />\n ) : (\n <InternalSideNavigationTrigger\n id={id}\n title={title}\n isActive={isActive === true || undefined}\n icon={icon}\n iconActive={iconActive}\n tag={tag}\n className={className}\n {...rest}\n />\n )}\n </div>\n\n <div className={Styles.navItemGroupToggleWrapper}>\n {withTooltip(\n <Button\n appearance=\"secondary\"\n size=\"small\"\n icon={submenuExpanded ? SvgGroupCollapse : SvgGroupExpand}\n className={Styles.navItemGroupToggle}\n onClick={onToggleClick}\n aria-label=\"Toggle submenu\"\n data-cy=\"nav-item-group-expand\"\n />,\n submenuExpanded ? 'Hide Submenu' : 'View Submenu',\n { placement: 'top-end' }\n )}\n </div>\n </div>\n <div\n className={classNames(Styles.submenuWrapper, {\n [Styles.submenuWrapperCollapsed]: !submenuExpanded,\n })}\n data-cy={`navigation-submenu-${id}`}\n >\n <div className={Styles.submenu}>{children}</div>\n </div>\n </div>\n );\n};\n"],"names":["Button","Icon","SvgGroupCollapse","SvgGroupExpand","classNames","Fragment","BadgeTag","Styles","withTooltip","InternalSideNavigationItemContent","icon","iconActive","tag","title","div","className","navItemIconWrapper","svg","navIcon","navIconInactive","navIconActive","navItemTextExpanded","data-cy","data","navItemCounter","longClassName","navItemCounterLong","navItemTextCollapsed","navItemTextSmall","length","InternalSideNavigationLink","id","to","isActive","navigationComponent","NavigationComponent","rest","data-pendo","navItem","navLink","navItemActive","navItemIconSwitch","undefined","activeClassName","InternalSideNavigationTrigger","onClick","InternalSideNavigationGroupLink","parentId","submenuItem","submenuLink","submenuLinkActive","span","submenuLinkCounter","InternalSideNavigationGroupTrigger","InternalSideNavigationGroupDivider","divider","InternalSideNavigationGroup","children","submenuExpanded","onSubmenuExpand","onRootClick","e","preventDefault","stopPropagation","onToggleClick","navGroupWrapper","navGroupItem","navItemGroupToggleWrapper","appearance","size","navItemGroupToggle","aria-label","placement","submenuWrapper","submenuWrapperCollapsed","submenu"],"mappings":"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"}
|
|
@@ -13,7 +13,7 @@ export interface LayoutSidebarProps {
|
|
|
13
13
|
navigationComponent: FC<NavLinkComponentProps>;
|
|
14
14
|
onBarExpandChange(expanded: boolean): void;
|
|
15
15
|
onDrawerOpenChange(expanded: boolean): void;
|
|
16
|
-
onSubmenuExpandChange(id: string, expanded: boolean): void;
|
|
16
|
+
onSubmenuExpandChange(id: string, expanded: boolean, force: boolean): void;
|
|
17
17
|
}
|
|
18
18
|
export declare const LayoutSidebar: FC<LayoutSidebarProps>;
|
|
19
19
|
//# sourceMappingURL=layout-sidebar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"names":[],"mappings":"AAGA,OAAO,
|
|
1
|
+
{"version":3,"file":"layout-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAY,EAAE,EAAY,YAAY,EAAkB,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAyB,MAAM,wBAAwB,CAAC;AACnF,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAWvE,MAAM,WAAW,kBAAkB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,YAAY,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACjC,WAAW,EAAE,OAAO,CAAC;IACrB,gBAAgB,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IACvC,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,mBAAmB,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAC/C,iBAAiB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3C,kBAAkB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAC5C,qBAAqB,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CAC9E;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAuFhD,CAAC"}
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { Icon, Popover, Text, ThemeProvider } from '@servicetitan/anvil2';
|
|
3
3
|
import SvgClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';
|
|
4
4
|
import classNames from 'classnames';
|
|
5
|
-
import { Children, Fragment, isValidElement
|
|
5
|
+
import { Children, Fragment, isValidElement } from 'react';
|
|
6
6
|
import { getCounterTag, getSubmenuGroupTag } from '../../utils/side-nav';
|
|
7
7
|
import { LayoutPlacementContext, useTitanLayoutContext } from './layout-context';
|
|
8
8
|
import { InternalSideNavigationGroup, InternalSideNavigationGroupLink, InternalSideNavigationLink } from './layout-sidebar-links-internal';
|
|
@@ -74,17 +74,6 @@ export const LayoutSidebar = ({ className, mobile, barExpanded, submenusExpanded
|
|
|
74
74
|
LayoutSidebar.displayName = 'LayoutSidebar';
|
|
75
75
|
/** Side Navigation menu item */ const SideNavigationGroupItem = ({ item, onSubmenuExpand, barExpanded, submenuExpanded, navigationComponent })=>{
|
|
76
76
|
var _item_submenu, _item_submenu1;
|
|
77
|
-
const onExpandToggle = useCallback((e)=>{
|
|
78
|
-
e.preventDefault();
|
|
79
|
-
e.stopPropagation();
|
|
80
|
-
if (item.id) {
|
|
81
|
-
onSubmenuExpand === null || onSubmenuExpand === void 0 ? void 0 : onSubmenuExpand(item.id, !submenuExpanded);
|
|
82
|
-
}
|
|
83
|
-
}, [
|
|
84
|
-
item.id,
|
|
85
|
-
submenuExpanded,
|
|
86
|
-
onSubmenuExpand
|
|
87
|
-
]);
|
|
88
77
|
const { sidebar: { styles: { popoverContent } } } = useTitanLayoutContext();
|
|
89
78
|
const tag = getSubmenuGroupTag(item.submenu, getCounterTag(item.counter, item.tag));
|
|
90
79
|
var _item_submenu_groups, _item_submenu_groups1;
|
|
@@ -98,7 +87,7 @@ LayoutSidebar.displayName = 'LayoutSidebar';
|
|
|
98
87
|
className: item.className,
|
|
99
88
|
tag: tag,
|
|
100
89
|
submenuExpanded: submenuExpanded,
|
|
101
|
-
|
|
90
|
+
onSubmenuExpand: onSubmenuExpand,
|
|
102
91
|
navigationComponent: navigationComponent,
|
|
103
92
|
children: /*#__PURE__*/ _jsx(SideNavigationGroupContent, {
|
|
104
93
|
parentId: item.id,
|
|
@@ -108,7 +97,7 @@ LayoutSidebar.displayName = 'LayoutSidebar';
|
|
|
108
97
|
}) : /*#__PURE__*/ _jsxs(Popover, {
|
|
109
98
|
placement: "right-start",
|
|
110
99
|
openOnHover: true,
|
|
111
|
-
delay:
|
|
100
|
+
delay: 300,
|
|
112
101
|
children: [
|
|
113
102
|
/*#__PURE__*/ _jsx(Popover.Trigger, {
|
|
114
103
|
children: (triggerProps)=>/*#__PURE__*/ _jsx("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"sourcesContent":["import { Icon, Popover, Text, ThemeProvider } from '@servicetitan/anvil2';\nimport SvgClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';\nimport classNames from 'classnames';\nimport {\n Children,\n FC,\n Fragment,\n MouseEvent,\n ReactElement,\n isValidElement,\n useCallback,\n} from 'react';\nimport { NavigationItemData, NavigationSubmenuData } from '../../utils/navigation';\nimport { NavLinkComponentProps } from '../../utils/navigation-context';\nimport { getCounterTag, getSubmenuGroupTag } from '../../utils/side-nav';\nimport { NavigationComponentProps } from './interface-internal';\nimport { LayoutPlacementContext, useTitanLayoutContext } from './layout-context';\nimport {\n InternalSideNavigationGroup,\n InternalSideNavigationGroupLink,\n InternalSideNavigationLink,\n} from './layout-sidebar-links-internal';\nimport * as Styles from './layout-sidebar.module.less';\n\nexport interface LayoutSidebarProps {\n className?: string;\n top?: ReactElement[];\n bottom?: ReactElement;\n mainItems?: NavigationItemData[];\n barExpanded: boolean;\n submenusExpanded: string[] | undefined;\n drawerOpened: boolean;\n mobile: boolean;\n navigationComponent: FC<NavLinkComponentProps>;\n onBarExpandChange(expanded: boolean): void;\n onDrawerOpenChange(expanded: boolean): void;\n onSubmenuExpandChange(id: string, expanded: boolean): void;\n}\n\nexport const LayoutSidebar: FC<LayoutSidebarProps> = ({\n className,\n mobile,\n barExpanded,\n submenusExpanded,\n drawerOpened,\n onBarExpandChange,\n onSubmenuExpandChange,\n onDrawerOpenChange,\n mainItems,\n top,\n bottom,\n navigationComponent,\n}) => {\n const closeDrawer = () => {\n if (mobile) {\n onDrawerOpenChange?.(false);\n }\n };\n\n return (\n <LayoutPlacementContext.Provider value=\"side\">\n {mobile && drawerOpened && (\n <div className={Styles.navDrawerBackdrop} onClick={closeDrawer} />\n )}\n <div\n className={classNames(\n Styles.nav,\n mobile && Styles.navDrawer,\n mobile && drawerOpened && Styles.navDrawerOpened,\n !mobile && (barExpanded ? Styles.navWide : Styles.navSlim),\n className\n )}\n data-cy=\"side-navigation\"\n onClick={closeDrawer}\n >\n <ThemeProvider mode=\"dark\" className={Styles.navMain}>\n {mobile && (\n <div className={Styles.navCloseWrapper}>\n <div\n className={Styles.navClose}\n onClick={() => onBarExpandChange(false)}\n >\n <Icon svg={SvgClose} size=\"large\" />\n </div>\n </div>\n )}\n {!!top?.length && <SidebarTop>{top}</SidebarTop>}\n\n <div data-cy=\"navigation-items\">\n {mainItems?.map(item =>\n item.submenu ? (\n <SideNavigationGroupItem\n key={item.id}\n item={item}\n barExpanded={mobile ? drawerOpened : barExpanded}\n submenuExpanded={\n !!item.id && !!submenusExpanded?.includes(item.id)\n }\n onSubmenuExpand={onSubmenuExpandChange}\n navigationComponent={navigationComponent}\n />\n ) : (\n <InternalSideNavigationLink\n key={item.id}\n id={item.id}\n to={item.to}\n title={item.title}\n isActive={item.isActive}\n icon={item.icon}\n iconActive={item.iconActive}\n className={item.className}\n tag={getSubmenuGroupTag(\n item.submenu,\n getCounterTag(item.counter, item.tag)\n )}\n navigationComponent={navigationComponent}\n />\n )\n )}\n </div>\n\n {!!bottom && <SidebarBottom>{bottom}</SidebarBottom>}\n </ThemeProvider>\n </div>\n </LayoutPlacementContext.Provider>\n );\n};\nLayoutSidebar.displayName = 'LayoutSidebar';\n\n/** Side Navigation menu item */\nconst SideNavigationGroupItem: FC<{\n item: NavigationItemData;\n navigationComponent: FC<NavLinkComponentProps>;\n barExpanded: boolean;\n submenuExpanded: boolean;\n onSubmenuExpand: undefined | ((id: string, expanded: boolean) => void);\n}> = ({ item, onSubmenuExpand, barExpanded, submenuExpanded, navigationComponent }) => {\n const onExpandToggle = useCallback(\n (e: MouseEvent<never>) => {\n e.preventDefault();\n e.stopPropagation();\n\n if (item.id) {\n onSubmenuExpand?.(item.id, !submenuExpanded);\n }\n },\n [item.id, submenuExpanded, onSubmenuExpand]\n );\n const {\n sidebar: {\n styles: { popoverContent },\n },\n } = useTitanLayoutContext();\n\n const tag = getSubmenuGroupTag(item.submenu, getCounterTag(item.counter, item.tag));\n\n return barExpanded ? (\n <InternalSideNavigationGroup\n id={item.id}\n to={item.to}\n title={item.title}\n isActive={item.isActive}\n icon={item.icon}\n iconActive={item.iconActive}\n className={item.className}\n tag={tag}\n submenuExpanded={submenuExpanded}\n onExpandToggle={onExpandToggle}\n navigationComponent={navigationComponent}\n >\n <SideNavigationGroupContent\n parentId={item.id}\n groups={item.submenu?.groups ?? []}\n navigationComponent={navigationComponent}\n />\n </InternalSideNavigationGroup>\n ) : (\n <Popover placement=\"right-start\" openOnHover delay={500}>\n <Popover.Trigger>\n {(triggerProps: any) => (\n <div {...triggerProps}>\n <InternalSideNavigationLink\n id={item.id}\n to={item.to}\n title={item.title}\n isActive={item.isActive}\n icon={item.icon}\n iconActive={item.iconActive}\n className={item.className}\n tag={tag}\n navigationComponent={navigationComponent}\n />\n </div>\n )}\n </Popover.Trigger>\n <Popover.Content style={popoverContent} className=\"z-global-nav-i\">\n <div className={Styles.submenuPopover}>\n <Text\n variant=\"headline\"\n el=\"h4\"\n size=\"small\"\n className=\"c-white m-b-half-i m-t-1\"\n >\n {item.title}\n </Text>\n <SideNavigationGroupContent\n parentId={item.id}\n groups={item.submenu?.groups ?? []}\n navigationComponent={navigationComponent}\n />\n </div>\n </Popover.Content>\n </Popover>\n );\n};\nconst SideNavigationGroupContent: FC<\n NavigationSubmenuData & NavigationComponentProps & { parentId: string }\n> = ({ groups, parentId, navigationComponent }) => {\n return (\n <Fragment>\n {groups.reduce((out, group, index) => {\n if (!group.links.length) {\n return out;\n }\n\n const title = group.title?.trim() ?? '';\n /* eslint-disable react/no-array-index-key */\n out.push(\n <Text\n key={`:group:${parentId}:${index}:title`}\n variant=\"eyebrow\"\n className={classNames(Styles.submenuGroupHeader, {\n [Styles.submenuGroupHeaderEmpty]: !title,\n })}\n >\n {title}\n </Text>\n );\n out.push(\n ...group.links.map((link, index) => (\n <InternalSideNavigationGroupLink\n key={`:${parentId}:${link.id}:${index}`}\n id={link.id}\n to={link.to}\n title={link.title}\n isActive={link.isActive}\n className={undefined}\n tag={getCounterTag(link.counter, link.tag)}\n parentId={parentId}\n navigationComponent={navigationComponent}\n />\n ))\n );\n /* eslint-enable react/no-array-index-key */\n\n return out;\n }, [] as ReactElement[])}\n </Fragment>\n );\n};\n\nfunction SidebarTop({ children }: any) {\n const list = Children.map(children, child => {\n return child && isValidElement(child) ? child : null;\n });\n return list?.length ? (\n <ThemeProvider mode=\"dark\" className={Styles.navTop} data-cy=\"navigation-items-top\">\n {list}\n <div className={Styles.divider} />\n </ThemeProvider>\n ) : null;\n}\n\nfunction SidebarBottom({ children }: any) {\n return (\n <ThemeProvider mode=\"dark\" className={Styles.navBottom} data-cy=\"navigation-items-bottom\">\n <div className={Styles.divider} />\n {children}\n </ThemeProvider>\n );\n}\n"],"names":["Icon","Popover","Text","ThemeProvider","SvgClose","classNames","Children","Fragment","isValidElement","useCallback","getCounterTag","getSubmenuGroupTag","LayoutPlacementContext","useTitanLayoutContext","InternalSideNavigationGroup","InternalSideNavigationGroupLink","InternalSideNavigationLink","Styles","LayoutSidebar","className","mobile","barExpanded","submenusExpanded","drawerOpened","onBarExpandChange","onSubmenuExpandChange","onDrawerOpenChange","mainItems","top","bottom","navigationComponent","closeDrawer","Provider","value","div","navDrawerBackdrop","onClick","nav","navDrawer","navDrawerOpened","navWide","navSlim","data-cy","mode","navMain","navCloseWrapper","navClose","svg","size","length","SidebarTop","map","item","submenu","SideNavigationGroupItem","submenuExpanded","id","includes","onSubmenuExpand","to","title","isActive","icon","iconActive","tag","counter","SidebarBottom","displayName","onExpandToggle","e","preventDefault","stopPropagation","sidebar","styles","popoverContent","SideNavigationGroupContent","parentId","groups","placement","openOnHover","delay","Trigger","triggerProps","Content","style","submenuPopover","variant","el","reduce","out","group","index","links","trim","push","submenuGroupHeader","submenuGroupHeaderEmpty","link","undefined","children","list","child","navTop","divider","navBottom"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"sourcesContent":["import { Icon, Popover, Text, ThemeProvider } from '@servicetitan/anvil2';\nimport SvgClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';\nimport classNames from 'classnames';\nimport { Children, FC, Fragment, ReactElement, isValidElement } from 'react';\nimport { NavigationItemData, NavigationSubmenuData } from '../../utils/navigation';\nimport { NavLinkComponentProps } from '../../utils/navigation-context';\nimport { getCounterTag, getSubmenuGroupTag } from '../../utils/side-nav';\nimport { NavigationComponentProps } from './interface-internal';\nimport { LayoutPlacementContext, useTitanLayoutContext } from './layout-context';\nimport {\n InternalSideNavigationGroup,\n InternalSideNavigationGroupLink,\n InternalSideNavigationLink,\n} from './layout-sidebar-links-internal';\nimport * as Styles from './layout-sidebar.module.less';\n\nexport interface LayoutSidebarProps {\n className?: string;\n top?: ReactElement[];\n bottom?: ReactElement;\n mainItems?: NavigationItemData[];\n barExpanded: boolean;\n submenusExpanded: string[] | undefined;\n drawerOpened: boolean;\n mobile: boolean;\n navigationComponent: FC<NavLinkComponentProps>;\n onBarExpandChange(expanded: boolean): void;\n onDrawerOpenChange(expanded: boolean): void;\n onSubmenuExpandChange(id: string, expanded: boolean, force: boolean): void;\n}\n\nexport const LayoutSidebar: FC<LayoutSidebarProps> = ({\n className,\n mobile,\n barExpanded,\n submenusExpanded,\n drawerOpened,\n onBarExpandChange,\n onSubmenuExpandChange,\n onDrawerOpenChange,\n mainItems,\n top,\n bottom,\n navigationComponent,\n}) => {\n const closeDrawer = () => {\n if (mobile) {\n onDrawerOpenChange?.(false);\n }\n };\n\n return (\n <LayoutPlacementContext.Provider value=\"side\">\n {mobile && drawerOpened && (\n <div className={Styles.navDrawerBackdrop} onClick={closeDrawer} />\n )}\n <div\n className={classNames(\n Styles.nav,\n mobile && Styles.navDrawer,\n mobile && drawerOpened && Styles.navDrawerOpened,\n !mobile && (barExpanded ? Styles.navWide : Styles.navSlim),\n className\n )}\n data-cy=\"side-navigation\"\n onClick={closeDrawer}\n >\n <ThemeProvider mode=\"dark\" className={Styles.navMain}>\n {mobile && (\n <div className={Styles.navCloseWrapper}>\n <div\n className={Styles.navClose}\n onClick={() => onBarExpandChange(false)}\n >\n <Icon svg={SvgClose} size=\"large\" />\n </div>\n </div>\n )}\n {!!top?.length && <SidebarTop>{top}</SidebarTop>}\n\n <div data-cy=\"navigation-items\">\n {mainItems?.map(item =>\n item.submenu ? (\n <SideNavigationGroupItem\n key={item.id}\n item={item}\n barExpanded={mobile ? drawerOpened : barExpanded}\n submenuExpanded={\n !!item.id && !!submenusExpanded?.includes(item.id)\n }\n onSubmenuExpand={onSubmenuExpandChange}\n navigationComponent={navigationComponent}\n />\n ) : (\n <InternalSideNavigationLink\n key={item.id}\n id={item.id}\n to={item.to}\n title={item.title}\n isActive={item.isActive}\n icon={item.icon}\n iconActive={item.iconActive}\n className={item.className}\n tag={getSubmenuGroupTag(\n item.submenu,\n getCounterTag(item.counter, item.tag)\n )}\n navigationComponent={navigationComponent}\n />\n )\n )}\n </div>\n\n {!!bottom && <SidebarBottom>{bottom}</SidebarBottom>}\n </ThemeProvider>\n </div>\n </LayoutPlacementContext.Provider>\n );\n};\nLayoutSidebar.displayName = 'LayoutSidebar';\n\n/** Side Navigation menu item */\nconst SideNavigationGroupItem: FC<{\n item: NavigationItemData;\n navigationComponent: FC<NavLinkComponentProps>;\n barExpanded: boolean;\n submenuExpanded: boolean;\n onSubmenuExpand: (id: string, expanded: boolean, force: boolean) => void;\n}> = ({ item, onSubmenuExpand, barExpanded, submenuExpanded, navigationComponent }) => {\n const {\n sidebar: {\n styles: { popoverContent },\n },\n } = useTitanLayoutContext();\n\n const tag = getSubmenuGroupTag(item.submenu, getCounterTag(item.counter, item.tag));\n\n return barExpanded ? (\n <InternalSideNavigationGroup\n id={item.id}\n to={item.to}\n title={item.title}\n isActive={item.isActive}\n icon={item.icon}\n iconActive={item.iconActive}\n className={item.className}\n tag={tag}\n submenuExpanded={submenuExpanded}\n onSubmenuExpand={onSubmenuExpand}\n navigationComponent={navigationComponent}\n >\n <SideNavigationGroupContent\n parentId={item.id}\n groups={item.submenu?.groups ?? []}\n navigationComponent={navigationComponent}\n />\n </InternalSideNavigationGroup>\n ) : (\n <Popover placement=\"right-start\" openOnHover delay={300}>\n <Popover.Trigger>\n {(triggerProps: any) => (\n <div {...triggerProps}>\n <InternalSideNavigationLink\n id={item.id}\n to={item.to}\n title={item.title}\n isActive={item.isActive}\n icon={item.icon}\n iconActive={item.iconActive}\n className={item.className}\n tag={tag}\n navigationComponent={navigationComponent}\n />\n </div>\n )}\n </Popover.Trigger>\n <Popover.Content style={popoverContent} className=\"z-global-nav-i\">\n <div className={Styles.submenuPopover}>\n <Text\n variant=\"headline\"\n el=\"h4\"\n size=\"small\"\n className=\"c-white m-b-half-i m-t-1\"\n >\n {item.title}\n </Text>\n <SideNavigationGroupContent\n parentId={item.id}\n groups={item.submenu?.groups ?? []}\n navigationComponent={navigationComponent}\n />\n </div>\n </Popover.Content>\n </Popover>\n );\n};\nconst SideNavigationGroupContent: FC<\n NavigationSubmenuData & NavigationComponentProps & { parentId: string }\n> = ({ groups, parentId, navigationComponent }) => {\n return (\n <Fragment>\n {groups.reduce((out, group, index) => {\n if (!group.links.length) {\n return out;\n }\n\n const title = group.title?.trim() ?? '';\n /* eslint-disable react/no-array-index-key */\n out.push(\n <Text\n key={`:group:${parentId}:${index}:title`}\n variant=\"eyebrow\"\n className={classNames(Styles.submenuGroupHeader, {\n [Styles.submenuGroupHeaderEmpty]: !title,\n })}\n >\n {title}\n </Text>\n );\n out.push(\n ...group.links.map((link, index) => (\n <InternalSideNavigationGroupLink\n key={`:${parentId}:${link.id}:${index}`}\n id={link.id}\n to={link.to}\n title={link.title}\n isActive={link.isActive}\n className={undefined}\n tag={getCounterTag(link.counter, link.tag)}\n parentId={parentId}\n navigationComponent={navigationComponent}\n />\n ))\n );\n /* eslint-enable react/no-array-index-key */\n\n return out;\n }, [] as ReactElement[])}\n </Fragment>\n );\n};\n\nfunction SidebarTop({ children }: any) {\n const list = Children.map(children, child => {\n return child && isValidElement(child) ? child : null;\n });\n return list?.length ? (\n <ThemeProvider mode=\"dark\" className={Styles.navTop} data-cy=\"navigation-items-top\">\n {list}\n <div className={Styles.divider} />\n </ThemeProvider>\n ) : null;\n}\n\nfunction SidebarBottom({ children }: any) {\n return (\n <ThemeProvider mode=\"dark\" className={Styles.navBottom} data-cy=\"navigation-items-bottom\">\n <div className={Styles.divider} />\n {children}\n </ThemeProvider>\n );\n}\n"],"names":["Icon","Popover","Text","ThemeProvider","SvgClose","classNames","Children","Fragment","isValidElement","getCounterTag","getSubmenuGroupTag","LayoutPlacementContext","useTitanLayoutContext","InternalSideNavigationGroup","InternalSideNavigationGroupLink","InternalSideNavigationLink","Styles","LayoutSidebar","className","mobile","barExpanded","submenusExpanded","drawerOpened","onBarExpandChange","onSubmenuExpandChange","onDrawerOpenChange","mainItems","top","bottom","navigationComponent","closeDrawer","Provider","value","div","navDrawerBackdrop","onClick","nav","navDrawer","navDrawerOpened","navWide","navSlim","data-cy","mode","navMain","navCloseWrapper","navClose","svg","size","length","SidebarTop","map","item","submenu","SideNavigationGroupItem","submenuExpanded","id","includes","onSubmenuExpand","to","title","isActive","icon","iconActive","tag","counter","SidebarBottom","displayName","sidebar","styles","popoverContent","SideNavigationGroupContent","parentId","groups","placement","openOnHover","delay","Trigger","triggerProps","Content","style","submenuPopover","variant","el","reduce","out","group","index","links","trim","push","submenuGroupHeader","submenuGroupHeaderEmpty","link","undefined","children","list","child","navTop","divider","navBottom"],"mappings":"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"}
|
|
@@ -47,11 +47,11 @@
|
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
-
.nav-item {
|
|
51
|
-
margin-bottom: @spacing-half;
|
|
52
|
-
}
|
|
53
50
|
.nav-top {
|
|
54
|
-
|
|
51
|
+
.divider {
|
|
52
|
+
margin-top: 10px;
|
|
53
|
+
margin-bottom: @spacing-half;
|
|
54
|
+
}
|
|
55
55
|
}
|
|
56
56
|
.nav-bottom {
|
|
57
57
|
.divider {
|
|
@@ -134,10 +134,7 @@
|
|
|
134
134
|
width: 64px;
|
|
135
135
|
overflow-x: hidden;
|
|
136
136
|
padding-top: @spacing-1;
|
|
137
|
-
|
|
138
|
-
&:not(:first-child) {
|
|
139
|
-
margin-top: @spacing-half;
|
|
140
|
-
}
|
|
137
|
+
margin-top: @spacing-half;
|
|
141
138
|
|
|
142
139
|
.nav-item-counter[data-anv][data-anv] {
|
|
143
140
|
position: absolute;
|
|
@@ -171,8 +168,13 @@
|
|
|
171
168
|
}
|
|
172
169
|
}
|
|
173
170
|
|
|
174
|
-
.nav-
|
|
175
|
-
|
|
171
|
+
.nav-main {
|
|
172
|
+
padding-top: @spacing-half;
|
|
173
|
+
}
|
|
174
|
+
.nav-top {
|
|
175
|
+
.divider {
|
|
176
|
+
margin-top: 12px;
|
|
177
|
+
}
|
|
176
178
|
}
|
|
177
179
|
}
|
|
178
180
|
|
|
@@ -185,28 +187,15 @@
|
|
|
185
187
|
margin-right: @spacing-1;
|
|
186
188
|
}
|
|
187
189
|
|
|
188
|
-
.
|
|
189
|
-
.
|
|
190
|
-
margin:
|
|
191
|
-
|
|
192
|
-
.toggle-icon-wrapper {
|
|
193
|
-
padding-left: @spacing-half;
|
|
194
|
-
padding-right: @spacing-half;
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
.toggle-text {
|
|
198
|
-
padding-left: @spacing-0 !important;
|
|
199
|
-
}
|
|
190
|
+
.nav-top {
|
|
191
|
+
.divider {
|
|
192
|
+
margin-top: 10px;
|
|
193
|
+
margin-bottom: 6px;
|
|
200
194
|
}
|
|
201
195
|
}
|
|
202
196
|
|
|
203
|
-
.nav-top .divider {
|
|
204
|
-
margin-top: @spacing-half;
|
|
205
|
-
margin-bottom: @spacing-1;
|
|
206
|
-
}
|
|
207
|
-
|
|
208
197
|
.nav-main {
|
|
209
|
-
padding-top:
|
|
198
|
+
padding-top: 12px;
|
|
210
199
|
}
|
|
211
200
|
|
|
212
201
|
.nav-group-item {
|
|
@@ -232,7 +221,7 @@
|
|
|
232
221
|
.nav-wide {
|
|
233
222
|
.nav-item {
|
|
234
223
|
flex-direction: row;
|
|
235
|
-
margin-
|
|
224
|
+
margin-top: @spacing-half;
|
|
236
225
|
|
|
237
226
|
.nav-item-icon-wrapper {
|
|
238
227
|
flex: 1;
|
|
@@ -10,6 +10,7 @@ export default _default;
|
|
|
10
10
|
export declare const ContentLegacy: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
|
|
11
11
|
export declare const ContentAnvil1: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
|
|
12
12
|
export declare const ContentAnvil2: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export declare const CustomNavigation: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
|
|
13
14
|
export declare const ExtraWithTitle: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
|
|
14
15
|
export declare const ExtraWithFlashing: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
|
|
15
16
|
export declare const ExtraWithTitleFlashing: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"titan-layout-default.stories.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout-default.stories.tsx"],"names":[],"mappings":"AAkBA,OAAO,EACH,iBAAiB,EAIpB,MAAM,yBAAyB,CAAC;;;;;;;;AASjC,wBAWE;AAwRF,eAAO,MAAM,aAAa,GAAI,MAAM,iBAAiB,4CASpD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,MAAM,iBAAiB,4CAMpD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,MAAM,iBAAiB,4CAQpD,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,MAAM,iBAAiB,4CAyBrD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CA0BxD,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,MAAM,iBAAiB,4CA0B7D,CAAC"}
|
|
1
|
+
{"version":3,"file":"titan-layout-default.stories.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout-default.stories.tsx"],"names":[],"mappings":"AAkBA,OAAO,EACH,iBAAiB,EAIpB,MAAM,yBAAyB,CAAC;;;;;;;;AASjC,wBAWE;AAwRF,eAAO,MAAM,aAAa,GAAI,MAAM,iBAAiB,4CASpD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,MAAM,iBAAiB,4CAMpD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,MAAM,iBAAiB,4CAQpD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,MAAM,iBAAiB,4CAcvD,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,MAAM,iBAAiB,4CAyBrD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CA0BxD,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,MAAM,iBAAiB,4CA0B7D,CAAC"}
|