@servicetitan/navigation 12.0.2 → 13.0.0-canary.256.299dd08.0

package/dist/components/titan-layout/layout-sidebar-links.d.ts

@@ -1,6 +1,6 @@
-import { TitanLayoutSidebarLinkProps, TitanLayoutSidebarTriggerProps } from './interface';
+import { TitanLayoutLinkProps, TitanLayoutTriggerProps } from './interface';
 /** Side Navigation menu link */
-export declare function TitanLayoutSidebarLink({ wrapper, ...props }: TitanLayoutSidebarLinkProps): import("react/jsx-runtime").JSX.Element;
+export declare function LayoutSidebarLink({ id, to, title, isActive, icon, iconActive, counter, tag, className, tooltip, wrapper, extra, side, ...rest }: TitanLayoutLinkProps): import("react/jsx-runtime").JSX.Element;
 /** Side Navigation menu trigger */
-export declare function TitanLayoutSidebarTrigger({ wrapper, onMobileClick, onClick, ...props }: TitanLayoutSidebarTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare function LayoutSidebarTrigger({ id, title, isActive, icon, iconActive, counter, tag, className, tooltip, wrapper, extra, side, ...rest }: TitanLayoutTriggerProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=layout-sidebar-links.d.ts.map

package/dist/components/titan-layout/layout-sidebar-links.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout-sidebar-links.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar-links.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,2BAA2B,EAAE,8BAA8B,EAAE,MAAM,aAAa,CAAC;AAgB1F,gCAAgC;AAChC,wBAAgB,sBAAsB,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,2BAA2B,2CAqBxF;AAED,mCAAmC;AACnC,wBAAgB,yBAAyB,CAAC,EACtC,OAAO,EACP,aAAa,EACb,OAAO,EACP,GAAG,KAAK,EACX,EAAE,8BAA8B,2CAuBhC"}
+{"version":3,"file":"layout-sidebar-links.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar-links.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAqB5E,gCAAgC;AAChC,wBAAgB,iBAAiB,CAAC,EAC9B,EAAE,EACF,EAAE,EACF,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,UAAU,EACV,OAAO,EACP,GAAG,EACH,SAAS,EAET,OAAO,EACP,OAAO,EACP,KAAK,EACL,IAAI,EACJ,GAAG,IAAI,EACV,EAAE,oBAAoB,2CAgCtB;AAED,mCAAmC;AACnC,wBAAgB,oBAAoB,CAAC,EACjC,EAAE,EACF,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,UAAU,EACV,OAAO,EACP,GAAG,EACH,SAAS,EAET,OAAO,EACP,OAAO,EACP,KAAK,EACL,IAAI,EACJ,GAAG,IAAI,EACV,EAAE,uBAAuB,2CA4BzB"}

package/dist/components/titan-layout/layout-sidebar-links.js

@@ -3,43 +3,56 @@ import { getCounterTag } from '../../utils/side-nav';
 import { useTitanLayoutContext } from './layout-context';
 import { InternalSideNavigationLink, InternalSideNavigationTrigger } from './layout-sidebar-links-internal';
 import { useNotificationsContext } from './notifications-context';
-const WrappedLink = ({ children, wrapper: WrapperComponent })=>{
+const WrappedLink = ({ children, isMobile, wrapper: WrapperComponent })=>{
     const { sidebar } = useTitanLayoutContext();
     return /*#__PURE__*/ _jsx(WrapperComponent, {
+        isMobile: isMobile,
         context: sidebar,
         children: children
     });
 };
-/** Side Navigation menu link */ export function TitanLayoutSidebarLink({ wrapper, ...props }) {
+/** Side Navigation menu link */ export function LayoutSidebarLink({ id, to, title, isActive, icon, iconActive, counter, tag, className, tooltip, wrapper, extra, side, ...rest }) {
     const { NavigationComponent, breakpoint: { isMobile } } = useTitanLayoutContext();
     const { onNotificationsUpdate } = useNotificationsContext();
-    const tag = getCounterTag(props.counter, props.tag);
-    onNotificationsUpdate(props.id, !!tag);
+    var _side_counter;
+    const tagData = getCounterTag((_side_counter = side === null || side === void 0 ? void 0 : side.counter) !== null && _side_counter !== void 0 ? _side_counter : counter, tag);
+    onNotificationsUpdate(id, !!tagData);
     const element = /*#__PURE__*/ _jsx(InternalSideNavigationLink, {
-        ...props,
-        navigationComponent: NavigationComponent,
-        submenuExpanded: undefined,
-        dataPrefix: "navigation-item",
-        tag: tag
+        id: id,
+        to: to,
+        title: title,
+        isActive: isActive,
+        icon: icon,
+        iconActive: iconActive,
+        tag: tagData,
+        className: className,
+        ...rest,
+        navigationComponent: NavigationComponent
     });
-    return wrapper && !isMobile ? /*#__PURE__*/ _jsx(WrappedLink, {
+    return wrapper ? /*#__PURE__*/ _jsx(WrappedLink, {
+        isMobile: isMobile,
         wrapper: wrapper,
         children: element
     }) : element;
 }
-/** Side Navigation menu trigger */ export function TitanLayoutSidebarTrigger({ wrapper, onMobileClick, onClick, ...props }) {
+/** Side Navigation menu trigger */ export function LayoutSidebarTrigger({ id, title, isActive, icon, iconActive, counter, tag, className, tooltip, wrapper, extra, side, ...rest }) {
     const { breakpoint: { isMobile } } = useTitanLayoutContext();
     const { onNotificationsUpdate } = useNotificationsContext();
-    const tag = getCounterTag(props.counter, props.tag);
-    onNotificationsUpdate(props.id, !!tag);
+    var _side_counter;
+    const tagData = getCounterTag((_side_counter = side === null || side === void 0 ? void 0 : side.counter) !== null && _side_counter !== void 0 ? _side_counter : counter, tag);
+    onNotificationsUpdate(id, !!tagData);
     const element = /*#__PURE__*/ _jsx(InternalSideNavigationTrigger, {
-        ...props,
-        submenuExpanded: undefined,
-        dataPrefix: "navigation-trigger",
-        tag: tag,
-        onClick: isMobile && !!onMobileClick ? onMobileClick : onClick
+        id: id,
+        title: title,
+        isActive: isActive,
+        icon: icon,
+        iconActive: iconActive,
+        tag: tagData,
+        className: className,
+        ...rest
     });
-    return wrapper && (!isMobile || !onMobileClick) ? /*#__PURE__*/ _jsx(WrappedLink, {
+    return wrapper ? /*#__PURE__*/ _jsx(WrappedLink, {
+        isMobile: isMobile,
         wrapper: wrapper,
         children: element
     }) : element;

package/dist/components/titan-layout/layout-sidebar-links.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/titan-layout/layout-sidebar-links.tsx"],"sourcesContent":["import { FC, ReactElement } from 'react';\nimport { getCounterTag } from '../../utils/side-nav';\nimport { TitanLayoutSidebarLinkProps, TitanLayoutSidebarTriggerProps } from './interface';\nimport { useTitanLayoutContext } from './layout-context';\nimport {\n    InternalSideNavigationLink,\n    InternalSideNavigationTrigger,\n} from './layout-sidebar-links-internal';\nimport { useNotificationsContext } from './notifications-context';\n\nconst WrappedLink: FC<{\n    children: ReactElement<any>;\n    wrapper: NonNullable<TitanLayoutSidebarLinkProps['wrapper']>;\n}> = ({ children, wrapper: WrapperComponent }) => {\n    const { sidebar } = useTitanLayoutContext();\n    return <WrapperComponent context={sidebar}>{children}</WrapperComponent>;\n};\n\n/** Side Navigation menu link */\nexport function TitanLayoutSidebarLink({ wrapper, ...props }: TitanLayoutSidebarLinkProps) {\n    const {\n        NavigationComponent,\n        breakpoint: { isMobile },\n    } = useTitanLayoutContext();\n    const { onNotificationsUpdate } = useNotificationsContext();\n    const tag = getCounterTag(props.counter, props.tag);\n\n    onNotificationsUpdate(props.id, !!tag);\n\n    const element = (\n        <InternalSideNavigationLink\n            {...props}\n            navigationComponent={NavigationComponent}\n            submenuExpanded={undefined}\n            dataPrefix=\"navigation-item\"\n            tag={tag}\n        />\n    );\n\n    return wrapper && !isMobile ? <WrappedLink wrapper={wrapper}>{element}</WrappedLink> : element;\n}\n\n/** Side Navigation menu trigger */\nexport function TitanLayoutSidebarTrigger({\n    wrapper,\n    onMobileClick,\n    onClick,\n    ...props\n}: TitanLayoutSidebarTriggerProps) {\n    const {\n        breakpoint: { isMobile },\n    } = useTitanLayoutContext();\n    const { onNotificationsUpdate } = useNotificationsContext();\n    const tag = getCounterTag(props.counter, props.tag);\n\n    onNotificationsUpdate(props.id, !!tag);\n\n    const element = (\n        <InternalSideNavigationTrigger\n            {...props}\n            submenuExpanded={undefined}\n            dataPrefix=\"navigation-trigger\"\n            tag={tag}\n            onClick={isMobile && !!onMobileClick ? onMobileClick : onClick}\n        />\n    );\n    return wrapper && (!isMobile || !onMobileClick) ? (\n        <WrappedLink wrapper={wrapper}>{element}</WrappedLink>\n    ) : (\n        element\n    );\n}\n"],"names":["getCounterTag","useTitanLayoutContext","InternalSideNavigationLink","InternalSideNavigationTrigger","useNotificationsContext","WrappedLink","children","wrapper","WrapperComponent","sidebar","context","TitanLayoutSidebarLink","props","NavigationComponent","breakpoint","isMobile","onNotificationsUpdate","tag","counter","id","element","navigationComponent","submenuExpanded","undefined","dataPrefix","TitanLayoutSidebarTrigger","onMobileClick","onClick"],"mappings":";AACA,SAASA,aAAa,QAAQ,uBAAuB;AAErD,SAASC,qBAAqB,QAAQ,mBAAmB;AACzD,SACIC,0BAA0B,EAC1BC,6BAA6B,QAC1B,kCAAkC;AACzC,SAASC,uBAAuB,QAAQ,0BAA0B;AAElE,MAAMC,cAGD,CAAC,EAAEC,QAAQ,EAAEC,SAASC,gBAAgB,EAAE;IACzC,MAAM,EAAEC,OAAO,EAAE,GAAGR;IACpB,qBAAO,KAACO;QAAiBE,SAASD;kBAAUH;;AAChD;AAEA,8BAA8B,GAC9B,OAAO,SAASK,uBAAuB,EAAEJ,OAAO,EAAE,GAAGK,OAAoC;IACrF,MAAM,EACFC,mBAAmB,EACnBC,YAAY,EAAEC,QAAQ,EAAE,EAC3B,GAAGd;IACJ,MAAM,EAAEe,qBAAqB,EAAE,GAAGZ;IAClC,MAAMa,MAAMjB,cAAcY,MAAMM,OAAO,EAAEN,MAAMK,GAAG;IAElDD,sBAAsBJ,MAAMO,EAAE,EAAE,CAAC,CAACF;IAElC,MAAMG,wBACF,KAAClB;QACI,GAAGU,KAAK;QACTS,qBAAqBR;QACrBS,iBAAiBC;QACjBC,YAAW;QACXP,KAAKA;;IAIb,OAAOV,WAAW,CAACQ,yBAAW,KAACV;QAAYE,SAASA;kBAAUa;SAAyBA;AAC3F;AAEA,iCAAiC,GACjC,OAAO,SAASK,0BAA0B,EACtClB,OAAO,EACPmB,aAAa,EACbC,OAAO,EACP,GAAGf,OAC0B;IAC7B,MAAM,EACFE,YAAY,EAAEC,QAAQ,EAAE,EAC3B,GAAGd;IACJ,MAAM,EAAEe,qBAAqB,EAAE,GAAGZ;IAClC,MAAMa,MAAMjB,cAAcY,MAAMM,OAAO,EAAEN,MAAMK,GAAG;IAElDD,sBAAsBJ,MAAMO,EAAE,EAAE,CAAC,CAACF;IAElC,MAAMG,wBACF,KAACjB;QACI,GAAGS,KAAK;QACTU,iBAAiBC;QACjBC,YAAW;QACXP,KAAKA;QACLU,SAASZ,YAAY,CAAC,CAACW,gBAAgBA,gBAAgBC;;IAG/D,OAAOpB,WAAY,CAAA,CAACQ,YAAY,CAACW,aAAY,kBACzC,KAACrB;QAAYE,SAASA;kBAAUa;SAEhCA;AAER"}
+{"version":3,"sources":["../../../src/components/titan-layout/layout-sidebar-links.tsx"],"sourcesContent":["import { FC, ReactElement } from 'react';\nimport { getCounterTag } from '../../utils/side-nav';\nimport { TitanLayoutLinkProps, TitanLayoutTriggerProps } from './interface';\nimport { useTitanLayoutContext } from './layout-context';\nimport {\n    InternalSideNavigationLink,\n    InternalSideNavigationTrigger,\n} from './layout-sidebar-links-internal';\nimport { useNotificationsContext } from './notifications-context';\n\nconst WrappedLink: FC<{\n    children: ReactElement<any>;\n    wrapper: NonNullable<TitanLayoutLinkProps['wrapper']>;\n    isMobile: boolean;\n}> = ({ children, isMobile, wrapper: WrapperComponent }) => {\n    const { sidebar } = useTitanLayoutContext();\n    return (\n        <WrapperComponent isMobile={isMobile} context={sidebar}>\n            {children}\n        </WrapperComponent>\n    );\n};\n\n/** Side Navigation menu link */\nexport function LayoutSidebarLink({\n    id,\n    to,\n    title,\n    isActive,\n    icon,\n    iconActive,\n    counter,\n    tag,\n    className,\n\n    tooltip,\n    wrapper,\n    extra,\n    side,\n    ...rest\n}: TitanLayoutLinkProps) {\n    const {\n        NavigationComponent,\n        breakpoint: { isMobile },\n    } = useTitanLayoutContext();\n    const { onNotificationsUpdate } = useNotificationsContext();\n    const tagData = getCounterTag(side?.counter ?? counter, tag);\n\n    onNotificationsUpdate(id, !!tagData);\n\n    const element = (\n        <InternalSideNavigationLink\n            id={id}\n            to={to}\n            title={title}\n            isActive={isActive}\n            icon={icon}\n            iconActive={iconActive}\n            tag={tagData}\n            className={className}\n            {...rest}\n            navigationComponent={NavigationComponent}\n        />\n    );\n\n    return wrapper ? (\n        <WrappedLink isMobile={isMobile} wrapper={wrapper}>\n            {element}\n        </WrappedLink>\n    ) : (\n        element\n    );\n}\n\n/** Side Navigation menu trigger */\nexport function LayoutSidebarTrigger({\n    id,\n    title,\n    isActive,\n    icon,\n    iconActive,\n    counter,\n    tag,\n    className,\n\n    tooltip,\n    wrapper,\n    extra,\n    side,\n    ...rest\n}: TitanLayoutTriggerProps) {\n    const {\n        breakpoint: { isMobile },\n    } = useTitanLayoutContext();\n    const { onNotificationsUpdate } = useNotificationsContext();\n    const tagData = getCounterTag(side?.counter ?? counter, tag);\n\n    onNotificationsUpdate(id, !!tagData);\n\n    const element = (\n        <InternalSideNavigationTrigger\n            id={id}\n            title={title}\n            isActive={isActive}\n            icon={icon}\n            iconActive={iconActive}\n            tag={tagData}\n            className={className}\n            {...rest}\n        />\n    );\n    return wrapper ? (\n        <WrappedLink isMobile={isMobile} wrapper={wrapper}>\n            {element}\n        </WrappedLink>\n    ) : (\n        element\n    );\n}\n"],"names":["getCounterTag","useTitanLayoutContext","InternalSideNavigationLink","InternalSideNavigationTrigger","useNotificationsContext","WrappedLink","children","isMobile","wrapper","WrapperComponent","sidebar","context","LayoutSidebarLink","id","to","title","isActive","icon","iconActive","counter","tag","className","tooltip","extra","side","rest","NavigationComponent","breakpoint","onNotificationsUpdate","tagData","element","navigationComponent","LayoutSidebarTrigger"],"mappings":";AACA,SAASA,aAAa,QAAQ,uBAAuB;AAErD,SAASC,qBAAqB,QAAQ,mBAAmB;AACzD,SACIC,0BAA0B,EAC1BC,6BAA6B,QAC1B,kCAAkC;AACzC,SAASC,uBAAuB,QAAQ,0BAA0B;AAElE,MAAMC,cAID,CAAC,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,SAASC,gBAAgB,EAAE;IACnD,MAAM,EAAEC,OAAO,EAAE,GAAGT;IACpB,qBACI,KAACQ;QAAiBF,UAAUA;QAAUI,SAASD;kBAC1CJ;;AAGb;AAEA,8BAA8B,GAC9B,OAAO,SAASM,kBAAkB,EAC9BC,EAAE,EACFC,EAAE,EACFC,KAAK,EACLC,QAAQ,EACRC,IAAI,EACJC,UAAU,EACVC,OAAO,EACPC,GAAG,EACHC,SAAS,EAETC,OAAO,EACPd,OAAO,EACPe,KAAK,EACLC,IAAI,EACJ,GAAGC,MACgB;IACnB,MAAM,EACFC,mBAAmB,EACnBC,YAAY,EAAEpB,QAAQ,EAAE,EAC3B,GAAGN;IACJ,MAAM,EAAE2B,qBAAqB,EAAE,GAAGxB;QACJoB;IAA9B,MAAMK,UAAU7B,cAAcwB,CAAAA,gBAAAA,iBAAAA,2BAAAA,KAAML,OAAO,cAAbK,2BAAAA,gBAAiBL,SAASC;IAExDQ,sBAAsBf,IAAI,CAAC,CAACgB;IAE5B,MAAMC,wBACF,KAAC5B;QACGW,IAAIA;QACJC,IAAIA;QACJC,OAAOA;QACPC,UAAUA;QACVC,MAAMA;QACNC,YAAYA;QACZE,KAAKS;QACLR,WAAWA;QACV,GAAGI,IAAI;QACRM,qBAAqBL;;IAI7B,OAAOlB,wBACH,KAACH;QAAYE,UAAUA;QAAUC,SAASA;kBACrCsB;SAGLA;AAER;AAEA,iCAAiC,GACjC,OAAO,SAASE,qBAAqB,EACjCnB,EAAE,EACFE,KAAK,EACLC,QAAQ,EACRC,IAAI,EACJC,UAAU,EACVC,OAAO,EACPC,GAAG,EACHC,SAAS,EAETC,OAAO,EACPd,OAAO,EACPe,KAAK,EACLC,IAAI,EACJ,GAAGC,MACmB;IACtB,MAAM,EACFE,YAAY,EAAEpB,QAAQ,EAAE,EAC3B,GAAGN;IACJ,MAAM,EAAE2B,qBAAqB,EAAE,GAAGxB;QACJoB;IAA9B,MAAMK,UAAU7B,cAAcwB,CAAAA,gBAAAA,iBAAAA,2BAAAA,KAAML,OAAO,cAAbK,2BAAAA,gBAAiBL,SAASC;IAExDQ,sBAAsBf,IAAI,CAAC,CAACgB;IAE5B,MAAMC,wBACF,KAAC3B;QACGU,IAAIA;QACJE,OAAOA;QACPC,UAAUA;QACVC,MAAMA;QACNC,YAAYA;QACZE,KAAKS;QACLR,WAAWA;QACV,GAAGI,IAAI;;IAGhB,OAAOjB,wBACH,KAACH;QAAYE,UAAUA;QAAUC,SAASA;kBACrCsB;SAGLA;AAER"}

package/dist/components/titan-layout/layout-sidebar.d.ts

@@ -7,7 +7,7 @@ export interface LayoutSidebarProps {
     bottom?: ReactElement;
     mainItems?: NavigationItemData[];
     barExpanded: boolean;
-    submenuExpanded: string | undefined;
+    submenusExpanded: string[] | undefined;
     drawerOpened: boolean;
     mobile: boolean;
     navigationComponent: FC<NavLinkComponentProps>;

package/dist/components/titan-layout/layout-sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"names":[],"mappings":"AAKA,OAAO,EAEH,EAAE,EAGF,YAAY,EAGf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,kBAAkB,EAAyB,MAAM,wBAAwB,CAAC;AACnF,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAavE,MAAM,WAAW,kBAAkB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,YAAY,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACjC,WAAW,EAAE,OAAO,CAAC;IACrB,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,mBAAmB,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAC/C,iBAAiB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3C,kBAAkB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAC5C,qBAAqB,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC9D;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA4FhD,CAAC"}
+{"version":3,"file":"layout-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"names":[],"mappings":"AAKA,OAAO,EAEH,EAAE,EAGF,YAAY,EAGf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,kBAAkB,EAAyB,MAAM,wBAAwB,CAAC;AACnF,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAavE,MAAM,WAAW,kBAAkB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,GAAG,CAAC,EAAE,YAAY,EAAE,CAAC;IACrB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACjC,WAAW,EAAE,OAAO,CAAC;IACrB,gBAAgB,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IACvC,YAAY,EAAE,OAAO,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,mBAAmB,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAC/C,iBAAiB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3C,kBAAkB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAC5C,qBAAqB,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;CAC9D;AAED,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAmGhD,CAAC"}

package/dist/components/titan-layout/layout-sidebar.js

@@ -10,7 +10,7 @@ import { LayoutPlacementContext, useTitanLayoutContext } from './layout-context'
 import { InternalSideNavigationGroup, InternalSideNavigationGroupLink, InternalSideNavigationLink } from './layout-sidebar-links-internal';
 import * as Styles from './layout-sidebar.module.less';
 import { withTooltip } from './with-tooltip';
-export const LayoutSidebar = ({ className, mobile, barExpanded, submenuExpanded, drawerOpened, onBarExpandChange, onSubmenuExpandChange, onDrawerOpenChange, mainItems, top, bottom, navigationComponent })=>{
+export const LayoutSidebar = ({ className, mobile, barExpanded, submenusExpanded, drawerOpened, onBarExpandChange, onSubmenuExpandChange, onDrawerOpenChange, mainItems, top, bottom, navigationComponent })=>{
     const closeDrawer = ()=>{
         if (mobile) {
             onDrawerOpenChange === null || onDrawerOpenChange === void 0 ? void 0 : onDrawerOpenChange(false);
@@ -49,16 +49,21 @@ export const LayoutSidebar = ({ className, mobile, barExpanded, submenuExpanded,
                             /*#__PURE__*/ _jsx("div", {
                                 "data-cy": "navigation-items",
                                 children: mainItems === null || mainItems === void 0 ? void 0 : mainItems.map((item)=>item.submenu ? /*#__PURE__*/ _jsx(SideNavigationGroupItem, {
+                                        item: item,
                                         barExpanded: mobile ? drawerOpened : barExpanded,
-                                        submenuExpanded: !!item.id && submenuExpanded === item.id,
+                                        submenuExpanded: !!item.id && !!(submenusExpanded === null || submenusExpanded === void 0 ? void 0 : submenusExpanded.includes(item.id)),
                                         onSubmenuExpand: onSubmenuExpandChange,
-                                        navigationComponent: navigationComponent,
-                                        ...item
+                                        navigationComponent: navigationComponent
                                     }, item.id) : /*#__PURE__*/ _jsx(InternalSideNavigationLink, {
-                                        submenuExpanded: undefined,
-                                        navigationComponent: navigationComponent,
-                                        ...item,
-                                        tag: getSubmenuGroupTag(item.submenu, getCounterTag(item.counter, item.tag))
+                                        id: item.id,
+                                        to: item.to,
+                                        title: item.title,
+                                        isActive: item.isActive,
+                                        icon: item.icon,
+                                        iconActive: item.iconActive,
+                                        className: item.className,
+                                        tag: getSubmenuGroupTag(item.submenu, getCounterTag(item.counter, item.tag)),
+                                        navigationComponent: navigationComponent
                                     }, item.id))
                             }),
                             !!bottom && /*#__PURE__*/ _jsx(SidebarBottom, {
@@ -111,31 +116,38 @@ LayoutSidebar.displayName = 'LayoutSidebar';
     }), appearance === 'expand' ? 'Expand Menu' : appearance === 'collapse' ? 'Collapse Menu' : undefined, {
         placement: 'right'
     });
-/** Side Navigation menu item */ const SideNavigationGroupItem = ({ onSubmenuExpand, barExpanded, submenuExpanded, ...props })=>{
-    var _props_submenu, _props_submenu1;
+/** Side Navigation menu item */ const SideNavigationGroupItem = ({ item, onSubmenuExpand, barExpanded, submenuExpanded, navigationComponent })=>{
+    var _item_submenu, _item_submenu1;
     const onExpandToggle = useCallback((e)=>{
         e.preventDefault();
         e.stopPropagation();
-        if (props.id) {
-            onSubmenuExpand === null || onSubmenuExpand === void 0 ? void 0 : onSubmenuExpand(props.id, !submenuExpanded);
+        if (item.id) {
+            onSubmenuExpand === null || onSubmenuExpand === void 0 ? void 0 : onSubmenuExpand(item.id, !submenuExpanded);
         }
     }, [
-        props.id,
+        item.id,
         submenuExpanded,
         onSubmenuExpand
     ]);
     const { sidebar: { styles: { popoverContent } } } = useTitanLayoutContext();
-    const tag = getSubmenuGroupTag(props.submenu, getCounterTag(props.counter, props.tag));
-    var _props_submenu_groups, _props_submenu_groups1;
+    const tag = getSubmenuGroupTag(item.submenu, getCounterTag(item.counter, item.tag));
+    var _item_submenu_groups, _item_submenu_groups1;
     return barExpanded ? /*#__PURE__*/ _jsx(InternalSideNavigationGroup, {
-        ...props,
+        id: item.id,
+        to: item.to,
+        title: item.title,
+        isActive: item.isActive,
+        icon: item.icon,
+        iconActive: item.iconActive,
+        className: item.className,
+        tag: tag,
         submenuExpanded: submenuExpanded,
         onExpandToggle: onExpandToggle,
-        tag: tag,
+        navigationComponent: navigationComponent,
         children: /*#__PURE__*/ _jsx(SideNavigationGroupContent, {
-            parentId: props.id,
-            groups: (_props_submenu_groups = (_props_submenu = props.submenu) === null || _props_submenu === void 0 ? void 0 : _props_submenu.groups) !== null && _props_submenu_groups !== void 0 ? _props_submenu_groups : [],
-            navigationComponent: props.navigationComponent
+            parentId: item.id,
+            groups: (_item_submenu_groups = (_item_submenu = item.submenu) === null || _item_submenu === void 0 ? void 0 : _item_submenu.groups) !== null && _item_submenu_groups !== void 0 ? _item_submenu_groups : [],
+            navigationComponent: navigationComponent
         })
     }) : /*#__PURE__*/ _jsxs(Popover, {
         placement: "right-start",
@@ -146,9 +158,15 @@ LayoutSidebar.displayName = 'LayoutSidebar';
                 children: (triggerProps)=>/*#__PURE__*/ _jsx("div", {
                         ...triggerProps,
                         children: /*#__PURE__*/ _jsx(InternalSideNavigationLink, {
-                            ...props,
-                            submenuExpanded: undefined,
-                            tag: tag
+                            id: item.id,
+                            to: item.to,
+                            title: item.title,
+                            isActive: item.isActive,
+                            icon: item.icon,
+                            iconActive: item.iconActive,
+                            className: item.className,
+                            tag: tag,
+                            navigationComponent: navigationComponent
                         })
                     })
             }),
@@ -163,12 +181,12 @@ LayoutSidebar.displayName = 'LayoutSidebar';
                             el: "h4",
                             size: "small",
                             className: "c-white m-b-half-i m-t-1",
-                            children: props.title
+                            children: item.title
                         }),
                         /*#__PURE__*/ _jsx(SideNavigationGroupContent, {
-                            parentId: props.id,
-                            groups: (_props_submenu_groups1 = (_props_submenu1 = props.submenu) === null || _props_submenu1 === void 0 ? void 0 : _props_submenu1.groups) !== null && _props_submenu_groups1 !== void 0 ? _props_submenu_groups1 : [],
-                            navigationComponent: props.navigationComponent
+                            parentId: item.id,
+                            groups: (_item_submenu_groups1 = (_item_submenu1 = item.submenu) === null || _item_submenu1 === void 0 ? void 0 : _item_submenu1.groups) !== null && _item_submenu_groups1 !== void 0 ? _item_submenu_groups1 : [],
+                            navigationComponent: navigationComponent
                         })
                     ]
                 })
@@ -193,7 +211,12 @@ const SideNavigationGroupContent = ({ groups, parentId, navigationComponent })=>
                 children: title
             }, `:group:${parentId}:${index}:title`));
             out.push(...group.links.map((link, index)=>/*#__PURE__*/ _jsx(InternalSideNavigationGroupLink, {
-                    ...link,
+                    id: link.id,
+                    to: link.to,
+                    title: link.title,
+                    isActive: link.isActive,
+                    className: undefined,
+                    tag: getCounterTag(link.counter, link.tag),
                     parentId: parentId,
                     navigationComponent: navigationComponent
                 }, `:${parentId}:${link.id}:${index}`)));

package/dist/components/titan-layout/layout-sidebar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"sourcesContent":["import { Icon, Popover, Text, ThemeProvider } from '@servicetitan/anvil2';\nimport SvgClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';\nimport SvgCollapse from '@servicetitan/anvil2/assets/icons/st/gnav_menu_collapse.svg';\nimport SvgExpand from '@servicetitan/anvil2/assets/icons/st/gnav_menu_expand.svg';\nimport classNames from 'classnames';\nimport {\n    Children,\n    FC,\n    Fragment,\n    MouseEvent,\n    ReactElement,\n    isValidElement,\n    useCallback,\n} from 'react';\nimport { NavigationItemData, NavigationSubmenuData } from '../../utils/navigation';\nimport { NavLinkComponentProps } from '../../utils/navigation-context';\nimport { getCounterTag, getSubmenuGroupTag } from '../../utils/side-nav';\nimport { NavigationComponentProps } from './interface-internal';\nimport { LayoutPlacementContext, useTitanLayoutContext } from './layout-context';\nimport {\n    InternalSideNavigationGroup,\n    InternalSideNavigationGroupLink,\n    InternalSideNavigationLink,\n} from './layout-sidebar-links-internal';\nimport * as Styles from './layout-sidebar.module.less';\n\nimport { withTooltip } from './with-tooltip';\n\nexport interface LayoutSidebarProps {\n    className?: string;\n    top?: ReactElement[];\n    bottom?: ReactElement;\n    mainItems?: NavigationItemData[];\n    barExpanded: boolean;\n    submenuExpanded: string | undefined;\n    drawerOpened: boolean;\n    mobile: boolean;\n    navigationComponent: FC<NavLinkComponentProps>;\n    onBarExpandChange(expanded: boolean): void;\n    onDrawerOpenChange(expanded: boolean): void;\n    onSubmenuExpandChange(id: string, expanded: boolean): void;\n}\n\nexport const LayoutSidebar: FC<LayoutSidebarProps> = ({\n    className,\n    mobile,\n    barExpanded,\n    submenuExpanded,\n    drawerOpened,\n    onBarExpandChange,\n    onSubmenuExpandChange,\n    onDrawerOpenChange,\n    mainItems,\n    top,\n    bottom,\n    navigationComponent,\n}) => {\n    const closeDrawer = () => {\n        if (mobile) {\n            onDrawerOpenChange?.(false);\n        }\n    };\n\n    return (\n        <LayoutPlacementContext.Provider value=\"side\">\n            {mobile && drawerOpened && (\n                <div className={Styles.navDrawerBackdrop} onClick={closeDrawer} />\n            )}\n            <div\n                className={classNames(\n                    Styles.nav,\n                    mobile && Styles.navDrawer,\n                    mobile && drawerOpened && Styles.navDrawerOpened,\n                    !mobile && (barExpanded ? Styles.navWide : Styles.navSlim),\n                    className\n                )}\n                data-cy=\"side-navigation\"\n                onClick={closeDrawer}\n            >\n                <ThemeProvider mode=\"dark\" className={Styles.navMain}>\n                    {mobile && (\n                        <div className={Styles.navCloseWrapper}>\n                            <div\n                                className={Styles.navClose}\n                                onClick={() => onBarExpandChange(false)}\n                            >\n                                <Icon svg={SvgClose} size=\"large\" />\n                            </div>\n                        </div>\n                    )}\n                    {!!top?.length && <SidebarTop>{top}</SidebarTop>}\n\n                    <div data-cy=\"navigation-items\">\n                        {mainItems?.map(item =>\n                            item.submenu ? (\n                                <SideNavigationGroupItem\n                                    key={item.id}\n                                    barExpanded={mobile ? drawerOpened : barExpanded}\n                                    submenuExpanded={!!item.id && submenuExpanded === item.id}\n                                    onSubmenuExpand={onSubmenuExpandChange}\n                                    navigationComponent={navigationComponent}\n                                    {...item}\n                                />\n                            ) : (\n                                <InternalSideNavigationLink\n                                    key={item.id}\n                                    submenuExpanded={undefined}\n                                    navigationComponent={navigationComponent}\n                                    {...item}\n                                    tag={getSubmenuGroupTag(\n                                        item.submenu,\n                                        getCounterTag(item.counter, item.tag)\n                                    )}\n                                />\n                            )\n                        )}\n                    </div>\n\n                    {!!bottom && <SidebarBottom>{bottom}</SidebarBottom>}\n                </ThemeProvider>\n\n                {!mobile && (\n                    <div className={Styles.navFooter}>\n                        <div className={Styles.divider} />\n                        <div className={Styles.toggleWrapper}>\n                            <SideNavigationOptionsToggle\n                                appearance={barExpanded ? 'collapse-button' : 'expand'}\n                                onExpandedChange={() => onBarExpandChange(!barExpanded)}\n                            />\n                        </div>\n                    </div>\n                )}\n            </div>\n        </LayoutPlacementContext.Provider>\n    );\n};\nLayoutSidebar.displayName = 'LayoutSidebar';\n\n/** Side Navigation options toggle */\nconst SideNavigationOptionsToggle: FC<{\n    appearance: 'expand' | 'collapse' | 'collapse-button';\n    onExpandedChange?(expanded: boolean): void;\n}> = ({ appearance, onExpandedChange }) =>\n    withTooltip(\n        <div\n            data-cy=\"navigation-left-options\"\n            data-pendo=\"navigation-left-options\"\n            className={classNames(Styles.toggle)}\n            onClick={() => onExpandedChange?.(appearance === 'expand')}\n        >\n            <div className={Styles.toggleContent}>\n                <div className={Styles.toggleIconWrapper}>\n                    <Icon\n                        className={Styles.toggleIcon}\n                        svg={appearance === 'expand' ? SvgExpand : SvgCollapse}\n                    />\n                </div>\n\n                {appearance === 'collapse-button' && (\n                    <span className={Styles.toggleText}>Collapse Menu</span>\n                )}\n            </div>\n        </div>,\n        appearance === 'expand'\n            ? 'Expand Menu'\n            : appearance === 'collapse'\n              ? 'Collapse Menu'\n              : undefined,\n        { placement: 'right' }\n    );\n\n/** Side Navigation menu item */\nconst SideNavigationGroupItem: FC<\n    NavigationItemData & {\n        navigationComponent: FC<NavLinkComponentProps>;\n        barExpanded: boolean;\n        submenuExpanded: boolean;\n        onSubmenuExpand: undefined | ((id: string, expanded: boolean) => void);\n    }\n> = ({ onSubmenuExpand, barExpanded, submenuExpanded, ...props }) => {\n    const onExpandToggle = useCallback(\n        (e: MouseEvent<never>) => {\n            e.preventDefault();\n            e.stopPropagation();\n\n            if (props.id) {\n                onSubmenuExpand?.(props.id, !submenuExpanded);\n            }\n        },\n        [props.id, submenuExpanded, onSubmenuExpand]\n    );\n    const {\n        sidebar: {\n            styles: { popoverContent },\n        },\n    } = useTitanLayoutContext();\n\n    const tag = getSubmenuGroupTag(props.submenu, getCounterTag(props.counter, props.tag));\n\n    return barExpanded ? (\n        <InternalSideNavigationGroup\n            {...props}\n            submenuExpanded={submenuExpanded}\n            onExpandToggle={onExpandToggle}\n            tag={tag}\n        >\n            <SideNavigationGroupContent\n                parentId={props.id}\n                groups={props.submenu?.groups ?? []}\n                navigationComponent={props.navigationComponent}\n            />\n        </InternalSideNavigationGroup>\n    ) : (\n        <Popover placement=\"right-start\" openOnHover delay={500}>\n            <Popover.Trigger>\n                {(triggerProps: any) => (\n                    <div {...triggerProps}>\n                        <InternalSideNavigationLink\n                            {...props}\n                            submenuExpanded={undefined}\n                            tag={tag}\n                        />\n                    </div>\n                )}\n            </Popover.Trigger>\n            <Popover.Content style={popoverContent} className=\"z-global-nav-i\">\n                <div className={Styles.submenuPopover}>\n                    <Text\n                        variant=\"headline\"\n                        el=\"h4\"\n                        size=\"small\"\n                        className=\"c-white m-b-half-i m-t-1\"\n                    >\n                        {props.title}\n                    </Text>\n                    <SideNavigationGroupContent\n                        parentId={props.id}\n                        groups={props.submenu?.groups ?? []}\n                        navigationComponent={props.navigationComponent}\n                    />\n                </div>\n            </Popover.Content>\n        </Popover>\n    );\n};\nconst SideNavigationGroupContent: FC<\n    NavigationSubmenuData & NavigationComponentProps & { parentId: string }\n> = ({ groups, parentId, navigationComponent }) => {\n    return (\n        <Fragment>\n            {groups.reduce((out, group, index) => {\n                if (!group.links.length) {\n                    return out;\n                }\n\n                const title = group.title?.trim() ?? '';\n                /* eslint-disable react/no-array-index-key */\n                out.push(\n                    <Text\n                        key={`:group:${parentId}:${index}:title`}\n                        variant=\"eyebrow\"\n                        className={classNames(Styles.submenuGroupHeader, {\n                            [Styles.submenuGroupHeaderEmpty]: !title,\n                        })}\n                    >\n                        {title}\n                    </Text>\n                );\n                out.push(\n                    ...group.links.map((link, index) => (\n                        <InternalSideNavigationGroupLink\n                            key={`:${parentId}:${link.id}:${index}`}\n                            {...link}\n                            parentId={parentId}\n                            navigationComponent={navigationComponent}\n                        />\n                    ))\n                );\n                /* eslint-enable react/no-array-index-key */\n\n                return out;\n            }, [] as ReactElement[])}\n        </Fragment>\n    );\n};\n\nfunction SidebarTop({ children }: any) {\n    const list = Children.map(children, child => {\n        return child && isValidElement(child) ? child : null;\n    });\n    return list?.length ? (\n        <ThemeProvider mode=\"dark\" className={Styles.navTop} data-cy=\"navigation-items-top\">\n            {list}\n            <div className={Styles.divider} />\n        </ThemeProvider>\n    ) : null;\n}\n\nfunction SidebarBottom({ children }: any) {\n    return (\n        <ThemeProvider mode=\"dark\" className={Styles.navBottom} data-cy=\"navigation-items-bottom\">\n            <div className={Styles.divider} />\n            {children}\n        </ThemeProvider>\n    );\n}\n"],"names":["Icon","Popover","Text","ThemeProvider","SvgClose","SvgCollapse","SvgExpand","classNames","Children","Fragment","isValidElement","useCallback","getCounterTag","getSubmenuGroupTag","LayoutPlacementContext","useTitanLayoutContext","InternalSideNavigationGroup","InternalSideNavigationGroupLink","InternalSideNavigationLink","Styles","withTooltip","LayoutSidebar","className","mobile","barExpanded","submenuExpanded","drawerOpened","onBarExpandChange","onSubmenuExpandChange","onDrawerOpenChange","mainItems","top","bottom","navigationComponent","closeDrawer","Provider","value","div","navDrawerBackdrop","onClick","nav","navDrawer","navDrawerOpened","navWide","navSlim","data-cy","mode","navMain","navCloseWrapper","navClose","svg","size","length","SidebarTop","map","item","submenu","SideNavigationGroupItem","id","onSubmenuExpand","undefined","tag","counter","SidebarBottom","navFooter","divider","toggleWrapper","SideNavigationOptionsToggle","appearance","onExpandedChange","displayName","data-pendo","toggle","toggleContent","toggleIconWrapper","toggleIcon","span","toggleText","placement","props","onExpandToggle","e","preventDefault","stopPropagation","sidebar","styles","popoverContent","SideNavigationGroupContent","parentId","groups","openOnHover","delay","Trigger","triggerProps","Content","style","submenuPopover","variant","el","title","reduce","out","group","index","links","trim","push","submenuGroupHeader","submenuGroupHeaderEmpty","link","children","list","child","navTop","navBottom"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/titan-layout/layout-sidebar.tsx"],"sourcesContent":["import { Icon, Popover, Text, ThemeProvider } from '@servicetitan/anvil2';\nimport SvgClose from '@servicetitan/anvil2/assets/icons/material/round/close.svg';\nimport SvgCollapse from '@servicetitan/anvil2/assets/icons/st/gnav_menu_collapse.svg';\nimport SvgExpand from '@servicetitan/anvil2/assets/icons/st/gnav_menu_expand.svg';\nimport classNames from 'classnames';\nimport {\n    Children,\n    FC,\n    Fragment,\n    MouseEvent,\n    ReactElement,\n    isValidElement,\n    useCallback,\n} from 'react';\nimport { NavigationItemData, NavigationSubmenuData } from '../../utils/navigation';\nimport { NavLinkComponentProps } from '../../utils/navigation-context';\nimport { getCounterTag, getSubmenuGroupTag } from '../../utils/side-nav';\nimport { NavigationComponentProps } from './interface-internal';\nimport { LayoutPlacementContext, useTitanLayoutContext } from './layout-context';\nimport {\n    InternalSideNavigationGroup,\n    InternalSideNavigationGroupLink,\n    InternalSideNavigationLink,\n} from './layout-sidebar-links-internal';\nimport * as Styles from './layout-sidebar.module.less';\n\nimport { withTooltip } from './with-tooltip';\n\nexport interface LayoutSidebarProps {\n    className?: string;\n    top?: ReactElement[];\n    bottom?: ReactElement;\n    mainItems?: NavigationItemData[];\n    barExpanded: boolean;\n    submenusExpanded: string[] | undefined;\n    drawerOpened: boolean;\n    mobile: boolean;\n    navigationComponent: FC<NavLinkComponentProps>;\n    onBarExpandChange(expanded: boolean): void;\n    onDrawerOpenChange(expanded: boolean): void;\n    onSubmenuExpandChange(id: string, expanded: boolean): void;\n}\n\nexport const LayoutSidebar: FC<LayoutSidebarProps> = ({\n    className,\n    mobile,\n    barExpanded,\n    submenusExpanded,\n    drawerOpened,\n    onBarExpandChange,\n    onSubmenuExpandChange,\n    onDrawerOpenChange,\n    mainItems,\n    top,\n    bottom,\n    navigationComponent,\n}) => {\n    const closeDrawer = () => {\n        if (mobile) {\n            onDrawerOpenChange?.(false);\n        }\n    };\n\n    return (\n        <LayoutPlacementContext.Provider value=\"side\">\n            {mobile && drawerOpened && (\n                <div className={Styles.navDrawerBackdrop} onClick={closeDrawer} />\n            )}\n            <div\n                className={classNames(\n                    Styles.nav,\n                    mobile && Styles.navDrawer,\n                    mobile && drawerOpened && Styles.navDrawerOpened,\n                    !mobile && (barExpanded ? Styles.navWide : Styles.navSlim),\n                    className\n                )}\n                data-cy=\"side-navigation\"\n                onClick={closeDrawer}\n            >\n                <ThemeProvider mode=\"dark\" className={Styles.navMain}>\n                    {mobile && (\n                        <div className={Styles.navCloseWrapper}>\n                            <div\n                                className={Styles.navClose}\n                                onClick={() => onBarExpandChange(false)}\n                            >\n                                <Icon svg={SvgClose} size=\"large\" />\n                            </div>\n                        </div>\n                    )}\n                    {!!top?.length && <SidebarTop>{top}</SidebarTop>}\n\n                    <div data-cy=\"navigation-items\">\n                        {mainItems?.map(item =>\n                            item.submenu ? (\n                                <SideNavigationGroupItem\n                                    key={item.id}\n                                    item={item}\n                                    barExpanded={mobile ? drawerOpened : barExpanded}\n                                    submenuExpanded={\n                                        !!item.id && !!submenusExpanded?.includes(item.id)\n                                    }\n                                    onSubmenuExpand={onSubmenuExpandChange}\n                                    navigationComponent={navigationComponent}\n                                />\n                            ) : (\n                                <InternalSideNavigationLink\n                                    key={item.id}\n                                    id={item.id}\n                                    to={item.to}\n                                    title={item.title}\n                                    isActive={item.isActive}\n                                    icon={item.icon}\n                                    iconActive={item.iconActive}\n                                    className={item.className}\n                                    tag={getSubmenuGroupTag(\n                                        item.submenu,\n                                        getCounterTag(item.counter, item.tag)\n                                    )}\n                                    navigationComponent={navigationComponent}\n                                />\n                            )\n                        )}\n                    </div>\n\n                    {!!bottom && <SidebarBottom>{bottom}</SidebarBottom>}\n                </ThemeProvider>\n\n                {!mobile && (\n                    <div className={Styles.navFooter}>\n                        <div className={Styles.divider} />\n                        <div className={Styles.toggleWrapper}>\n                            <SideNavigationOptionsToggle\n                                appearance={barExpanded ? 'collapse-button' : 'expand'}\n                                onExpandedChange={() => onBarExpandChange(!barExpanded)}\n                            />\n                        </div>\n                    </div>\n                )}\n            </div>\n        </LayoutPlacementContext.Provider>\n    );\n};\nLayoutSidebar.displayName = 'LayoutSidebar';\n\n/** Side Navigation options toggle */\nconst SideNavigationOptionsToggle: FC<{\n    appearance: 'expand' | 'collapse' | 'collapse-button';\n    onExpandedChange?(expanded: boolean): void;\n}> = ({ appearance, onExpandedChange }) =>\n    withTooltip(\n        <div\n            data-cy=\"navigation-left-options\"\n            data-pendo=\"navigation-left-options\"\n            className={classNames(Styles.toggle)}\n            onClick={() => onExpandedChange?.(appearance === 'expand')}\n        >\n            <div className={Styles.toggleContent}>\n                <div className={Styles.toggleIconWrapper}>\n                    <Icon\n                        className={Styles.toggleIcon}\n                        svg={appearance === 'expand' ? SvgExpand : SvgCollapse}\n                    />\n                </div>\n\n                {appearance === 'collapse-button' && (\n                    <span className={Styles.toggleText}>Collapse Menu</span>\n                )}\n            </div>\n        </div>,\n        appearance === 'expand'\n            ? 'Expand Menu'\n            : appearance === 'collapse'\n              ? 'Collapse Menu'\n              : undefined,\n        { placement: 'right' }\n    );\n\n/** Side Navigation menu item */\nconst SideNavigationGroupItem: FC<{\n    item: NavigationItemData;\n    navigationComponent: FC<NavLinkComponentProps>;\n    barExpanded: boolean;\n    submenuExpanded: boolean;\n    onSubmenuExpand: undefined | ((id: string, expanded: boolean) => void);\n}> = ({ item, onSubmenuExpand, barExpanded, submenuExpanded, navigationComponent }) => {\n    const onExpandToggle = useCallback(\n        (e: MouseEvent<never>) => {\n            e.preventDefault();\n            e.stopPropagation();\n\n            if (item.id) {\n                onSubmenuExpand?.(item.id, !submenuExpanded);\n            }\n        },\n        [item.id, submenuExpanded, onSubmenuExpand]\n    );\n    const {\n        sidebar: {\n            styles: { popoverContent },\n        },\n    } = useTitanLayoutContext();\n\n    const tag = getSubmenuGroupTag(item.submenu, getCounterTag(item.counter, item.tag));\n\n    return barExpanded ? (\n        <InternalSideNavigationGroup\n            id={item.id}\n            to={item.to}\n            title={item.title}\n            isActive={item.isActive}\n            icon={item.icon}\n            iconActive={item.iconActive}\n            className={item.className}\n            tag={tag}\n            submenuExpanded={submenuExpanded}\n            onExpandToggle={onExpandToggle}\n            navigationComponent={navigationComponent}\n        >\n            <SideNavigationGroupContent\n                parentId={item.id}\n                groups={item.submenu?.groups ?? []}\n                navigationComponent={navigationComponent}\n            />\n        </InternalSideNavigationGroup>\n    ) : (\n        <Popover placement=\"right-start\" openOnHover delay={500}>\n            <Popover.Trigger>\n                {(triggerProps: any) => (\n                    <div {...triggerProps}>\n                        <InternalSideNavigationLink\n                            id={item.id}\n                            to={item.to}\n                            title={item.title}\n                            isActive={item.isActive}\n                            icon={item.icon}\n                            iconActive={item.iconActive}\n                            className={item.className}\n                            tag={tag}\n                            navigationComponent={navigationComponent}\n                        />\n                    </div>\n                )}\n            </Popover.Trigger>\n            <Popover.Content style={popoverContent} className=\"z-global-nav-i\">\n                <div className={Styles.submenuPopover}>\n                    <Text\n                        variant=\"headline\"\n                        el=\"h4\"\n                        size=\"small\"\n                        className=\"c-white m-b-half-i m-t-1\"\n                    >\n                        {item.title}\n                    </Text>\n                    <SideNavigationGroupContent\n                        parentId={item.id}\n                        groups={item.submenu?.groups ?? []}\n                        navigationComponent={navigationComponent}\n                    />\n                </div>\n            </Popover.Content>\n        </Popover>\n    );\n};\nconst SideNavigationGroupContent: FC<\n    NavigationSubmenuData & NavigationComponentProps & { parentId: string }\n> = ({ groups, parentId, navigationComponent }) => {\n    return (\n        <Fragment>\n            {groups.reduce((out, group, index) => {\n                if (!group.links.length) {\n                    return out;\n                }\n\n                const title = group.title?.trim() ?? '';\n                /* eslint-disable react/no-array-index-key */\n                out.push(\n                    <Text\n                        key={`:group:${parentId}:${index}:title`}\n                        variant=\"eyebrow\"\n                        className={classNames(Styles.submenuGroupHeader, {\n                            [Styles.submenuGroupHeaderEmpty]: !title,\n                        })}\n                    >\n                        {title}\n                    </Text>\n                );\n                out.push(\n                    ...group.links.map((link, index) => (\n                        <InternalSideNavigationGroupLink\n                            key={`:${parentId}:${link.id}:${index}`}\n                            id={link.id}\n                            to={link.to}\n                            title={link.title}\n                            isActive={link.isActive}\n                            className={undefined}\n                            tag={getCounterTag(link.counter, link.tag)}\n                            parentId={parentId}\n                            navigationComponent={navigationComponent}\n                        />\n                    ))\n                );\n                /* eslint-enable react/no-array-index-key */\n\n                return out;\n            }, [] as ReactElement[])}\n        </Fragment>\n    );\n};\n\nfunction SidebarTop({ children }: any) {\n    const list = Children.map(children, child => {\n        return child && isValidElement(child) ? child : null;\n    });\n    return list?.length ? (\n        <ThemeProvider mode=\"dark\" className={Styles.navTop} data-cy=\"navigation-items-top\">\n            {list}\n            <div className={Styles.divider} />\n        </ThemeProvider>\n    ) : null;\n}\n\nfunction SidebarBottom({ children }: any) {\n    return (\n        <ThemeProvider mode=\"dark\" className={Styles.navBottom} data-cy=\"navigation-items-bottom\">\n            <div className={Styles.divider} />\n            {children}\n        </ThemeProvider>\n    );\n}\n"],"names":["Icon","Popover","Text","ThemeProvider","SvgClose","SvgCollapse","SvgExpand","classNames","Children","Fragment","isValidElement","useCallback","getCounterTag","getSubmenuGroupTag","LayoutPlacementContext","useTitanLayoutContext","InternalSideNavigationGroup","InternalSideNavigationGroupLink","InternalSideNavigationLink","Styles","withTooltip","LayoutSidebar","className","mobile","barExpanded","submenusExpanded","drawerOpened","onBarExpandChange","onSubmenuExpandChange","onDrawerOpenChange","mainItems","top","bottom","navigationComponent","closeDrawer","Provider","value","div","navDrawerBackdrop","onClick","nav","navDrawer","navDrawerOpened","navWide","navSlim","data-cy","mode","navMain","navCloseWrapper","navClose","svg","size","length","SidebarTop","map","item","submenu","SideNavigationGroupItem","submenuExpanded","id","includes","onSubmenuExpand","to","title","isActive","icon","iconActive","tag","counter","SidebarBottom","navFooter","divider","toggleWrapper","SideNavigationOptionsToggle","appearance","onExpandedChange","displayName","data-pendo","toggle","toggleContent","toggleIconWrapper","toggleIcon","span","toggleText","undefined","placement","onExpandToggle","e","preventDefault","stopPropagation","sidebar","styles","popoverContent","SideNavigationGroupContent","parentId","groups","openOnHover","delay","Trigger","triggerProps","Content","style","submenuPopover","variant","el","reduce","out","group","index","links","trim","push","submenuGroupHeader","submenuGroupHeaderEmpty","link","children","list","child","navTop","navBottom"],"mappings":"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"}

package/dist/components/titan-layout/layout-sidebar.module.less

@@ -17,7 +17,6 @@
 
 // mobile version
 .nav-drawer {
-    // display: none;
     position: fixed;
     max-width: 400px;
     width: 0;
@@ -65,6 +64,24 @@
             margin-bottom: @spacing-half;
         }
     }
+
+    .nav-group-item {
+        .nav-item {
+            margin-right: 36px;
+
+            &.nav-item-active {
+                margin-right: @spacing-0;
+
+                .nav-item-icon-wrapper {
+                    padding-right: 40px;
+                }
+            }
+        }
+
+        .nav-item-group-toggle-wrapper {
+            right: @spacing-0;
+        }
+    }
 }
 
 .nav-drawer-backdrop {
@@ -184,19 +201,38 @@
     }
 
     .nav-top .divider {
-        margin-top: @spacing-1;
+        margin-top: @spacing-half;
         margin-bottom: @spacing-1;
     }
 
     .nav-main {
         padding-top: @spacing-1;
     }
+
+    .nav-group-item {
+        .nav-item {
+            margin-right: 44px;
+
+            &.nav-item-active {
+                margin-right: @spacing-1;
+
+                .nav-item-icon-wrapper {
+                    padding-right: 40px;
+                }
+            }
+        }
+
+        .nav-item-group-toggle-wrapper {
+            right: @spacing-1;
+        }
+    }
 }
 
 .nav-drawer,
 .nav-wide {
     .nav-item {
         flex-direction: row;
+        margin-bottom: @spacing-half;
 
         .nav-item-icon-wrapper {
             flex: 1;
@@ -355,26 +391,6 @@
         min-height: 12px !important;
     }
 
-    .nav-item-group-toggle-wrapper {
-        position: relative;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        .nav-item-group-toggle[data-anv][data-anv] {
-            color: inherit;
-            font-weight: @font-weight-semibold;
-        }
-
-        .nav-item-group-toggle-click {
-            position: absolute;
-            left: -@spacing-2;
-            right: -@spacing-half;
-            top: -@spacing-1;
-            bottom: -@spacing-1;
-        }
-    }
-
     .nav-icon[data-anv][data-anv] {
         height: 24px;
         width: 24px;
@@ -397,6 +413,42 @@
 .nav-group-wrapper {
     .nav-group-item {
         position: relative;
+
+        .nav-item {
+            .nav-item-counter[data-anv][data-anv] {
+                margin-right: @spacing-0;
+            }
+        }
+
+        &:has(.nav-item-active) {
+            .nav-item-group-toggle-wrapper {
+                color: @text-color-active;
+            }
+        }
+    }
+
+    .nav-item-group-toggle-wrapper {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: @spacing-0;
+        color: @text-color;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .nav-item-group-toggle[data-anv][data-anv] {
+            color: inherit;
+            font-weight: @font-weight-semibold;
+        }
+
+        .nav-item-group-toggle-click {
+            position: absolute;
+            left: -@spacing-2;
+            right: -@spacing-half;
+            top: -@spacing-1;
+            bottom: -@spacing-1;
+        }
     }
 
     .submenu-wrapper:not(.submenu-wrapper-collapsed) {

package/dist/components/titan-layout/titan-layout-default.stories.d.ts

@@ -0,0 +1,16 @@
+import { LayoutContentArgs } from '../../test/titan-layout';
+declare const _default: {
+    title: string;
+    decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+    parameters: {};
+    argTypes: {};
+    args: LayoutContentArgs;
+};
+export default _default;
+export declare const ContentLegacy: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
+export declare const ContentAnvil1: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
+export declare const ContentAnvil2: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
+export declare const ExtraWithTitle: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
+export declare const ExtraWithFlashing: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
+export declare const ExtraWithTitleFlashing: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=titan-layout-default.stories.d.ts.map

package/dist/components/titan-layout/titan-layout-default.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"titan-layout-default.stories.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout-default.stories.tsx"],"names":[],"mappings":"AAkBA,OAAO,EACH,iBAAiB,EAIpB,MAAM,yBAAyB,CAAC;;;;;;;;AASjC,wBAWE;AAwRF,eAAO,MAAM,aAAa,GAAI,MAAM,iBAAiB,4CASpD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,MAAM,iBAAiB,4CAMpD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,MAAM,iBAAiB,4CAQpD,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,MAAM,iBAAiB,4CAyBrD,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CA0BxD,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,MAAM,iBAAiB,4CA0B7D,CAAC"}

package/dist/components/titan-layout/titan-layout-legacy.stories.d.ts

@@ -0,0 +1,10 @@
+declare const _default: {
+    title: string;
+    decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+    parameters: {};
+    argTypes: {};
+    args: import("../../test/titan-layout").LayoutContentArgs;
+};
+export default _default;
+export { ContentLegacy, ContentAnvil1, ContentAnvil2, ExtraWithTitle, ExtraWithFlashing, ExtraWithTitleFlashing, } from './titan-layout-default.stories';
+//# sourceMappingURL=titan-layout-legacy.stories.d.ts.map

package/dist/components/titan-layout/titan-layout-legacy.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"titan-layout-legacy.stories.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout-legacy.stories.tsx"],"names":[],"mappings":";;;;;;;AAGA,wBAWE;AAEF,OAAO,EACH,aAAa,EACb,aAAa,EACb,aAAa,EACb,cAAc,EACd,iBAAiB,EACjB,sBAAsB,GACzB,MAAM,gCAAgC,CAAC"}

package/dist/components/titan-layout/titan-layout-links.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { TitanLayoutLinkProps, TitanLayoutTriggerProps } from './interface';
+export declare const TitanLayoutLink: FC<TitanLayoutLinkProps>;
+export declare const TitanLayoutTrigger: FC<TitanLayoutTriggerProps>;
+//# sourceMappingURL=titan-layout-links.d.ts.map

package/dist/components/titan-layout/titan-layout-links.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"titan-layout-links.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout-links.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3B,OAAO,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAK5E,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAYpD,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAY1D,CAAC"}

package/dist/components/titan-layout/titan-layout-links.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTitanLayoutPlacementContext } from './layout-context';
+import { LayoutHeaderNavigationLink, LayoutHeaderNavigationTrigger } from './layout-header-links';
+import { LayoutSidebarLink, LayoutSidebarTrigger } from './layout-sidebar-links';
+export const TitanLayoutLink = (props)=>{
+    const placement = useTitanLayoutPlacementContext();
+    if (placement === 'top') {
+        return /*#__PURE__*/ _jsx(LayoutHeaderNavigationLink, {
+            ...props
+        });
+    }
+    if (placement === 'side') {
+        return /*#__PURE__*/ _jsx(LayoutSidebarLink, {
+            ...props
+        });
+    }
+    return null;
+};
+export const TitanLayoutTrigger = (props)=>{
+    const placement = useTitanLayoutPlacementContext();
+    if (placement === 'top') {
+        return /*#__PURE__*/ _jsx(LayoutHeaderNavigationTrigger, {
+            ...props
+        });
+    }
+    if (placement === 'side') {
+        return /*#__PURE__*/ _jsx(LayoutSidebarTrigger, {
+            ...props
+        });
+    }
+    return null;
+};
+
+//# sourceMappingURL=titan-layout-links.js.map

package/dist/components/titan-layout/titan-layout-links.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/titan-layout/titan-layout-links.tsx"],"sourcesContent":["import { FC } from 'react';\n\nimport { TitanLayoutLinkProps, TitanLayoutTriggerProps } from './interface';\nimport { useTitanLayoutPlacementContext } from './layout-context';\nimport { LayoutHeaderNavigationLink, LayoutHeaderNavigationTrigger } from './layout-header-links';\nimport { LayoutSidebarLink, LayoutSidebarTrigger } from './layout-sidebar-links';\n\nexport const TitanLayoutLink: FC<TitanLayoutLinkProps> = props => {\n    const placement = useTitanLayoutPlacementContext();\n\n    if (placement === 'top') {\n        return <LayoutHeaderNavigationLink {...props} />;\n    }\n\n    if (placement === 'side') {\n        return <LayoutSidebarLink {...props} />;\n    }\n\n    return null;\n};\n\nexport const TitanLayoutTrigger: FC<TitanLayoutTriggerProps> = props => {\n    const placement = useTitanLayoutPlacementContext();\n\n    if (placement === 'top') {\n        return <LayoutHeaderNavigationTrigger {...props} />;\n    }\n\n    if (placement === 'side') {\n        return <LayoutSidebarTrigger {...props} />;\n    }\n\n    return null;\n};\n"],"names":["useTitanLayoutPlacementContext","LayoutHeaderNavigationLink","LayoutHeaderNavigationTrigger","LayoutSidebarLink","LayoutSidebarTrigger","TitanLayoutLink","props","placement","TitanLayoutTrigger"],"mappings":";AAGA,SAASA,8BAA8B,QAAQ,mBAAmB;AAClE,SAASC,0BAA0B,EAAEC,6BAA6B,QAAQ,wBAAwB;AAClG,SAASC,iBAAiB,EAAEC,oBAAoB,QAAQ,yBAAyB;AAEjF,OAAO,MAAMC,kBAA4CC,CAAAA;IACrD,MAAMC,YAAYP;IAElB,IAAIO,cAAc,OAAO;QACrB,qBAAO,KAACN;YAA4B,GAAGK,KAAK;;IAChD;IAEA,IAAIC,cAAc,QAAQ;QACtB,qBAAO,KAACJ;YAAmB,GAAGG,KAAK;;IACvC;IAEA,OAAO;AACX,EAAE;AAEF,OAAO,MAAME,qBAAkDF,CAAAA;IAC3D,MAAMC,YAAYP;IAElB,IAAIO,cAAc,OAAO;QACrB,qBAAO,KAACL;YAA+B,GAAGI,KAAK;;IACnD;IAEA,IAAIC,cAAc,QAAQ;QACtB,qBAAO,KAACH;YAAsB,GAAGE,KAAK;;IAC1C;IAEA,OAAO;AACX,EAAE"}