@servicetitan/navigation 13.0.0-canary.256.b93dc10.0 → 13.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/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-sidebar-links-internal.js +1 -1
- package/dist/components/titan-layout/layout-sidebar-links-internal.js.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.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-sidebar-links-internal.tsx +1 -1
- package/src/components/titan-layout/titan-layout.tsx +32 -0
- 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"}
|
|
@@ -172,7 +172,7 @@ export const InternalSideNavigationGroup = ({ id, to, title, isActive, icon, ico
|
|
|
172
172
|
onClick: onExpandToggle,
|
|
173
173
|
"aria-label": "Toggle submenu",
|
|
174
174
|
"data-cy": "nav-item-group-expand"
|
|
175
|
-
}), 'View Submenu', {
|
|
175
|
+
}), submenuExpanded ? 'Hide Submenu' : 'View Submenu', {
|
|
176
176
|
placement: 'top-end'
|
|
177
177
|
})
|
|
178
178
|
})
|
|
@@ -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 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 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","onExpandToggle","onRootClickCapture","e","preventDefault","stopPropagation","navGroupWrapper","navGroupItem","onClickCapture","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;kBAErC,cAAA,KAAC/B;YACGC,MAAMA;YACNC,YAAYA;YACZE,OAAOA;YACPD,KAAKA;;;AAIrB,EAAE;AAEF,sDAAsD,GACtD,OAAO,MAAMgC,gCAYT,CAAC,EACDb,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;QAClC,GAAGK,IAAI;QACRrB,WAAWX,WAAWG,OAAO+B,OAAO,EAAEvB,WAAW;YAC7C,CAACR,OAAOgC,OAAO,CAAC,EAAE,CAAC,CAACH,KAAKS,OAAO;YAChC,CAACtC,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,MAAMkC,kCAWT,CAAC,EACDf,EAAE,EACFC,EAAE,EACFnB,KAAK,EACLoB,QAAQ,EACRlB,SAAS,EACTH,GAAG,EAEHmC,QAAQ,EACRb,qBAAqBC,mBAAmB,EACxC,GAAGC,MACN;IACG,qBACI,MAACD;QAEGb,WAAS,CAAC,gBAAgB,EAAEyB,SAAS,EAAE,EAAEhB,IAAI;QAC7CM,cAAY,CAAC,gBAAgB,EAAEU,SAAS,EAAE,EAAEhB,IAAI;QAC/C,GAAGK,IAAI;QACRJ,IAAIA;QACJjB,WAAWX,WAAWG,OAAOyC,WAAW,EAAEzC,OAAO0C,WAAW,EAAElC,WAAW;YACrE,CAACR,OAAO2C,iBAAiB,CAAC,EAAEjB,aAAa;QAC7C;QACAA,UAAU,OAAOA,aAAa,aAAaA,WAAWS;QACtDC,iBAAiBpC,OAAO2C,iBAAiB;;0BAEzC,KAACC;0BAAMtC;;0BACP,KAACP;gBAASiB,MAAMX;gBAAKG,WAAWR,OAAO6C,kBAAkB;;;OAZpDrB;AAejB,EAAE;AAEF,OAAO,MAAMsB,qCAQR,CAAC,EACFtB,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,OAAOyC,WAAW,EAAE;YACtC,CAACzC,OAAO0C,WAAW,CAAC,EAAE,CAAC,CAACb,KAAKS,OAAO;YACpC,CAACtC,OAAO2C,iBAAiB,CAAC,EAAEjB,aAAa;QAC7C;;0BAEA,KAACkB;0BAAMtC;;0BACP,KAACP;gBAASiB,MAAMX;gBAAKG,WAAWR,OAAO6C,kBAAkB;;;OARpDrB;AAWjB,EAAE;AAEF,OAAO,MAAMuB,qCAAqC;IAC9C,qBAAO,KAACxC;QAAIC,WAAWR,OAAOgD,OAAO;;AACzC,EAAE;AAEF,OAAO,MAAMC,8BAgBT,CAAC,EACDzB,EAAE,EACFC,EAAE,EACFnB,KAAK,EACLoB,QAAQ,EACRvB,IAAI,EACJC,UAAU,EACVI,SAAS,EACTH,GAAG,EAEH6C,QAAQ,EACRC,eAAe,EACfC,cAAc,EACdd,OAAO,EACPX,mBAAmB,EACnB,GAAGE,MACN;IACG,MAAMwB,qBAAqB,CAACC;QACxB,IAAI,CAACH,iBAAiB;YAClBC,2BAAAA,qCAAAA,eAAiBE;YACjBA,EAAEC,cAAc;YAChBD,EAAEE,eAAe;QACrB;IACJ;IACA,qBACI,MAACjD;QAAIC,WAAWX,WAAWG,OAAOyD,eAAe;;0BAC7C,MAAClD;gBAAIC,WAAWR,OAAO0D,YAAY;gBAAEC,gBAAgBN;;oBAChD5B,mBACG,KAACF;wBACGC,IAAIA;wBACJC,IAAIA;wBACJnB,OAAOA;wBACPoB,UAAUA;wBACVvB,MAAMA;wBACNC,YAAYA;wBACZC,KAAKA;wBACLG,WAAWA;wBACV,GAAGqB,IAAI;wBACRF,qBAAqBA;uCAGzB,KAACU;wBACGb,IAAIA;wBACJlB,OAAOA;wBACPoB,UAAUA,aAAa,QAAQS;wBAC/BhC,MAAMA;wBACNC,YAAYA;wBACZC,KAAKA;wBACLG,WAAWA;wBACV,GAAGqB,IAAI;;kCAIhB,KAACtB;wBAAIC,WAAWR,OAAO4D,yBAAyB;kCAC3C3D,0BACG,KAACR;4BACGoE,YAAW;4BACXC,MAAK;4BACL3D,MAAMgD,kBAAkBxD,mBAAmBC;4BAC3CY,WAAWR,OAAO+D,kBAAkB;4BACpCzB,SAASc;4BACTY,cAAW;4BACXjD,WAAQ;4BAEZoC,kBAAkB,iBAAiB,gBACnC;4BAAEc,WAAW;wBAAU;;;;0BAInC,KAAC1D;gBACGC,WAAWX,WAAWG,OAAOkE,cAAc,EAAE;oBACzC,CAAClE,OAAOmE,uBAAuB,CAAC,EAAE,CAAChB;gBACvC;gBACApC,WAAS,CAAC,mBAAmB,EAAES,IAAI;0BAEnC,cAAA,KAACjB;oBAAIC,WAAWR,OAAOoE,OAAO;8BAAGlB;;;;;AAIjD,EAAE"}
|
|
@@ -20,15 +20,40 @@ export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
|
|
|
20
20
|
navigationOverflowItems?: NavigationItemData[];
|
|
21
21
|
/** logo props */
|
|
22
22
|
logo?: TitanLayoutLogoProps;
|
|
23
|
+
/** layout state */
|
|
23
24
|
state?: TitanLayoutState;
|
|
25
|
+
/** layout state change handler */
|
|
24
26
|
onStateChange?: (state: TitanLayoutState) => void;
|
|
27
|
+
/** content header content */
|
|
25
28
|
header?: ReactElement;
|
|
29
|
+
/** layout header content (center) */
|
|
26
30
|
top?: ReactElement;
|
|
31
|
+
/** top links for side navigation */
|
|
27
32
|
sideTop?: ReactElement[];
|
|
33
|
+
/**
|
|
34
|
+
* profile element for layout
|
|
35
|
+
* @see ProfileDropdown
|
|
36
|
+
*/
|
|
28
37
|
profile?: ReactElement;
|
|
38
|
+
/**
|
|
39
|
+
* extra links for layout header
|
|
40
|
+
* shown in side nav footer on mobile
|
|
41
|
+
*/
|
|
29
42
|
extraLinks?: ReactElement;
|
|
43
|
+
/**
|
|
44
|
+
* fixed extra links for layout header
|
|
45
|
+
* shown in header on mobile as well
|
|
46
|
+
*/
|
|
30
47
|
extraLinksTop?: ReactElement;
|
|
48
|
+
/**
|
|
49
|
+
* text shown in layout's header
|
|
50
|
+
* shown in side nav footer on mobile
|
|
51
|
+
*/
|
|
31
52
|
extraText?: string;
|
|
53
|
+
/**
|
|
54
|
+
* minimal width set for content area
|
|
55
|
+
* used for pages that aren't adopted to mobile
|
|
56
|
+
*/
|
|
32
57
|
minContentWidth?: number;
|
|
33
58
|
};
|
|
34
59
|
declare function TitanLayoutComponent({ appearance, navVariant, id, children, contentOnly, navigationComponent, header, top, profile, state, logo, onStateChange, navigationMainItems, navigationOverflowItems, extraLinks, extraLinksTop, extraText, minContentWidth, sideTop, }: TitanLayoutProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"titan-layout.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.tsx"],"names":[],"mappings":"AACA,OAAO,EAEH,wBAAwB,EACxB,EAAE,EAGF,YAAY,EACZ,SAAS,EAMZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAA2B,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAEhG,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAS/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAOrD,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACzF,wBAAwB;IACxB,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAE5C,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAE5B,uBAAuB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,oCAAoC;IACpC,mBAAmB,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAEhD,qCAAqC;IACrC,mBAAmB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE3C,sEAAsE;IACtE,uBAAuB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE/C,iBAAiB;IACjB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAE5B,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAElD,MAAM,CAAC,EAAE,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"titan-layout.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.tsx"],"names":[],"mappings":"AACA,OAAO,EAEH,wBAAwB,EACxB,EAAE,EAGF,YAAY,EACZ,SAAS,EAMZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAA2B,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAEhG,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAS/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAOrD,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACzF,wBAAwB;IACxB,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAE5C,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAE5B,uBAAuB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,oCAAoC;IACpC,mBAAmB,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAEhD,qCAAqC;IACrC,mBAAmB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE3C,sEAAsE;IACtE,uBAAuB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE/C,iBAAiB;IACjB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAE5B,mBAAmB;IACnB,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,kCAAkC;IAClC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAElD,6BAA6B;IAC7B,MAAM,CAAC,EAAE,YAAY,CAAC;IAEtB,qCAAqC;IACrC,GAAG,CAAC,EAAE,YAAY,CAAC;IAEnB,oCAAoC;IACpC,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IAEzB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;;OAGG;IACH,UAAU,CAAC,EAAE,YAAY,CAAC;IAE1B;;;OAGG;IACH,aAAa,CAAC,EAAE,YAAY,CAAC;IAE7B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAyBF,iBAAS,oBAAoB,CAAC,EAC1B,UAAqB,EACrB,UAAmB,EACnB,EAAE,EACF,QAAQ,EACR,WAAW,EACX,mBAAmB,EACnB,MAAM,EACN,GAAG,EACH,OAAO,EACP,KAAK,EACL,IAAI,EACJ,aAAa,EACb,mBAAmB,EACnB,uBAAuB,EACvB,UAAU,EACV,aAAa,EACb,SAAS,EACT,eAAe,EACf,OAAO,GACV,EAAE,gBAAgB,2CAsQlB;AA6FD,eAAO,MAAM,WAAW;;;CAGtB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/titan-layout/titan-layout.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport {\n CSSProperties,\n ComponentPropsWithoutRef,\n FC,\n Fragment,\n MouseEvent,\n ReactElement,\n ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { NavigationItemData } from '../../utils/navigation';\nimport { DefaultNavLinkComponent, NavLinkComponentProps } from '../../utils/navigation-context';\nimport { useTitanBreakpoint } from '../../utils/use-breakpoint';\nimport { TitanLayoutState } from './interface';\nimport {\n LayoutContext,\n LayoutPlacementContext,\n TitanLayoutContextType,\n TitanLayoutSidebarContextType,\n} from './layout-context';\nimport { LayoutHeader } from './layout-header';\nimport { LayoutHeaderDark } from './layout-header-dark';\nimport { TitanLayoutLogoProps } from './layout-logo';\nimport { LayoutSidebar } from './layout-sidebar';\nimport { InternalSideNavigationTrigger } from './layout-sidebar-links-internal';\nimport { useNotificationsState } from './notifications-context';\nimport { TitanLayoutLink, TitanLayoutTrigger } from './titan-layout-links';\nimport * as Styles from './titan-layout.module.less';\n\nexport type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & {\n /** layout appearance */\n appearance?: 'legacy' | 'anvil1' | 'anvil2';\n\n /** layout navigation variant (left by default) */\n navVariant?: 'left' | 'top';\n\n /** layout's content */\n children?: ReactNode;\n\n /** show only content without side and top bars */\n contentOnly?: boolean;\n\n /** component used for navigation */\n navigationComponent?: FC<NavLinkComponentProps>;\n\n /** data for main navigation links */\n navigationMainItems?: NavigationItemData[];\n\n /** data for overflow navigation links (used only with top variant) */\n navigationOverflowItems?: NavigationItemData[];\n\n /** logo props */\n logo?: TitanLayoutLogoProps;\n\n state?: TitanLayoutState;\n onStateChange?: (state: TitanLayoutState) => void;\n\n header?: ReactElement;\n top?: ReactElement;\n sideTop?: ReactElement[];\n profile?: ReactElement;\n extraLinks?: ReactElement;\n extraLinksTop?: ReactElement;\n extraText?: string;\n minContentWidth?: number;\n};\n\nconst defaultSidebarContext: TitanLayoutSidebarContextType = {\n styles: {\n popoverContent: {\n '--background-color-strong': '#24323C',\n 'color': 'var(--color-white)',\n } as CSSProperties,\n },\n};\n\nconst useAppearance = (appearance: TitanLayoutProps['appearance']) =>\n useMemo(() => {\n const isLegacy = appearance === 'legacy';\n const isAnvil1 = appearance === 'anvil1';\n const isAnvil2 = appearance === 'anvil2';\n\n return {\n isLegacy,\n isAnvil1,\n isAnvil2,\n isSequent: isLegacy || isAnvil2,\n };\n }, [appearance]);\n\nfunction TitanLayoutComponent({\n appearance = 'anvil2',\n navVariant = 'left',\n id,\n children,\n contentOnly,\n navigationComponent,\n header,\n top,\n profile,\n state,\n logo,\n onStateChange,\n navigationMainItems,\n navigationOverflowItems,\n extraLinks,\n extraLinksTop,\n extraText,\n minContentWidth,\n sideTop,\n}: TitanLayoutProps) {\n const breakpoint = useTitanBreakpoint();\n const context: TitanLayoutContextType = useMemo(\n () => ({\n NavigationComponent: navigationComponent ?? DefaultNavLinkComponent,\n breakpoint,\n isTitanLayout: true,\n sidebar: defaultSidebarContext,\n }),\n [navigationComponent, breakpoint]\n );\n const view = useAppearance(appearance);\n const [mobileDrawerOpened, setMobileDrawerOpened] = useState(false);\n const { hasNotifications, NotificationsContextProvider } = useNotificationsState();\n const [offsetTopStyles, setOffsetTopStyles] = useState<object>({});\n const updateIndicatorsHeight = useCallback((offset: number) => {\n setOffsetTopStyles({\n '--content-offset-top': `calc(var(--nav-offset-top) + ${offset}px)`,\n });\n }, []);\n\n const isMobile = breakpoint.isMobile;\n const hasSideBar =\n !contentOnly &&\n (navVariant === 'left' || (navVariant === 'top' && isMobile)) &&\n (!!navigationMainItems?.length || !!sideTop?.length);\n const hasTopBar = !contentOnly;\n\n useEffect(() => {\n if (view.isAnvil1) {\n const bodyClassName = 'of-hidden-i';\n document.body.classList.add(bodyClassName);\n return () => document.body.classList.remove(bodyClassName);\n }\n }, [view.isAnvil1]);\n\n const onBurgerClick = useCallback(\n (e: MouseEvent<never>) => {\n if (isMobile) {\n setMobileDrawerOpened(true);\n } else {\n onStateChange?.({ navCollapsed: !state?.navCollapsed });\n }\n\n e.stopPropagation();\n },\n [isMobile, state?.navCollapsed, onStateChange]\n );\n\n const onBarExpandChange = useCallback(\n (expanded: boolean) => {\n if (isMobile) {\n setMobileDrawerOpened(false);\n } else {\n onStateChange?.({ navCollapsed: !expanded });\n }\n },\n [onStateChange, isMobile]\n );\n const onSubmenuExpandChange = useCallback(\n (id: string, expanded: boolean) => {\n onStateChange?.({\n navCollapsed: state?.navCollapsed ?? false,\n submenusExpanded: [\n ...(state?.submenusExpanded ?? []).filter(i => i !== id),\n ...(expanded ? [id] : []),\n ],\n });\n },\n [state, onStateChange]\n );\n const sidebarNavItems = useMemo(() => {\n if (!hasSideBar) {\n return undefined;\n }\n\n if (navVariant === 'left') {\n return navigationMainItems;\n }\n\n return [...(navigationMainItems ?? []), ...(navigationOverflowItems ?? [])];\n }, [hasSideBar, navigationMainItems, navigationOverflowItems, navVariant]);\n\n const hasMenuNotifications = useMemo(() => {\n try {\n return (\n sidebarNavItems?.some(item => {\n if (item.counter || item.tag?.value) {\n return true;\n } else if (item.submenu) {\n return item.submenu.groups.some(group =>\n group.links.some(link => !!link.counter || !!link.tag?.value)\n );\n }\n return false;\n }) ?? false\n );\n } catch {\n return false;\n }\n }, [sidebarNavItems]);\n\n const limitContentWidth = useMemo(() => {\n if (view.isAnvil2 || !minContentWidth) {\n return undefined;\n }\n\n if (breakpoint.width < minContentWidth) {\n return minContentWidth;\n }\n }, [view, minContentWidth, breakpoint.width]);\n\n const contentStyles = useMemo(() => {\n if (view.isAnvil2) {\n return offsetTopStyles;\n }\n\n if (view.isLegacy) {\n return {\n ...(limitContentWidth\n ? { display: 'flex', flexDirection: 'column', minHeight: '100vh' }\n : {}),\n ...offsetTopStyles,\n };\n }\n }, [view, offsetTopStyles, limitContentWidth]);\n\n const layoutClass = view.isLegacy\n ? Styles.layoutLegacy\n : view.isAnvil1\n ? Styles.layoutAnvil1\n : Styles.layoutAnvil2;\n\n return (\n <LayoutContext.Provider value={context}>\n <LayoutPlacementContext.Provider value=\"unset\">\n <div\n id={id}\n className={classNames(\n Styles.layout,\n isMobile ? Styles.layoutMobile : Styles.layoutDesktop,\n hasTopBar &&\n (navVariant === 'left' || !top\n ? Styles.layoutTopLight\n : Styles.layoutTopNav),\n {\n [Styles.layoutNavSlim]: !isMobile && hasSideBar && state?.navCollapsed,\n [Styles.layoutNavWide]: !isMobile && hasSideBar && !state?.navCollapsed,\n },\n layoutClass\n )}\n style={contentStyles}\n >\n {view.isSequent && <div className={Styles.topPlaceholder} />}\n {hasTopBar &&\n (navVariant === 'left' ? (\n <LayoutHeader\n className={Styles.top}\n variant=\"light\"\n logo={logo}\n profile={isMobile ? undefined : profile}\n center={top}\n rightText={isMobile ? undefined : extraText}\n right={\n <Fragment>\n {extraLinksTop}\n {!isMobile && extraLinks}\n </Fragment>\n }\n isMobile={isMobile}\n hasNotifications={\n isMobile && (hasNotifications || hasMenuNotifications)\n }\n hasBurger={hasSideBar}\n burgerTooltip={\n isMobile\n ? undefined\n : state?.navCollapsed\n ? 'Expand'\n : 'Collapse'\n }\n onBurgerClick={onBurgerClick}\n />\n ) : (\n <LayoutHeaderDark\n className={Styles.top}\n logo={logo}\n profile={isMobile ? undefined : profile}\n center={top}\n rightText={isMobile ? undefined : extraText}\n right={\n <Fragment>\n {extraLinksTop}\n {!isMobile && extraLinks}\n </Fragment>\n }\n isMobile={isMobile}\n hasNotifications={hasNotifications || hasMenuNotifications}\n onBurgerClick={onBurgerClick}\n hasBurger={isMobile}\n navigationMainItems={navigationMainItems}\n navigationOverflowItems={navigationOverflowItems}\n />\n ))}\n\n {hasSideBar && (\n <NotificationsContextProvider>\n <LayoutSidebar\n className={Styles.side}\n mobile={breakpoint.isMobile}\n barExpanded={!state?.navCollapsed}\n onBarExpandChange={onBarExpandChange}\n submenusExpanded={state?.submenusExpanded}\n onSubmenuExpandChange={onSubmenuExpandChange}\n drawerOpened={mobileDrawerOpened}\n onDrawerOpenChange={setMobileDrawerOpened}\n top={sideTop}\n mainItems={sidebarNavItems}\n navigationComponent={context.NavigationComponent}\n bottom={\n isMobile ? (\n <Fragment>\n {profile}\n {extraLinks}\n {!!extraText && (\n <InternalSideNavigationTrigger\n id=\"--extra-text\"\n title={extraText}\n isActive={undefined}\n icon={undefined}\n iconActive={undefined}\n tag={undefined}\n className={undefined}\n />\n )}\n </Fragment>\n ) : undefined\n }\n />\n </NotificationsContextProvider>\n )}\n\n {view.isSequent && (\n <TitanLayoutHeaderObserved heightChange={updateIndicatorsHeight}>\n {header}\n </TitanLayoutHeaderObserved>\n )}\n {view.isAnvil1 ? (\n <LayoutContentAnvil1 header={header} minWidth={limitContentWidth}>\n {children}\n </LayoutContentAnvil1>\n ) : view.isLegacy ? (\n <LayoutContentLegacy minWidth={limitContentWidth}>\n {children}\n </LayoutContentLegacy>\n ) : (\n children\n )}\n </div>\n </LayoutPlacementContext.Provider>\n </LayoutContext.Provider>\n );\n}\n\nconst TitanLayoutHeaderObserved: FC<{\n children: ReactNode;\n heightChange?(value: number): void;\n}> = ({ children, heightChange }) => {\n const ref = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (ref.current) {\n const updatePosition = () => {\n if (ref.current && heightChange) {\n const pos = ref.current.getBoundingClientRect();\n heightChange(pos.height);\n }\n };\n\n const observer = new ResizeObserver(updatePosition);\n observer.observe(ref.current);\n\n updatePosition();\n return () => observer.disconnect();\n }\n }, [heightChange]);\n\n useEffect(() => {\n return () => {\n heightChange?.(0);\n };\n }, [heightChange]);\n return (\n <div ref={ref} className={Styles.contentHeader} data-cy=\"layout-content-header\">\n {children}\n </div>\n );\n};\nconst TitanLayoutHeader: FC<{ children: ReactNode }> = ({ children }) => {\n return (\n <div className={Styles.contentHeader} data-cy=\"layout-content-header\">\n {children}\n </div>\n );\n};\n\nconst LayoutContentAnvil1: FC<{\n children: ReactNode;\n header?: ReactNode;\n minWidth?: number;\n}> = ({ children, header, minWidth }) => {\n const innerContentStyles: CSSProperties = useMemo(\n () => ({\n ...(minWidth ? { minWidth: `${minWidth}px`, overflowX: 'auto' } : {}),\n }),\n [minWidth]\n );\n\n return (\n <Fragment>\n <TitanLayoutHeader>{header}</TitanLayoutHeader>\n <div\n className={classNames(Styles.content, { 'of-x-auto-i': !!minWidth })}\n data-cy=\"layout-content\"\n >\n <div\n className=\"position-relative d-f flex-grow-1 flex-basis-0 of-hidden\"\n style={innerContentStyles}\n >\n {children}\n </div>\n </div>\n </Fragment>\n );\n};\n\nconst LayoutContentLegacy: FC<{\n children: ReactNode;\n minWidth: number | undefined;\n}> = ({ children, minWidth }) => {\n const innerContentStyles: CSSProperties = useMemo(\n () => ({\n position: 'relative',\n minWidth: `${minWidth}px`,\n }),\n [minWidth]\n );\n\n return (\n <div className={minWidth ? 'of-x-auto flex-basis-0 flex-grow-1' : undefined}>\n <div style={minWidth ? innerContentStyles : undefined}>{children}</div>\n </div>\n );\n};\n\nexport const TitanLayout = Object.assign(TitanLayoutComponent, {\n Link: TitanLayoutLink,\n Trigger: TitanLayoutTrigger,\n});\n"],"names":["classNames","Fragment","useCallback","useEffect","useMemo","useRef","useState","DefaultNavLinkComponent","useTitanBreakpoint","LayoutContext","LayoutPlacementContext","LayoutHeader","LayoutHeaderDark","LayoutSidebar","InternalSideNavigationTrigger","useNotificationsState","TitanLayoutLink","TitanLayoutTrigger","Styles","defaultSidebarContext","styles","popoverContent","useAppearance","appearance","isLegacy","isAnvil1","isAnvil2","isSequent","TitanLayoutComponent","navVariant","id","children","contentOnly","navigationComponent","header","top","profile","state","logo","onStateChange","navigationMainItems","navigationOverflowItems","extraLinks","extraLinksTop","extraText","minContentWidth","sideTop","breakpoint","context","NavigationComponent","isTitanLayout","sidebar","view","mobileDrawerOpened","setMobileDrawerOpened","hasNotifications","NotificationsContextProvider","offsetTopStyles","setOffsetTopStyles","updateIndicatorsHeight","offset","isMobile","hasSideBar","length","hasTopBar","bodyClassName","document","body","classList","add","remove","onBurgerClick","e","navCollapsed","stopPropagation","onBarExpandChange","expanded","onSubmenuExpandChange","submenusExpanded","filter","i","sidebarNavItems","undefined","hasMenuNotifications","some","item","counter","tag","value","submenu","groups","group","links","link","limitContentWidth","width","contentStyles","display","flexDirection","minHeight","layoutClass","layoutLegacy","layoutAnvil1","layoutAnvil2","Provider","div","className","layout","layoutMobile","layoutDesktop","layoutTopLight","layoutTopNav","layoutNavSlim","layoutNavWide","style","topPlaceholder","variant","center","rightText","right","hasBurger","burgerTooltip","side","mobile","barExpanded","drawerOpened","onDrawerOpenChange","mainItems","bottom","title","isActive","icon","iconActive","TitanLayoutHeaderObserved","heightChange","LayoutContentAnvil1","minWidth","LayoutContentLegacy","ref","current","updatePosition","pos","getBoundingClientRect","height","observer","ResizeObserver","observe","disconnect","contentHeader","data-cy","TitanLayoutHeader","innerContentStyles","overflowX","content","position","TitanLayout","Object","assign","Link","Trigger"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/titan-layout/titan-layout.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport {\n CSSProperties,\n ComponentPropsWithoutRef,\n FC,\n Fragment,\n MouseEvent,\n ReactElement,\n ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { NavigationItemData } from '../../utils/navigation';\nimport { DefaultNavLinkComponent, NavLinkComponentProps } from '../../utils/navigation-context';\nimport { useTitanBreakpoint } from '../../utils/use-breakpoint';\nimport { TitanLayoutState } from './interface';\nimport {\n LayoutContext,\n LayoutPlacementContext,\n TitanLayoutContextType,\n TitanLayoutSidebarContextType,\n} from './layout-context';\nimport { LayoutHeader } from './layout-header';\nimport { LayoutHeaderDark } from './layout-header-dark';\nimport { TitanLayoutLogoProps } from './layout-logo';\nimport { LayoutSidebar } from './layout-sidebar';\nimport { InternalSideNavigationTrigger } from './layout-sidebar-links-internal';\nimport { useNotificationsState } from './notifications-context';\nimport { TitanLayoutLink, TitanLayoutTrigger } from './titan-layout-links';\nimport * as Styles from './titan-layout.module.less';\n\nexport type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & {\n /** layout appearance */\n appearance?: 'legacy' | 'anvil1' | 'anvil2';\n\n /** layout navigation variant (left by default) */\n navVariant?: 'left' | 'top';\n\n /** layout's content */\n children?: ReactNode;\n\n /** show only content without side and top bars */\n contentOnly?: boolean;\n\n /** component used for navigation */\n navigationComponent?: FC<NavLinkComponentProps>;\n\n /** data for main navigation links */\n navigationMainItems?: NavigationItemData[];\n\n /** data for overflow navigation links (used only with top variant) */\n navigationOverflowItems?: NavigationItemData[];\n\n /** logo props */\n logo?: TitanLayoutLogoProps;\n\n /** layout state */\n state?: TitanLayoutState;\n /** layout state change handler */\n onStateChange?: (state: TitanLayoutState) => void;\n\n /** content header content */\n header?: ReactElement;\n\n /** layout header content (center) */\n top?: ReactElement;\n\n /** top links for side navigation */\n sideTop?: ReactElement[];\n\n /**\n * profile element for layout\n * @see ProfileDropdown\n */\n profile?: ReactElement;\n\n /**\n * extra links for layout header\n * shown in side nav footer on mobile\n */\n extraLinks?: ReactElement;\n\n /**\n * fixed extra links for layout header\n * shown in header on mobile as well\n */\n extraLinksTop?: ReactElement;\n\n /**\n * text shown in layout's header\n * shown in side nav footer on mobile\n */\n extraText?: string;\n\n /**\n * minimal width set for content area\n * used for pages that aren't adopted to mobile\n */\n minContentWidth?: number;\n};\n\nconst defaultSidebarContext: TitanLayoutSidebarContextType = {\n styles: {\n popoverContent: {\n '--background-color-strong': '#24323C',\n 'color': 'var(--color-white)',\n } as CSSProperties,\n },\n};\n\nconst useAppearance = (appearance: TitanLayoutProps['appearance']) =>\n useMemo(() => {\n const isLegacy = appearance === 'legacy';\n const isAnvil1 = appearance === 'anvil1';\n const isAnvil2 = appearance === 'anvil2';\n\n return {\n isLegacy,\n isAnvil1,\n isAnvil2,\n isSequent: isLegacy || isAnvil2,\n };\n }, [appearance]);\n\nfunction TitanLayoutComponent({\n appearance = 'anvil2',\n navVariant = 'left',\n id,\n children,\n contentOnly,\n navigationComponent,\n header,\n top,\n profile,\n state,\n logo,\n onStateChange,\n navigationMainItems,\n navigationOverflowItems,\n extraLinks,\n extraLinksTop,\n extraText,\n minContentWidth,\n sideTop,\n}: TitanLayoutProps) {\n const breakpoint = useTitanBreakpoint();\n const context: TitanLayoutContextType = useMemo(\n () => ({\n NavigationComponent: navigationComponent ?? DefaultNavLinkComponent,\n breakpoint,\n isTitanLayout: true,\n sidebar: defaultSidebarContext,\n }),\n [navigationComponent, breakpoint]\n );\n const view = useAppearance(appearance);\n const [mobileDrawerOpened, setMobileDrawerOpened] = useState(false);\n const { hasNotifications, NotificationsContextProvider } = useNotificationsState();\n const [offsetTopStyles, setOffsetTopStyles] = useState<object>({});\n const updateIndicatorsHeight = useCallback((offset: number) => {\n setOffsetTopStyles({\n '--content-offset-top': `calc(var(--nav-offset-top) + ${offset}px)`,\n });\n }, []);\n\n const isMobile = breakpoint.isMobile;\n const hasSideBar =\n !contentOnly &&\n (navVariant === 'left' || (navVariant === 'top' && isMobile)) &&\n (!!navigationMainItems?.length || !!sideTop?.length);\n const hasTopBar = !contentOnly;\n\n useEffect(() => {\n if (view.isAnvil1) {\n const bodyClassName = 'of-hidden-i';\n document.body.classList.add(bodyClassName);\n return () => document.body.classList.remove(bodyClassName);\n }\n }, [view.isAnvil1]);\n\n const onBurgerClick = useCallback(\n (e: MouseEvent<never>) => {\n if (isMobile) {\n setMobileDrawerOpened(true);\n } else {\n onStateChange?.({ navCollapsed: !state?.navCollapsed });\n }\n\n e.stopPropagation();\n },\n [isMobile, state?.navCollapsed, onStateChange]\n );\n\n const onBarExpandChange = useCallback(\n (expanded: boolean) => {\n if (isMobile) {\n setMobileDrawerOpened(false);\n } else {\n onStateChange?.({ navCollapsed: !expanded });\n }\n },\n [onStateChange, isMobile]\n );\n const onSubmenuExpandChange = useCallback(\n (id: string, expanded: boolean) => {\n onStateChange?.({\n navCollapsed: state?.navCollapsed ?? false,\n submenusExpanded: [\n ...(state?.submenusExpanded ?? []).filter(i => i !== id),\n ...(expanded ? [id] : []),\n ],\n });\n },\n [state, onStateChange]\n );\n const sidebarNavItems = useMemo(() => {\n if (!hasSideBar) {\n return undefined;\n }\n\n if (navVariant === 'left') {\n return navigationMainItems;\n }\n\n return [...(navigationMainItems ?? []), ...(navigationOverflowItems ?? [])];\n }, [hasSideBar, navigationMainItems, navigationOverflowItems, navVariant]);\n\n const hasMenuNotifications = useMemo(() => {\n try {\n return (\n sidebarNavItems?.some(item => {\n if (item.counter || item.tag?.value) {\n return true;\n } else if (item.submenu) {\n return item.submenu.groups.some(group =>\n group.links.some(link => !!link.counter || !!link.tag?.value)\n );\n }\n return false;\n }) ?? false\n );\n } catch {\n return false;\n }\n }, [sidebarNavItems]);\n\n const limitContentWidth = useMemo(() => {\n if (view.isAnvil2 || !minContentWidth) {\n return undefined;\n }\n\n if (breakpoint.width < minContentWidth) {\n return minContentWidth;\n }\n }, [view, minContentWidth, breakpoint.width]);\n\n const contentStyles = useMemo(() => {\n if (view.isAnvil2) {\n return offsetTopStyles;\n }\n\n if (view.isLegacy) {\n return {\n ...(limitContentWidth\n ? { display: 'flex', flexDirection: 'column', minHeight: '100vh' }\n : {}),\n ...offsetTopStyles,\n };\n }\n }, [view, offsetTopStyles, limitContentWidth]);\n\n const layoutClass = view.isLegacy\n ? Styles.layoutLegacy\n : view.isAnvil1\n ? Styles.layoutAnvil1\n : Styles.layoutAnvil2;\n\n return (\n <LayoutContext.Provider value={context}>\n <LayoutPlacementContext.Provider value=\"unset\">\n <div\n id={id}\n className={classNames(\n Styles.layout,\n isMobile ? Styles.layoutMobile : Styles.layoutDesktop,\n hasTopBar &&\n (navVariant === 'left' || !top\n ? Styles.layoutTopLight\n : Styles.layoutTopNav),\n {\n [Styles.layoutNavSlim]: !isMobile && hasSideBar && state?.navCollapsed,\n [Styles.layoutNavWide]: !isMobile && hasSideBar && !state?.navCollapsed,\n },\n layoutClass\n )}\n style={contentStyles}\n >\n {view.isSequent && <div className={Styles.topPlaceholder} />}\n {hasTopBar &&\n (navVariant === 'left' ? (\n <LayoutHeader\n className={Styles.top}\n variant=\"light\"\n logo={logo}\n profile={isMobile ? undefined : profile}\n center={top}\n rightText={isMobile ? undefined : extraText}\n right={\n <Fragment>\n {extraLinksTop}\n {!isMobile && extraLinks}\n </Fragment>\n }\n isMobile={isMobile}\n hasNotifications={\n isMobile && (hasNotifications || hasMenuNotifications)\n }\n hasBurger={hasSideBar}\n burgerTooltip={\n isMobile\n ? undefined\n : state?.navCollapsed\n ? 'Expand'\n : 'Collapse'\n }\n onBurgerClick={onBurgerClick}\n />\n ) : (\n <LayoutHeaderDark\n className={Styles.top}\n logo={logo}\n profile={isMobile ? undefined : profile}\n center={top}\n rightText={isMobile ? undefined : extraText}\n right={\n <Fragment>\n {extraLinksTop}\n {!isMobile && extraLinks}\n </Fragment>\n }\n isMobile={isMobile}\n hasNotifications={hasNotifications || hasMenuNotifications}\n onBurgerClick={onBurgerClick}\n hasBurger={isMobile}\n navigationMainItems={navigationMainItems}\n navigationOverflowItems={navigationOverflowItems}\n />\n ))}\n\n {hasSideBar && (\n <NotificationsContextProvider>\n <LayoutSidebar\n className={Styles.side}\n mobile={breakpoint.isMobile}\n barExpanded={!state?.navCollapsed}\n onBarExpandChange={onBarExpandChange}\n submenusExpanded={state?.submenusExpanded}\n onSubmenuExpandChange={onSubmenuExpandChange}\n drawerOpened={mobileDrawerOpened}\n onDrawerOpenChange={setMobileDrawerOpened}\n top={sideTop}\n mainItems={sidebarNavItems}\n navigationComponent={context.NavigationComponent}\n bottom={\n isMobile ? (\n <Fragment>\n {profile}\n {extraLinks}\n {!!extraText && (\n <InternalSideNavigationTrigger\n id=\"--extra-text\"\n title={extraText}\n isActive={undefined}\n icon={undefined}\n iconActive={undefined}\n tag={undefined}\n className={undefined}\n />\n )}\n </Fragment>\n ) : undefined\n }\n />\n </NotificationsContextProvider>\n )}\n\n {view.isSequent && (\n <TitanLayoutHeaderObserved heightChange={updateIndicatorsHeight}>\n {header}\n </TitanLayoutHeaderObserved>\n )}\n {view.isAnvil1 ? (\n <LayoutContentAnvil1 header={header} minWidth={limitContentWidth}>\n {children}\n </LayoutContentAnvil1>\n ) : view.isLegacy ? (\n <LayoutContentLegacy minWidth={limitContentWidth}>\n {children}\n </LayoutContentLegacy>\n ) : (\n children\n )}\n </div>\n </LayoutPlacementContext.Provider>\n </LayoutContext.Provider>\n );\n}\n\nconst TitanLayoutHeaderObserved: FC<{\n children: ReactNode;\n heightChange?(value: number): void;\n}> = ({ children, heightChange }) => {\n const ref = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (ref.current) {\n const updatePosition = () => {\n if (ref.current && heightChange) {\n const pos = ref.current.getBoundingClientRect();\n heightChange(pos.height);\n }\n };\n\n const observer = new ResizeObserver(updatePosition);\n observer.observe(ref.current);\n\n updatePosition();\n return () => observer.disconnect();\n }\n }, [heightChange]);\n\n useEffect(() => {\n return () => {\n heightChange?.(0);\n };\n }, [heightChange]);\n return (\n <div ref={ref} className={Styles.contentHeader} data-cy=\"layout-content-header\">\n {children}\n </div>\n );\n};\nconst TitanLayoutHeader: FC<{ children: ReactNode }> = ({ children }) => {\n return (\n <div className={Styles.contentHeader} data-cy=\"layout-content-header\">\n {children}\n </div>\n );\n};\n\nconst LayoutContentAnvil1: FC<{\n children: ReactNode;\n header?: ReactNode;\n minWidth?: number;\n}> = ({ children, header, minWidth }) => {\n const innerContentStyles: CSSProperties = useMemo(\n () => ({\n ...(minWidth ? { minWidth: `${minWidth}px`, overflowX: 'auto' } : {}),\n }),\n [minWidth]\n );\n\n return (\n <Fragment>\n <TitanLayoutHeader>{header}</TitanLayoutHeader>\n <div\n className={classNames(Styles.content, { 'of-x-auto-i': !!minWidth })}\n data-cy=\"layout-content\"\n >\n <div\n className=\"position-relative d-f flex-grow-1 flex-basis-0 of-hidden\"\n style={innerContentStyles}\n >\n {children}\n </div>\n </div>\n </Fragment>\n );\n};\n\nconst LayoutContentLegacy: FC<{\n children: ReactNode;\n minWidth: number | undefined;\n}> = ({ children, minWidth }) => {\n const innerContentStyles: CSSProperties = useMemo(\n () => ({\n position: 'relative',\n minWidth: `${minWidth}px`,\n }),\n [minWidth]\n );\n\n return (\n <div className={minWidth ? 'of-x-auto flex-basis-0 flex-grow-1' : undefined}>\n <div style={minWidth ? innerContentStyles : undefined}>{children}</div>\n </div>\n );\n};\n\nexport const TitanLayout = Object.assign(TitanLayoutComponent, {\n Link: TitanLayoutLink,\n Trigger: TitanLayoutTrigger,\n});\n"],"names":["classNames","Fragment","useCallback","useEffect","useMemo","useRef","useState","DefaultNavLinkComponent","useTitanBreakpoint","LayoutContext","LayoutPlacementContext","LayoutHeader","LayoutHeaderDark","LayoutSidebar","InternalSideNavigationTrigger","useNotificationsState","TitanLayoutLink","TitanLayoutTrigger","Styles","defaultSidebarContext","styles","popoverContent","useAppearance","appearance","isLegacy","isAnvil1","isAnvil2","isSequent","TitanLayoutComponent","navVariant","id","children","contentOnly","navigationComponent","header","top","profile","state","logo","onStateChange","navigationMainItems","navigationOverflowItems","extraLinks","extraLinksTop","extraText","minContentWidth","sideTop","breakpoint","context","NavigationComponent","isTitanLayout","sidebar","view","mobileDrawerOpened","setMobileDrawerOpened","hasNotifications","NotificationsContextProvider","offsetTopStyles","setOffsetTopStyles","updateIndicatorsHeight","offset","isMobile","hasSideBar","length","hasTopBar","bodyClassName","document","body","classList","add","remove","onBurgerClick","e","navCollapsed","stopPropagation","onBarExpandChange","expanded","onSubmenuExpandChange","submenusExpanded","filter","i","sidebarNavItems","undefined","hasMenuNotifications","some","item","counter","tag","value","submenu","groups","group","links","link","limitContentWidth","width","contentStyles","display","flexDirection","minHeight","layoutClass","layoutLegacy","layoutAnvil1","layoutAnvil2","Provider","div","className","layout","layoutMobile","layoutDesktop","layoutTopLight","layoutTopNav","layoutNavSlim","layoutNavWide","style","topPlaceholder","variant","center","rightText","right","hasBurger","burgerTooltip","side","mobile","barExpanded","drawerOpened","onDrawerOpenChange","mainItems","bottom","title","isActive","icon","iconActive","TitanLayoutHeaderObserved","heightChange","LayoutContentAnvil1","minWidth","LayoutContentLegacy","ref","current","updatePosition","pos","getBoundingClientRect","height","observer","ResizeObserver","observe","disconnect","contentHeader","data-cy","TitanLayoutHeader","innerContentStyles","overflowX","content","position","TitanLayout","Object","assign","Link","Trigger"],"mappings":"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"}
|
|
@@ -12,8 +12,6 @@ export interface NavigationItemData extends NavigationLinkData {
|
|
|
12
12
|
className?: string;
|
|
13
13
|
/** optional submenu of link item */
|
|
14
14
|
submenu?: NavigationSubmenuData;
|
|
15
|
-
iconClassName?: never;
|
|
16
|
-
iconComponent?: never;
|
|
17
15
|
}
|
|
18
16
|
export interface NavigationLinkData {
|
|
19
17
|
/** link id */
|
|
@@ -32,6 +30,7 @@ export interface NavigationSubmenuData {
|
|
|
32
30
|
export interface NavigationSubmenuItemData extends NavigationLinkData {
|
|
33
31
|
/** item tag (optional) value. shown if it is set and true or greater than 0 */
|
|
34
32
|
counter?: CounterTagValue;
|
|
33
|
+
/** item tag (optional) value. shown if value is true or greater than 0 */
|
|
35
34
|
tag?: CounterTagData;
|
|
36
35
|
}
|
|
37
36
|
export interface NavigationSubmenuGroupData {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../src/utils/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhE,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC1D,yCAAyC;IACzC,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IAEnC,uCAAuC;IACvC,UAAU,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IAEzC,yEAAyE;IACzE,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,GAAG,CAAC,EAAE,cAAc,CAAC;IAErB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oCAAoC;IACpC,OAAO,CAAC,EAAE,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../src/utils/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhE,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC1D,yCAAyC;IACzC,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IAEnC,uCAAuC;IACvC,UAAU,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IAEzC,yEAAyE;IACzE,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,GAAG,CAAC,EAAE,cAAc,CAAC;IAErB,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oCAAoC;IACpC,OAAO,CAAC,EAAE,qBAAqB,CAAC;CACnC;AAED,MAAM,WAAW,kBAAkB;IAC/B,cAAc;IACd,EAAE,EAAE,MAAM,CAAC;IAEX,gBAAgB;IAChB,EAAE,EAAE,MAAM,CAAC;IAEX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IAEd,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC;CACxD;AAED,MAAM,WAAW,qBAAqB;IAClC,qBAAqB;IACrB,MAAM,EAAE,0BAA0B,EAAE,CAAC;CACxC;AAED,MAAM,WAAW,yBAA0B,SAAQ,kBAAkB;IACjE,+EAA+E;IAC/E,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,0EAA0E;IAC1E,GAAG,CAAC,EAAE,cAAc,CAAC;CACxB;AAED,MAAM,WAAW,0BAA0B;IACvC,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IAEd,0BAA0B;IAC1B,KAAK,EAAE,yBAAyB,EAAE,CAAC;CACtC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/navigation.ts"],"sourcesContent":["import { IconProps } from '@servicetitan/anvil2';\nimport { CounterTagData, CounterTagValue } from './counter-tag';\n\nexport interface NavigationItemData extends NavigationLinkData {\n /** svg icon (anvil2) of inactive item */\n icon: IconProps['svg'] | undefined;\n\n /** svg icon (anvil2) of active item */\n iconActive: IconProps['svg'] | undefined;\n\n /** item tag (optional). shown if it is set and true or greater than 0 */\n counter?: CounterTagValue;\n tag?: CounterTagData;\n\n /** class name of link item */\n className?: string;\n\n /** optional submenu of link item */\n submenu?: NavigationSubmenuData;\n
|
|
1
|
+
{"version":3,"sources":["../../src/utils/navigation.ts"],"sourcesContent":["import { IconProps } from '@servicetitan/anvil2';\nimport { CounterTagData, CounterTagValue } from './counter-tag';\n\nexport interface NavigationItemData extends NavigationLinkData {\n /** svg icon (anvil2) of inactive item */\n icon: IconProps['svg'] | undefined;\n\n /** svg icon (anvil2) of active item */\n iconActive: IconProps['svg'] | undefined;\n\n /** item tag (optional). shown if it is set and true or greater than 0 */\n counter?: CounterTagValue;\n tag?: CounterTagData;\n\n /** class name of link item */\n className?: string;\n\n /** optional submenu of link item */\n submenu?: NavigationSubmenuData;\n}\n\nexport interface NavigationLinkData {\n /** link id */\n id: string;\n\n /** link href */\n to: string;\n\n /** link title */\n title: string;\n\n /** callback to return active state. By default, it compares link href with current pathname */\n isActive?: boolean | ((pathname: string) => boolean);\n}\n\nexport interface NavigationSubmenuData {\n /** submenu groups */\n groups: NavigationSubmenuGroupData[];\n}\n\nexport interface NavigationSubmenuItemData extends NavigationLinkData {\n /** item tag (optional) value. shown if it is set and true or greater than 0 */\n counter?: CounterTagValue;\n /** item tag (optional) value. shown if value is true or greater than 0 */\n tag?: CounterTagData;\n}\n\nexport interface NavigationSubmenuGroupData {\n /** submenu group title */\n title: string;\n\n /** submenu group links */\n links: NavigationSubmenuItemData[];\n}\n"],"names":[],"mappings":"AA+CA,WAMC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/navigation",
|
|
3
|
-
"version": "13.0.0
|
|
3
|
+
"version": "13.0.0",
|
|
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": "b47aa7d5873f1684381f957022e3ebae0caeeedb"
|
|
46
46
|
}
|
|
@@ -12,16 +12,21 @@ export interface TitanLayoutLinkWrapperProps {
|
|
|
12
12
|
export type TitanLayoutLinkWrapper = FC<TitanLayoutLinkWrapperProps>;
|
|
13
13
|
|
|
14
14
|
export interface TitanLayoutState {
|
|
15
|
+
/** flags if side nav is collapsed */
|
|
15
16
|
navCollapsed: boolean;
|
|
17
|
+
/** ;ost expanded submenu ids */
|
|
16
18
|
submenusExpanded?: string[];
|
|
17
19
|
}
|
|
18
20
|
|
|
19
21
|
export interface TitanLayoutLinkExtraProps {
|
|
22
|
+
/** link's title should be shown (for extra links we show icon only by default) */
|
|
20
23
|
showTitle?: boolean;
|
|
24
|
+
/** link is flashing */
|
|
21
25
|
flashing?: boolean;
|
|
22
26
|
}
|
|
23
27
|
|
|
24
28
|
export interface TitanLayoutLinkSideProps {
|
|
29
|
+
/** counter value used only for side links */
|
|
25
30
|
counter: CounterTagValue;
|
|
26
31
|
}
|
|
27
32
|
|
|
@@ -57,16 +57,48 @@ export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
|
|
|
57
57
|
/** logo props */
|
|
58
58
|
logo?: TitanLayoutLogoProps;
|
|
59
59
|
|
|
60
|
+
/** layout state */
|
|
60
61
|
state?: TitanLayoutState;
|
|
62
|
+
/** layout state change handler */
|
|
61
63
|
onStateChange?: (state: TitanLayoutState) => void;
|
|
62
64
|
|
|
65
|
+
/** content header content */
|
|
63
66
|
header?: ReactElement;
|
|
67
|
+
|
|
68
|
+
/** layout header content (center) */
|
|
64
69
|
top?: ReactElement;
|
|
70
|
+
|
|
71
|
+
/** top links for side navigation */
|
|
65
72
|
sideTop?: ReactElement[];
|
|
73
|
+
|
|
74
|
+
/**
|
|
75
|
+
* profile element for layout
|
|
76
|
+
* @see ProfileDropdown
|
|
77
|
+
*/
|
|
66
78
|
profile?: ReactElement;
|
|
79
|
+
|
|
80
|
+
/**
|
|
81
|
+
* extra links for layout header
|
|
82
|
+
* shown in side nav footer on mobile
|
|
83
|
+
*/
|
|
67
84
|
extraLinks?: ReactElement;
|
|
85
|
+
|
|
86
|
+
/**
|
|
87
|
+
* fixed extra links for layout header
|
|
88
|
+
* shown in header on mobile as well
|
|
89
|
+
*/
|
|
68
90
|
extraLinksTop?: ReactElement;
|
|
91
|
+
|
|
92
|
+
/**
|
|
93
|
+
* text shown in layout's header
|
|
94
|
+
* shown in side nav footer on mobile
|
|
95
|
+
*/
|
|
69
96
|
extraText?: string;
|
|
97
|
+
|
|
98
|
+
/**
|
|
99
|
+
* minimal width set for content area
|
|
100
|
+
* used for pages that aren't adopted to mobile
|
|
101
|
+
*/
|
|
70
102
|
minContentWidth?: number;
|
|
71
103
|
};
|
|
72
104
|
|
package/src/utils/navigation.ts
CHANGED
|
@@ -17,9 +17,6 @@ export interface NavigationItemData extends NavigationLinkData {
|
|
|
17
17
|
|
|
18
18
|
/** optional submenu of link item */
|
|
19
19
|
submenu?: NavigationSubmenuData;
|
|
20
|
-
|
|
21
|
-
iconClassName?: never;
|
|
22
|
-
iconComponent?: never;
|
|
23
20
|
}
|
|
24
21
|
|
|
25
22
|
export interface NavigationLinkData {
|
|
@@ -44,6 +41,7 @@ export interface NavigationSubmenuData {
|
|
|
44
41
|
export interface NavigationSubmenuItemData extends NavigationLinkData {
|
|
45
42
|
/** item tag (optional) value. shown if it is set and true or greater than 0 */
|
|
46
43
|
counter?: CounterTagValue;
|
|
44
|
+
/** item tag (optional) value. shown if value is true or greater than 0 */
|
|
47
45
|
tag?: CounterTagData;
|
|
48
46
|
}
|
|
49
47
|
|