@servicetitan/navigation 13.1.0-canary.259.cd6c17f.0 → 13.1.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/layout-header.d.ts.map +1 -1
- package/dist/components/titan-layout/layout-header.js +2 -1
- package/dist/components/titan-layout/layout-header.js.map +1 -1
- package/dist/components/titan-layout/layout-sidebar-links-internal.js +1 -1
- package/dist/components/titan-layout/layout-sidebar-links-internal.js.map +1 -1
- package/dist/components/titan-layout/with-tooltip.d.ts +1 -0
- package/dist/components/titan-layout/with-tooltip.d.ts.map +1 -1
- package/dist/components/titan-layout/with-tooltip.js +8 -2
- package/dist/components/titan-layout/with-tooltip.js.map +1 -1
- package/package.json +2 -2
- package/src/components/titan-layout/layout-header.tsx +4 -1
- package/src/components/titan-layout/layout-sidebar-links-internal.tsx +1 -1
- package/src/components/titan-layout/with-tooltip.tsx +10 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout-header.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,wBAAwB,EAAE,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI1F,OAAO,EAAc,oBAAoB,EAAgB,MAAM,eAAe,CAAC;AAG/E,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAChF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,GAAG,MAAM,CAAC;IAC1B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,
|
|
1
|
+
{"version":3,"file":"layout-header.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,wBAAwB,EAAE,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI1F,OAAO,EAAc,oBAAoB,EAAgB,MAAM,eAAe,CAAC;AAG/E,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAChF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,GAAG,MAAM,CAAC;IAC1B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAmF9C,CAAC"}
|
|
@@ -32,7 +32,8 @@ export const LayoutHeader = ({ className, right, rightText, rightClassName, cent
|
|
|
32
32
|
className: Styles.heTopLeft,
|
|
33
33
|
children: [
|
|
34
34
|
burgerElement && (burgerTooltip ? withTooltip(burgerElement, burgerTooltip, {
|
|
35
|
-
placement: 'bottom-end'
|
|
35
|
+
placement: 'bottom-end',
|
|
36
|
+
pointerEventsNone: true
|
|
36
37
|
}) : burgerElement),
|
|
37
38
|
/*#__PURE__*/ _jsx(LayoutLogo, {
|
|
38
39
|
...logo
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/titan-layout/layout-header.tsx"],"sourcesContent":["import SvgBurgerMenu from '@servicetitan/anvil2/assets/icons/material/round/menu.svg';\nimport classNames from 'classnames';\nimport { ComponentPropsWithoutRef, FC, MouseEvent, ReactElement, ReactNode } from 'react';\nimport { LayoutPlacementContext } from './layout-context';\nimport { LayoutHeaderNavigationTrigger } from './layout-header-links';\nimport * as Styles from './layout-header.module.less';\nimport { LayoutLogo, TitanLayoutLogoProps, isLogoCustom } from './layout-logo';\nimport { withTooltip } from './with-tooltip';\n\nexport type LayoutHeaderProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {\n right?: ReactNode;\n rightText?: string;\n rightClassName?: string;\n\n id?: string;\n\n center?: ReactElement;\n centerClassName?: string;\n\n logo?: TitanLayoutLogoProps;\n profile?: ReactElement;\n\n isMobile: boolean;\n variant: 'light' | 'dark';\n hasNotifications: boolean;\n hasBurger: boolean;\n burgerTooltip?: string;\n onBurgerClick?: (e: MouseEvent<never>) => void;\n};\n\nexport const LayoutHeader: FC<LayoutHeaderProps> = ({\n className,\n right,\n rightText,\n rightClassName,\n center,\n centerClassName,\n isMobile,\n hasNotifications,\n logo,\n profile,\n variant,\n hasBurger,\n burgerTooltip,\n onBurgerClick,\n ...rest\n}) => {\n const burgerElement = hasBurger && (\n <div className={Styles.burger} tabIndex={-1}>\n <LayoutHeaderNavigationTrigger\n id=\"burger\"\n title=\"\"\n icon={SvgBurgerMenu}\n iconActive={undefined}\n onClick={onBurgerClick}\n tag={{ value: hasNotifications }}\n />\n </div>\n );\n\n return (\n <LayoutPlacementContext.Provider value=\"top\">\n <div\n className={classNames(\n Styles.header,\n variant === 'light' ? Styles.headerLight : Styles.headerDark,\n isMobile ? Styles.headerMobile : Styles.headerDesktop,\n isLogoCustom(logo, isMobile) && Styles.headerLogoCustom,\n className\n )}\n data-cy=\"header-navigation\"\n {...rest}\n >\n <div className={Styles.heTopLeft}>\n {burgerElement &&\n (burgerTooltip\n ? withTooltip(burgerElement, burgerTooltip, {
|
|
1
|
+
{"version":3,"sources":["../../../src/components/titan-layout/layout-header.tsx"],"sourcesContent":["import SvgBurgerMenu from '@servicetitan/anvil2/assets/icons/material/round/menu.svg';\nimport classNames from 'classnames';\nimport { ComponentPropsWithoutRef, FC, MouseEvent, ReactElement, ReactNode } from 'react';\nimport { LayoutPlacementContext } from './layout-context';\nimport { LayoutHeaderNavigationTrigger } from './layout-header-links';\nimport * as Styles from './layout-header.module.less';\nimport { LayoutLogo, TitanLayoutLogoProps, isLogoCustom } from './layout-logo';\nimport { withTooltip } from './with-tooltip';\n\nexport type LayoutHeaderProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {\n right?: ReactNode;\n rightText?: string;\n rightClassName?: string;\n\n id?: string;\n\n center?: ReactElement;\n centerClassName?: string;\n\n logo?: TitanLayoutLogoProps;\n profile?: ReactElement;\n\n isMobile: boolean;\n variant: 'light' | 'dark';\n hasNotifications: boolean;\n hasBurger: boolean;\n burgerTooltip?: string;\n onBurgerClick?: (e: MouseEvent<never>) => void;\n};\n\nexport const LayoutHeader: FC<LayoutHeaderProps> = ({\n className,\n right,\n rightText,\n rightClassName,\n center,\n centerClassName,\n isMobile,\n hasNotifications,\n logo,\n profile,\n variant,\n hasBurger,\n burgerTooltip,\n onBurgerClick,\n ...rest\n}) => {\n const burgerElement = hasBurger && (\n <div className={Styles.burger} tabIndex={-1}>\n <LayoutHeaderNavigationTrigger\n id=\"burger\"\n title=\"\"\n icon={SvgBurgerMenu}\n iconActive={undefined}\n onClick={onBurgerClick}\n tag={{ value: hasNotifications }}\n />\n </div>\n );\n\n return (\n <LayoutPlacementContext.Provider value=\"top\">\n <div\n className={classNames(\n Styles.header,\n variant === 'light' ? Styles.headerLight : Styles.headerDark,\n isMobile ? Styles.headerMobile : Styles.headerDesktop,\n isLogoCustom(logo, isMobile) && Styles.headerLogoCustom,\n className\n )}\n data-cy=\"header-navigation\"\n {...rest}\n >\n <div className={Styles.heTopLeft}>\n {burgerElement &&\n (burgerTooltip\n ? withTooltip(burgerElement, burgerTooltip, {\n placement: 'bottom-end',\n pointerEventsNone: true,\n })\n : burgerElement)}\n <LayoutLogo {...logo} />\n </div>\n\n <div\n className={classNames(\n Styles.heTopCenter,\n 'd-f align-items-center justify-content-center',\n centerClassName\n )}\n data-cy=\"navigation-center\"\n >\n {center}\n </div>\n <div\n className={classNames(\n 'd-f flex-row justify-content-end align-items-center',\n Styles.heTopRight,\n rightClassName\n )}\n data-cy=\"navigation-right\"\n >\n {!!rightText && (\n <div className={Styles.heTopRightText} data-cy=\"navigation-right-text\">\n {rightText}\n </div>\n )}\n {right}\n {profile}\n </div>\n </div>\n </LayoutPlacementContext.Provider>\n );\n};\n"],"names":["SvgBurgerMenu","classNames","LayoutPlacementContext","LayoutHeaderNavigationTrigger","Styles","LayoutLogo","isLogoCustom","withTooltip","LayoutHeader","className","right","rightText","rightClassName","center","centerClassName","isMobile","hasNotifications","logo","profile","variant","hasBurger","burgerTooltip","onBurgerClick","rest","burgerElement","div","burger","tabIndex","id","title","icon","iconActive","undefined","onClick","tag","value","Provider","header","headerLight","headerDark","headerMobile","headerDesktop","headerLogoCustom","data-cy","heTopLeft","placement","pointerEventsNone","heTopCenter","heTopRight","heTopRightText"],"mappings":";AAAA,OAAOA,mBAAmB,4DAA4D;AACtF,OAAOC,gBAAgB,aAAa;AAEpC,SAASC,sBAAsB,QAAQ,mBAAmB;AAC1D,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,YAAYC,YAAY,8BAA8B;AACtD,SAASC,UAAU,EAAwBC,YAAY,QAAQ,gBAAgB;AAC/E,SAASC,WAAW,QAAQ,iBAAiB;AAuB7C,OAAO,MAAMC,eAAsC,CAAC,EAChDC,SAAS,EACTC,KAAK,EACLC,SAAS,EACTC,cAAc,EACdC,MAAM,EACNC,eAAe,EACfC,QAAQ,EACRC,gBAAgB,EAChBC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,aAAa,EACbC,aAAa,EACb,GAAGC,MACN;IACG,MAAMC,gBAAgBJ,2BAClB,KAACK;QAAIhB,WAAWL,OAAOsB,MAAM;QAAEC,UAAU,CAAC;kBACtC,cAAA,KAACxB;YACGyB,IAAG;YACHC,OAAM;YACNC,MAAM9B;YACN+B,YAAYC;YACZC,SAASX;YACTY,KAAK;gBAAEC,OAAOnB;YAAiB;;;IAK3C,qBACI,KAACd,uBAAuBkC,QAAQ;QAACD,OAAM;kBACnC,cAAA,MAACV;YACGhB,WAAWR,WACPG,OAAOiC,MAAM,EACblB,YAAY,UAAUf,OAAOkC,WAAW,GAAGlC,OAAOmC,UAAU,EAC5DxB,WAAWX,OAAOoC,YAAY,GAAGpC,OAAOqC,aAAa,EACrDnC,aAAaW,MAAMF,aAAaX,OAAOsC,gBAAgB,EACvDjC;YAEJkC,WAAQ;YACP,GAAGpB,IAAI;;8BAER,MAACE;oBAAIhB,WAAWL,OAAOwC,SAAS;;wBAC3BpB,iBACIH,CAAAA,gBACKd,YAAYiB,eAAeH,eAAe;4BACtCwB,WAAW;4BACXC,mBAAmB;wBACvB,KACAtB,aAAY;sCACtB,KAACnB;4BAAY,GAAGY,IAAI;;;;8BAGxB,KAACQ;oBACGhB,WAAWR,WACPG,OAAO2C,WAAW,EAClB,iDACAjC;oBAEJ6B,WAAQ;8BAEP9B;;8BAEL,MAACY;oBACGhB,WAAWR,WACP,uDACAG,OAAO4C,UAAU,EACjBpC;oBAEJ+B,WAAQ;;wBAEP,CAAC,CAAChC,2BACC,KAACc;4BAAIhB,WAAWL,OAAO6C,cAAc;4BAAEN,WAAQ;sCAC1ChC;;wBAGRD;wBACAQ;;;;;;AAKrB,EAAE"}
|
|
@@ -184,7 +184,7 @@ export const InternalSideNavigationGroup = ({ id, to, title, isActive, icon, ico
|
|
|
184
184
|
"aria-label": "Toggle submenu",
|
|
185
185
|
"data-cy": "nav-item-group-expand"
|
|
186
186
|
}), submenuExpanded ? 'Hide Submenu' : 'View Submenu', {
|
|
187
|
-
placement: '
|
|
187
|
+
placement: 'right'
|
|
188
188
|
})
|
|
189
189
|
})
|
|
190
190
|
]
|
|
@@ -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 tabIndex={0}\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 tabIndex={rest.onClick ? 0 : -1}\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 {submenuExpanded && (\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 )}\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","tabIndex","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":";AAAA,SAASA,MAAM,EAAEC,IAAI,QAAmB,uBAAuB;AAC/D,OAAOC,sBAAsB,mEAAmE;AAChG,OAAOC,oBAAoB,mEAAmE;AAC9F,OAAOC,gBAAgB,aAAa;AACpC,SAAuCC,QAAQ,QAA+B,QAAQ;AAEtF,SAASC,QAAQ,QAAuB,eAAe;AAEvD,YAAYC,YAAY,+BAA+B;AACvD,SAASC,WAAW,QAAQ,iBAAiB;AAS7C,MAAMC,oCAAgF,CAAC,EACnFC,IAAI,EACJC,UAAU,EACVC,GAAG,EACHC,KAAK,EACR,iBACG,MAACR;;0BACG,MAACS;gBAAIC,WAAWR,OAAOS,kBAAkB;;oBACpCN,sBACG,KAACT;wBAAKgB,KAAKP;wBAAMK,WAAWX,WAAWG,OAAOW,OAAO,EAAEX,OAAOY,eAAe;;oBAEhFR,4BACG,KAACV;wBACGgB,KAAKN;wBACLI,WAAWX,WAAWG,OAAOW,OAAO,EAAEX,OAAOa,aAAa;;kCAIlE,KAACN;wBAAIC,WAAWR,OAAOc,mBAAmB;wBAAEC,WAAQ;kCAC/CT;;oBAEJ,CAAC,CAACD,qBACC,KAACN;wBACGiB,MAAMX;wBACNG,WAAWR,OAAOiB,cAAc;wBAChCC,eAAelB,OAAOmB,kBAAkB;;;;0BAKpD,KAACZ;gBACGC,WAAWX,WAAWG,OAAOoB,oBAAoB,EAAE;oBAC/C,CAACpB,OAAOqB,gBAAgB,CAAC,EAAE,CAAC,CAACf,SAASA,MAAMgB,MAAM,IAAI;gBAC1D;gBACAP,WAAQ;0BAEPT;;;;AAKb,mDAAmD,GACnD,OAAO,MAAMiB,6BAWT,CAAC,EACDC,EAAE,EACFC,EAAE,EACFnB,KAAK,EACLoB,QAAQ,EACRvB,IAAI,EACJC,UAAU,EACVI,SAAS,EACTH,GAAG,EAEHsB,qBAAqBC,mBAAmB,EACxC,GAAGC,MACN;IACG,qBACI,KAACD;QACGb,WAAS,CAAC,gBAAgB,EAAES,IAAI;QAChCM,cAAY,CAAC,gBAAgB,EAAEN,IAAI;QAClC,GAAGK,IAAI;QACRrB,WAAWX,WAAWG,OAAO+B,OAAO,EAAE/B,OAAOgC,OAAO,EAAExB,WAAW;YAC7D,CAACR,OAAOiC,aAAa,CAAC,EAAEP,aAAa;YACrC,CAAC1B,OAAOkC,iBAAiB,CAAC,EAAE,CAAC,CAAC/B,QAAQ,CAAC,CAACC;QAC5C;QACAqB,IAAIA;QACJC,UAAU,OAAOA,aAAa,aAAaA,WAAWS;QACtDC,iBAAiBpC,OAAOiC,aAAa;QACrCI,UAAU;kBAEV,cAAA,KAACnC;YACGC,MAAMA;YACNC,YAAYA;YACZE,OAAOA;YACPD,KAAKA;;;AAIrB,EAAE;AAEF,sDAAsD,GACtD,OAAO,MAAMiC,gCAYT,CAAC,EACDd,EAAE,EACFlB,KAAK,EACLoB,QAAQ,EACRvB,IAAI,EACJC,UAAU,EACVI,SAAS,EAETH,GAAG,EACH,GAAGwB,MACN;IACG,qBACI,KAACtB;QACGQ,WAAS,CAAC,gBAAgB,EAAES,IAAI;QAChCM,cAAY,CAAC,gBAAgB,EAAEN,IAAI;QACnCa,UAAUR,KAAKU,OAAO,GAAG,IAAI,CAAC;QAC7B,GAAGV,IAAI;QACRrB,WAAWX,WAAWG,OAAO+B,OAAO,EAAEvB,WAAW;YAC7C,CAACR,OAAOgC,OAAO,CAAC,EAAE,CAAC,CAACH,KAAKU,OAAO;YAChC,CAACvC,OAAOiC,aAAa,CAAC,EAAEP,aAAa;YACrC,CAAC1B,OAAOkC,iBAAiB,CAAC,EAAE,CAAC,CAAC/B,QAAQ,CAAC,CAACC;QAC5C;kBAEA,cAAA,KAACF;YACGC,MAAMA;YACNC,YAAYA;YACZE,OAAOA;YACPD,KAAKA;;;AAIrB,EAAE;AAEF,OAAO,MAAMmC,kCAWT,CAAC,EACDhB,EAAE,EACFC,EAAE,EACFnB,KAAK,EACLoB,QAAQ,EACRlB,SAAS,EACTH,GAAG,EAEHoC,QAAQ,EACRd,qBAAqBC,mBAAmB,EACxC,GAAGC,MACN;IACG,qBACI,MAACD;QAEGb,WAAS,CAAC,gBAAgB,EAAE0B,SAAS,EAAE,EAAEjB,IAAI;QAC7CM,cAAY,CAAC,gBAAgB,EAAEW,SAAS,EAAE,EAAEjB,IAAI;QAC/C,GAAGK,IAAI;QACRJ,IAAIA;QACJjB,WAAWX,WAAWG,OAAO0C,WAAW,EAAE1C,OAAO2C,WAAW,EAAEnC,WAAW;YACrE,CAACR,OAAO4C,iBAAiB,CAAC,EAAElB,aAAa;QAC7C;QACAA,UAAU,OAAOA,aAAa,aAAaA,WAAWS;QACtDC,iBAAiBpC,OAAO4C,iBAAiB;;0BAEzC,KAACC;0BAAMvC;;0BACP,KAACP;gBAASiB,MAAMX;gBAAKG,WAAWR,OAAO8C,kBAAkB;;;OAZpDtB;AAejB,EAAE;AAEF,OAAO,MAAMuB,qCAQR,CAAC,EACFvB,EAAE,EACFlB,KAAK,EACLoB,QAAQ,EACRlB,SAAS,EACTH,GAAG,EAEH,GAAGwB,MACN;IACG,qBACI,MAACtB;QACGQ,WAAS,CAAC,gBAAgB,EAAES,IAAI;QAChCM,cAAY,CAAC,gBAAgB,EAAEN,IAAI;QAElC,GAAGK,IAAI;QACRrB,WAAWX,WAAWG,OAAO0C,WAAW,EAAE;YACtC,CAAC1C,OAAO2C,WAAW,CAAC,EAAE,CAAC,CAACd,KAAKU,OAAO;YACpC,CAACvC,OAAO4C,iBAAiB,CAAC,EAAElB,aAAa;QAC7C;;0BAEA,KAACmB;0BAAMvC;;0BACP,KAACP;gBAASiB,MAAMX;gBAAKG,WAAWR,OAAO8C,kBAAkB;;;OARpDtB;AAWjB,EAAE;AAEF,OAAO,MAAMwB,qCAAqC;IAC9C,qBAAO,KAACzC;QAAIC,WAAWR,OAAOiD,OAAO;;AACzC,EAAE;AAEF,OAAO,MAAMC,8BAgBT,CAAC,EACD1B,EAAE,EACFC,EAAE,EACFnB,KAAK,EACLoB,QAAQ,EACRvB,IAAI,EACJC,UAAU,EACVI,SAAS,EACTH,GAAG,EAEH8C,QAAQ,EACRC,eAAe,EACfC,eAAe,EACfd,OAAO,EACPZ,mBAAmB,EACnB,GAAGE,MACN;IACG,MAAMyB,cAAc,CAACC;QACjB,IAAIH,iBAAiB;YACjBC,gBAAgB7B,IAAI,MAAM;QAC9B,OAAO;YACH6B,gBAAgB7B,IAAI,MAAM;YAC1B+B,EAAEC,cAAc;YAChBD,EAAEE,eAAe;QACrB;IACJ;IACA,MAAMC,gBAAgB,CAACH;QACnBF,gBAAgB7B,IAAI,CAAC4B,iBAAiB;QACtCG,EAAEC,cAAc;QAChBD,EAAEE,eAAe;IACrB;IAEA,qBACI,MAAClD;QAAIC,WAAWX,WAAWG,OAAO2D,eAAe;;0BAC7C,MAACpD;gBAAIC,WAAWR,OAAO4D,YAAY;;kCAC/B,KAACrD;wBAAIgC,SAASe;kCACT7B,mBACG,KAACF;4BACGC,IAAIA;4BACJC,IAAIA;4BACJnB,OAAOA;4BACPoB,UAAUA;4BACVvB,MAAMA;4BACNC,YAAYA;4BACZC,KAAKA;4BACLG,WAAWA;4BACV,GAAGqB,IAAI;4BACRF,qBAAqBA;2CAGzB,KAACW;4BACGd,IAAIA;4BACJlB,OAAOA;4BACPoB,UAAUA,aAAa,QAAQS;4BAC/BhC,MAAMA;4BACNC,YAAYA;4BACZC,KAAKA;4BACLG,WAAWA;4BACV,GAAGqB,IAAI;;;kCAKpB,KAACtB;wBAAIC,WAAWR,OAAO6D,yBAAyB;kCAC3C5D,0BACG,KAACR;4BACGqE,YAAW;4BACXC,MAAK;4BACL5D,MAAMiD,kBAAkBzD,mBAAmBC;4BAC3CY,WAAWR,OAAOgE,kBAAkB;4BACpCzB,SAASmB;4BACTO,cAAW;4BACXlD,WAAQ;4BAEZqC,kBAAkB,iBAAiB,gBACnC;4BAAEc,WAAW;wBAAU;;;;YAIlCd,iCACG,KAAC7C;gBACGC,WAAWX,WAAWG,OAAOmE,cAAc,EAAE;oBACzC,CAACnE,OAAOoE,uBAAuB,CAAC,EAAE,CAAChB;gBACvC;gBACArC,WAAS,CAAC,mBAAmB,EAAES,IAAI;0BAEnC,cAAA,KAACjB;oBAAIC,WAAWR,OAAOqE,OAAO;8BAAGlB;;;;;AAKrD,EAAE"}
|
|
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 tabIndex={0}\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 tabIndex={rest.onClick ? 0 : -1}\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: 'right' }\n )}\n </div>\n </div>\n {submenuExpanded && (\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 )}\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","tabIndex","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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"}
|
|
@@ -3,5 +3,6 @@ import { ReactElement } from 'react';
|
|
|
3
3
|
export declare const withTooltip: (element: ReactElement, tooltip: string | undefined, props?: {
|
|
4
4
|
placement?: TooltipProps["placement"];
|
|
5
5
|
key?: string;
|
|
6
|
+
pointerEventsNone?: boolean;
|
|
6
7
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
7
8
|
//# sourceMappingURL=with-tooltip.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"with-tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/with-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,eAAO,MAAM,WAAW,GACpB,SAAS,YAAY,EACrB,SAAS,MAAM,GAAG,SAAS,EAC3B,QAAQ;IACJ,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"with-tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/with-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,eAAO,MAAM,WAAW,GACpB,SAAS,YAAY,EACrB,SAAS,MAAM,GAAG,SAAS,EAC3B,QAAQ;IACJ,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC/B,4CAcJ,CAAC"}
|
|
@@ -1,10 +1,15 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Tooltip } from '@servicetitan/anvil2';
|
|
3
|
-
export const withTooltip = (element, tooltip, props)=>
|
|
3
|
+
export const withTooltip = (element, tooltip, props)=>{
|
|
4
|
+
const { pointerEventsNone, ...tooltipProps } = props !== null && props !== void 0 ? props : {};
|
|
5
|
+
return tooltip ? /*#__PURE__*/ _jsxs(Tooltip, {
|
|
4
6
|
placement: "bottom",
|
|
5
|
-
...
|
|
7
|
+
...tooltipProps,
|
|
6
8
|
children: [
|
|
7
9
|
/*#__PURE__*/ _jsx(Tooltip.Content, {
|
|
10
|
+
style: pointerEventsNone ? {
|
|
11
|
+
pointerEvents: 'none'
|
|
12
|
+
} : undefined,
|
|
8
13
|
children: tooltip
|
|
9
14
|
}),
|
|
10
15
|
/*#__PURE__*/ _jsx(Tooltip.Trigger, {
|
|
@@ -12,5 +17,6 @@ export const withTooltip = (element, tooltip, props)=>tooltip ? /*#__PURE__*/ _j
|
|
|
12
17
|
})
|
|
13
18
|
]
|
|
14
19
|
}) : element;
|
|
20
|
+
};
|
|
15
21
|
|
|
16
22
|
//# sourceMappingURL=with-tooltip.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/titan-layout/with-tooltip.tsx"],"sourcesContent":["import { Tooltip, TooltipProps } from '@servicetitan/anvil2';\nimport { ReactElement } from 'react';\n\nexport const withTooltip = (\n element: ReactElement,\n tooltip: string | undefined,\n props?: {\n placement?: TooltipProps['placement'];\n key?: string;\n }\n)
|
|
1
|
+
{"version":3,"sources":["../../../src/components/titan-layout/with-tooltip.tsx"],"sourcesContent":["import { Tooltip, TooltipProps } from '@servicetitan/anvil2';\nimport { ReactElement } from 'react';\n\nexport const withTooltip = (\n element: ReactElement,\n tooltip: string | undefined,\n props?: {\n placement?: TooltipProps['placement'];\n key?: string;\n pointerEventsNone?: boolean;\n }\n) => {\n const { pointerEventsNone, ...tooltipProps } = props ?? {};\n\n return tooltip ? (\n <Tooltip placement=\"bottom\" {...tooltipProps}>\n <Tooltip.Content style={pointerEventsNone ? { pointerEvents: 'none' } : undefined}>\n {tooltip}\n </Tooltip.Content>\n <Tooltip.Trigger>{element}</Tooltip.Trigger>\n </Tooltip>\n ) : (\n element\n );\n};\n"],"names":["Tooltip","withTooltip","element","tooltip","props","pointerEventsNone","tooltipProps","placement","Content","style","pointerEvents","undefined","Trigger"],"mappings":";AAAA,SAASA,OAAO,QAAsB,uBAAuB;AAG7D,OAAO,MAAMC,cAAc,CACvBC,SACAC,SACAC;IAMA,MAAM,EAAEC,iBAAiB,EAAE,GAAGC,cAAc,GAAGF,kBAAAA,mBAAAA,QAAS,CAAC;IAEzD,OAAOD,wBACH,MAACH;QAAQO,WAAU;QAAU,GAAGD,YAAY;;0BACxC,KAACN,QAAQQ,OAAO;gBAACC,OAAOJ,oBAAoB;oBAAEK,eAAe;gBAAO,IAAIC;0BACnER;;0BAEL,KAACH,QAAQY,OAAO;0BAAEV;;;SAGtBA;AAER,EAAE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/navigation",
|
|
3
|
-
"version": "13.1.
|
|
3
|
+
"version": "13.1.1",
|
|
4
4
|
"description": "Navigation components",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -42,5 +42,5 @@
|
|
|
42
42
|
"less": true,
|
|
43
43
|
"webpack": false
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "79f451413bbafe82c68ae2d554477395166c66c7"
|
|
46
46
|
}
|
|
@@ -74,7 +74,10 @@ export const LayoutHeader: FC<LayoutHeaderProps> = ({
|
|
|
74
74
|
<div className={Styles.heTopLeft}>
|
|
75
75
|
{burgerElement &&
|
|
76
76
|
(burgerTooltip
|
|
77
|
-
? withTooltip(burgerElement, burgerTooltip, {
|
|
77
|
+
? withTooltip(burgerElement, burgerTooltip, {
|
|
78
|
+
placement: 'bottom-end',
|
|
79
|
+
pointerEventsNone: true,
|
|
80
|
+
})
|
|
78
81
|
: burgerElement)}
|
|
79
82
|
<LayoutLogo {...logo} />
|
|
80
83
|
</div>
|
|
@@ -7,13 +7,19 @@ export const withTooltip = (
|
|
|
7
7
|
props?: {
|
|
8
8
|
placement?: TooltipProps['placement'];
|
|
9
9
|
key?: string;
|
|
10
|
+
pointerEventsNone?: boolean;
|
|
10
11
|
}
|
|
11
|
-
) =>
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
) => {
|
|
13
|
+
const { pointerEventsNone, ...tooltipProps } = props ?? {};
|
|
14
|
+
|
|
15
|
+
return tooltip ? (
|
|
16
|
+
<Tooltip placement="bottom" {...tooltipProps}>
|
|
17
|
+
<Tooltip.Content style={pointerEventsNone ? { pointerEvents: 'none' } : undefined}>
|
|
18
|
+
{tooltip}
|
|
19
|
+
</Tooltip.Content>
|
|
15
20
|
<Tooltip.Trigger>{element}</Tooltip.Trigger>
|
|
16
21
|
</Tooltip>
|
|
17
22
|
) : (
|
|
18
23
|
element
|
|
19
24
|
);
|
|
25
|
+
};
|