@servicetitan/navigation 13.0.0-canary.256.5761ed1.0 → 13.0.0-canary.256.5bb5b0a.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.
Files changed (36) hide show
  1. package/dist/components/titan-layout/interface.d.ts +1 -1
  2. package/dist/components/titan-layout/interface.d.ts.map +1 -1
  3. package/dist/components/titan-layout/interface.js.map +1 -1
  4. package/dist/components/titan-layout/layout-header-dark.d.ts.map +1 -1
  5. package/dist/components/titan-layout/layout-header-dark.js +3 -1
  6. package/dist/components/titan-layout/layout-header-dark.js.map +1 -1
  7. package/dist/components/titan-layout/layout-header.d.ts +2 -0
  8. package/dist/components/titan-layout/layout-header.d.ts.map +1 -1
  9. package/dist/components/titan-layout/layout-header.js +18 -14
  10. package/dist/components/titan-layout/layout-header.js.map +1 -1
  11. package/dist/components/titan-layout/layout-sidebar-links-internal.d.ts +4 -10
  12. package/dist/components/titan-layout/layout-sidebar-links-internal.d.ts.map +1 -1
  13. package/dist/components/titan-layout/layout-sidebar-links-internal.js +53 -53
  14. package/dist/components/titan-layout/layout-sidebar-links-internal.js.map +1 -1
  15. package/dist/components/titan-layout/layout-sidebar-links.d.ts.map +1 -1
  16. package/dist/components/titan-layout/layout-sidebar-links.js +2 -4
  17. package/dist/components/titan-layout/layout-sidebar-links.js.map +1 -1
  18. package/dist/components/titan-layout/layout-sidebar.d.ts +1 -1
  19. package/dist/components/titan-layout/layout-sidebar.d.ts.map +1 -1
  20. package/dist/components/titan-layout/layout-sidebar.js +43 -89
  21. package/dist/components/titan-layout/layout-sidebar.js.map +1 -1
  22. package/dist/components/titan-layout/layout-sidebar.module.less +74 -22
  23. package/dist/components/titan-layout/titan-layout-default.stories.d.ts.map +1 -1
  24. package/dist/components/titan-layout/titan-layout.d.ts.map +1 -1
  25. package/dist/components/titan-layout/titan-layout.js +25 -8
  26. package/dist/components/titan-layout/titan-layout.js.map +1 -1
  27. package/package.json +4 -4
  28. package/src/components/titan-layout/interface.ts +1 -1
  29. package/src/components/titan-layout/layout-header-dark.tsx +4 -1
  30. package/src/components/titan-layout/layout-header.tsx +22 -12
  31. package/src/components/titan-layout/layout-sidebar-links-internal.tsx +42 -54
  32. package/src/components/titan-layout/layout-sidebar-links.tsx +0 -2
  33. package/src/components/titan-layout/layout-sidebar.module.less +74 -22
  34. package/src/components/titan-layout/layout-sidebar.tsx +5 -50
  35. package/src/components/titan-layout/titan-layout-default.stories.tsx +9 -4
  36. package/src/components/titan-layout/titan-layout.tsx +29 -8
@@ -10,7 +10,7 @@ export interface TitanLayoutLinkWrapperProps {
10
10
  export type TitanLayoutLinkWrapper = FC<TitanLayoutLinkWrapperProps>;
11
11
  export interface TitanLayoutState {
12
12
  navCollapsed: boolean;
13
- submenuExpanded?: string;
13
+ submenusExpanded?: string[];
14
14
  }
15
15
  export interface TitanLayoutLinkExtraProps {
16
16
  showTitle?: boolean;
@@ -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,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,yBAAyB;IACtC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,wBAAwB;IACrC,OAAO,EAAE,eAAe,CAAC;CAC5B;AAED,MAAM,MAAM,oBAAoB,GAAG;IAC/B,cAAc;IACd,EAAE,EAAE,MAAM,CAAC;IACX,gBAAgB;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC;IACrD,yCAAyC;IACzC,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACnC,uCAAuC;IACvC,UAAU,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACzC,kFAAkF;IAClF,GAAG,CAAC,EAAE,cAAc,CAAC;IACrB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,mCAAmC;IACnC,KAAK,CAAC,EAAE,yBAAyB,CAAC;IAClC,uDAAuD;IACvD,IAAI,CAAC,EAAE,wBAAwB,CAAC;CACnC,GAAG,IAAI,CAAC,wBAAwB,CAAC,GAAG,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,CAAC;AAE9D,MAAM,MAAM,uBAAuB,GAAG;IAClC,cAAc;IACd,EAAE,EAAE,MAAM,CAAC;IACX,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACnC,uCAAuC;IACvC,UAAU,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACzC,kFAAkF;IAClF,GAAG,CAAC,EAAE,cAAc,CAAC;IACrB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,8BAA8B;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,mCAAmC;IACnC,KAAK,CAAC,EAAE,yBAAyB,CAAC;IAClC,kDAAkD;IAClD,IAAI,CAAC,EAAE,wBAAwB,CAAC;CACnC,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,CAAC"}
1
+ {"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 +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 submenuExpanded?: string;\n}\n\nexport interface TitanLayoutLinkExtraProps {\n showTitle?: boolean;\n flashing?: boolean;\n}\n\nexport interface TitanLayoutLinkSideProps {\n counter: CounterTagValue;\n}\n\nexport type TitanLayoutLinkProps = {\n /** link id */\n id: string;\n /** link href */\n to: string;\n /** link title */\n title: string;\n /** callback to return active state. By default, it compares link href with current pathname */\n isActive?: boolean | ((pathname: string) => boolean);\n /** svg icon (anvil2) of inactive item */\n icon: IconProps['svg'] | undefined;\n /** svg icon (anvil2) of active item */\n iconActive: IconProps['svg'] | undefined;\n /** item tag (optional). shown if it is set and value is true or greater than 0 */\n tag?: CounterTagData;\n counter?: CounterTagValue;\n /** class name of link item */\n className?: string;\n\n /** tooltip text (for extra links) */\n tooltip?: string;\n /** wrapper component for link element (used for side links) */\n wrapper?: TitanLayoutLinkWrapper;\n /** props for extra link element */\n extra?: TitanLayoutLinkExtraProps;\n /** props for side nav link element (mobile version) */\n side?: TitanLayoutLinkSideProps;\n} & Omit<ComponentPropsWithoutRef<'a'>, 'children' | 'title'>;\n\nexport type TitanLayoutTriggerProps = {\n /** link id */\n id: string;\n /** link title */\n title: string;\n /** active state */\n isActive?: boolean;\n /** svg icon (anvil2) of inactive item */\n icon: IconProps['svg'] | undefined;\n /** svg icon (anvil2) of active item */\n iconActive: IconProps['svg'] | undefined;\n /** item tag (optional). shown if it is set and value is true or greater than 0 */\n tag?: CounterTagData;\n counter?: CounterTagValue;\n /** class name of link item */\n className?: string;\n\n /** tooltip text (for extra links) */\n tooltip?: string;\n /** wrapper component for link element (used for side links) */\n wrapper?: TitanLayoutLinkWrapper;\n /** props for extra link element */\n extra?: TitanLayoutLinkExtraProps;\n /** props for nav link element (mobile version) */\n side?: TitanLayoutLinkSideProps;\n} & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'title'>;\n"],"names":[],"mappings":"AAwDA,WAyBgE"}
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":"AAwDA,WAyBgE"}
@@ -1 +1 @@
1
- {"version":3,"file":"layout-header-dark.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-header-dark.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,EAAE,EAA4C,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAI5D,OAAO,EAAgB,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAkBlE,UAAU,wBAAyB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC;IACzE,mBAAmB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC3C,uBAAuB,CAAC,EAAE,kBAAkB,EAAE,CAAC;CAClD;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,wBAAwB,CAqEzD,CAAC"}
1
+ {"version":3,"file":"layout-header-dark.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-header-dark.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,EAAE,EAA4C,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAI5D,OAAO,EAAgB,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAkBlE,UAAU,wBAAyB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,SAAS,CAAC;IACzE,mBAAmB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAC3C,uBAAuB,CAAC,EAAE,kBAAkB,EAAE,CAAC;CAClD;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,wBAAwB,CAwEzD,CAAC"}
@@ -21,7 +21,7 @@ var MinimizedState = /*#__PURE__*/ function(MinimizedState) {
21
21
  MinimizedState[MinimizedState["Full"] = 2] = "Full";
22
22
  return MinimizedState;
23
23
  }(MinimizedState || {});
24
- export const LayoutHeaderDark = ({ className, isMobile, navigationMainItems, navigationOverflowItems, hasNotifications, onBurgerClick, logo, profile, right, rightText, rightClassName, center, centerClassName, ...rest })=>{
24
+ export const LayoutHeaderDark = ({ className, isMobile, navigationMainItems, navigationOverflowItems, hasNotifications, logo, profile, right, rightText, rightClassName, center, centerClassName, hasBurger, onBurgerClick, ...rest })=>{
25
25
  return center ? /*#__PURE__*/ _jsxs("div", {
26
26
  className: classNames(Styles.headerStacked, className),
27
27
  "data-cy": "header-navigation",
@@ -39,6 +39,7 @@ export const LayoutHeaderDark = ({ className, isMobile, navigationMainItems, nav
39
39
  logo: logo,
40
40
  profile: profile,
41
41
  onBurgerClick: onBurgerClick,
42
+ hasBurger: hasBurger,
42
43
  "data-cy": "header-navigation-top"
43
44
  }),
44
45
  !isMobile && !!(navigationMainItems === null || navigationMainItems === void 0 ? void 0 : navigationMainItems.length) && /*#__PURE__*/ _jsx(LayoutHeaderNav, {
@@ -63,6 +64,7 @@ export const LayoutHeaderDark = ({ className, isMobile, navigationMainItems, nav
63
64
  logo: logo,
64
65
  profile: profile,
65
66
  onBurgerClick: onBurgerClick,
67
+ hasBurger: hasBurger,
66
68
  ...rest
67
69
  });
68
70
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/titan-layout/layout-header-dark.tsx"],"sourcesContent":["import { ButtonCompound, Icon, Menu, MenuProps } from '@servicetitan/anvil2';\nimport SvgMoreVert from '@servicetitan/anvil2/assets/icons/material/round/more_vert.svg';\nimport classNames from 'classnames';\nimport { FC, useCallback, useEffect, useRef, useState } from 'react';\nimport { NavigationItemData } from '../../utils/navigation';\nimport { getCounterTag } from '../../utils/side-nav';\nimport { NavigationComponentProps } from './interface-internal';\nimport { useTitanLayoutContext } from './layout-context';\nimport { LayoutHeader, LayoutHeaderProps } from './layout-header';\nimport { InternalLayoutHeaderNavigationLink } from './layout-header-links-internal';\nimport * as Styles from './layout-header.module.less';\nimport { withTooltip } from './with-tooltip';\n\nfunction useForceUpdate() {\n const [, setTick] = useState(0);\n return useCallback(() => {\n setTick(tick => tick + 1);\n }, []);\n}\n\nenum MinimizedState {\n Calculating,\n Minimized,\n Full,\n}\n\ninterface LayoutHeaderStackedProps extends Omit<LayoutHeaderProps, 'variant'> {\n navigationMainItems?: NavigationItemData[];\n navigationOverflowItems?: NavigationItemData[];\n}\n\nexport const LayoutHeaderDark: FC<LayoutHeaderStackedProps> = ({\n className,\n isMobile,\n navigationMainItems,\n navigationOverflowItems,\n hasNotifications,\n onBurgerClick,\n logo,\n profile,\n right,\n rightText,\n rightClassName,\n center,\n centerClassName,\n ...rest\n}) => {\n return center ? (\n <div\n className={classNames(Styles.headerStacked, className)}\n data-cy=\"header-navigation\"\n {...rest}\n >\n <LayoutHeader\n variant=\"dark\"\n right={right}\n rightText={rightText}\n rightClassName={rightClassName}\n center={center}\n centerClassName={centerClassName}\n isMobile={isMobile}\n hasNotifications={hasNotifications}\n logo={logo}\n profile={profile}\n onBurgerClick={onBurgerClick}\n data-cy=\"header-navigation-top\"\n />\n\n {!isMobile && !!navigationMainItems?.length && (\n <LayoutHeaderNav\n className={Styles.headerStackedNav}\n mainItems={navigationMainItems}\n overflowItems={navigationOverflowItems}\n />\n )}\n </div>\n ) : (\n <LayoutHeader\n variant=\"dark\"\n className={classNames(className, !isMobile && Styles.headerDesktopNav)}\n right={right}\n rightText={rightText}\n rightClassName={rightClassName}\n center={\n isMobile ? undefined : (\n <LayoutHeaderNav\n mainItems={navigationMainItems}\n overflowItems={navigationOverflowItems}\n />\n )\n }\n centerClassName={centerClassName}\n isMobile={isMobile}\n hasNotifications={hasNotifications}\n logo={logo}\n profile={profile}\n onBurgerClick={onBurgerClick}\n {...rest}\n />\n );\n};\n\ninterface LayoutHeaderNavProps {\n className?: string;\n mainItems?: NavigationItemData[];\n overflowItems?: NavigationItemData[];\n}\nconst LayoutHeaderNav: FC<LayoutHeaderNavProps> = ({ className, mainItems, overflowItems }) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const navigationRef = useRef<HTMLDivElement>(null);\n const forceUpdate = useForceUpdate();\n const [minimized, setMinimized] = useState(MinimizedState.Calculating);\n const { NavigationComponent } = useTitanLayoutContext();\n\n useEffect(() => {\n const handleResize = () => {\n setMinimized(MinimizedState.Calculating);\n forceUpdate();\n };\n\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, [forceUpdate]);\n\n const updateIsMinimized = () => {\n if (containerRef.current && navigationRef.current) {\n const widthGap = 16 + (overflowItems?.length ? 32 : 0);\n if (navigationRef.current.clientWidth + widthGap > containerRef.current.clientWidth) {\n setMinimized(MinimizedState.Minimized);\n } else if (minimized === MinimizedState.Calculating) {\n setMinimized(MinimizedState.Full);\n }\n }\n };\n\n useEffect(() => {\n updateIsMinimized();\n });\n\n useEffect(() => {\n setMinimized(MinimizedState.Calculating);\n forceUpdate();\n }, [forceUpdate]);\n\n const isMinimized = minimized === MinimizedState.Minimized;\n\n return (\n <div\n ref={containerRef}\n className={classNames(Styles.headerNavigationWrapper, className, {\n [Styles.calculating]: minimized === MinimizedState.Calculating,\n })}\n data-cy=\"navigation-items\"\n >\n <div ref={navigationRef} className={classNames(Styles.headerNavigation)}>\n {mainItems?.map(item =>\n withTooltip(\n <InternalLayoutHeaderNavigationLink\n id={item.id}\n to={item.to}\n title={isMinimized ? undefined : item.title}\n isActive={item.isActive}\n icon={item.icon}\n iconActive={item.iconActive}\n tag={getCounterTag(item.counter, item.tag)}\n className={item.className}\n key={item.id}\n navigationComponent={NavigationComponent}\n />,\n isMinimized ? item.title : undefined,\n { key: item.id }\n )\n )}\n </div>\n {!!overflowItems?.length && (\n <LayoutHeaderNavOverflow\n items={overflowItems}\n navigationComponent={NavigationComponent}\n />\n )}\n </div>\n );\n};\n\nconst LayoutHeaderNavOverflowTrigger: MenuProps['trigger'] = props => (\n <ButtonCompound\n {...props}\n className={Styles.headerNavigationOverflowTrigger}\n data-cy=\"navigation-overflow-trigger\"\n >\n <Icon svg={SvgMoreVert} size=\"medium\" />\n </ButtonCompound>\n);\n\nconst LayoutHeaderNavOverflow: FC<\n {\n items: NavigationItemData[];\n } & NavigationComponentProps\n> = ({ items, navigationComponent }) => {\n return (\n <Menu trigger={LayoutHeaderNavOverflowTrigger} placement=\"bottom-end\">\n <div data-cy=\"navigation-overflow-content\" className={Styles.headerNavigationOverflow}>\n {items.map(item => (\n <InternalLayoutHeaderNavigationLink\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 tag={getCounterTag(item.counter, item.tag)}\n className={item.className}\n key={item.id}\n navigationComponent={navigationComponent}\n isOverflow\n />\n ))}\n </div>\n </Menu>\n );\n};\n"],"names":["ButtonCompound","Icon","Menu","SvgMoreVert","classNames","useCallback","useEffect","useRef","useState","getCounterTag","useTitanLayoutContext","LayoutHeader","InternalLayoutHeaderNavigationLink","Styles","withTooltip","useForceUpdate","setTick","tick","MinimizedState","LayoutHeaderDark","className","isMobile","navigationMainItems","navigationOverflowItems","hasNotifications","onBurgerClick","logo","profile","right","rightText","rightClassName","center","centerClassName","rest","div","headerStacked","data-cy","variant","length","LayoutHeaderNav","headerStackedNav","mainItems","overflowItems","headerDesktopNav","undefined","containerRef","navigationRef","forceUpdate","minimized","setMinimized","NavigationComponent","handleResize","window","addEventListener","removeEventListener","updateIsMinimized","current","widthGap","clientWidth","isMinimized","ref","headerNavigationWrapper","calculating","headerNavigation","map","item","id","to","title","isActive","icon","iconActive","tag","counter","navigationComponent","key","LayoutHeaderNavOverflow","items","LayoutHeaderNavOverflowTrigger","props","headerNavigationOverflowTrigger","svg","size","trigger","placement","headerNavigationOverflow","isOverflow"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../src/components/titan-layout/layout-header-dark.tsx"],"sourcesContent":["import { ButtonCompound, Icon, Menu, MenuProps } from '@servicetitan/anvil2';\nimport SvgMoreVert from '@servicetitan/anvil2/assets/icons/material/round/more_vert.svg';\nimport classNames from 'classnames';\nimport { FC, useCallback, useEffect, useRef, useState } from 'react';\nimport { NavigationItemData } from '../../utils/navigation';\nimport { getCounterTag } from '../../utils/side-nav';\nimport { NavigationComponentProps } from './interface-internal';\nimport { useTitanLayoutContext } from './layout-context';\nimport { LayoutHeader, LayoutHeaderProps } from './layout-header';\nimport { InternalLayoutHeaderNavigationLink } from './layout-header-links-internal';\nimport * as Styles from './layout-header.module.less';\nimport { withTooltip } from './with-tooltip';\n\nfunction useForceUpdate() {\n const [, setTick] = useState(0);\n return useCallback(() => {\n setTick(tick => tick + 1);\n }, []);\n}\n\nenum MinimizedState {\n Calculating,\n Minimized,\n Full,\n}\n\ninterface LayoutHeaderStackedProps extends Omit<LayoutHeaderProps, 'variant'> {\n navigationMainItems?: NavigationItemData[];\n navigationOverflowItems?: NavigationItemData[];\n}\n\nexport const LayoutHeaderDark: FC<LayoutHeaderStackedProps> = ({\n className,\n isMobile,\n navigationMainItems,\n navigationOverflowItems,\n hasNotifications,\n logo,\n profile,\n right,\n rightText,\n rightClassName,\n center,\n centerClassName,\n hasBurger,\n onBurgerClick,\n ...rest\n}) => {\n return center ? (\n <div\n className={classNames(Styles.headerStacked, className)}\n data-cy=\"header-navigation\"\n {...rest}\n >\n <LayoutHeader\n variant=\"dark\"\n right={right}\n rightText={rightText}\n rightClassName={rightClassName}\n center={center}\n centerClassName={centerClassName}\n isMobile={isMobile}\n hasNotifications={hasNotifications}\n logo={logo}\n profile={profile}\n onBurgerClick={onBurgerClick}\n hasBurger={hasBurger}\n data-cy=\"header-navigation-top\"\n />\n\n {!isMobile && !!navigationMainItems?.length && (\n <LayoutHeaderNav\n className={Styles.headerStackedNav}\n mainItems={navigationMainItems}\n overflowItems={navigationOverflowItems}\n />\n )}\n </div>\n ) : (\n <LayoutHeader\n variant=\"dark\"\n className={classNames(className, !isMobile && Styles.headerDesktopNav)}\n right={right}\n rightText={rightText}\n rightClassName={rightClassName}\n center={\n isMobile ? undefined : (\n <LayoutHeaderNav\n mainItems={navigationMainItems}\n overflowItems={navigationOverflowItems}\n />\n )\n }\n centerClassName={centerClassName}\n isMobile={isMobile}\n hasNotifications={hasNotifications}\n logo={logo}\n profile={profile}\n onBurgerClick={onBurgerClick}\n hasBurger={hasBurger}\n {...rest}\n />\n );\n};\n\ninterface LayoutHeaderNavProps {\n className?: string;\n mainItems?: NavigationItemData[];\n overflowItems?: NavigationItemData[];\n}\nconst LayoutHeaderNav: FC<LayoutHeaderNavProps> = ({ className, mainItems, overflowItems }) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const navigationRef = useRef<HTMLDivElement>(null);\n const forceUpdate = useForceUpdate();\n const [minimized, setMinimized] = useState(MinimizedState.Calculating);\n const { NavigationComponent } = useTitanLayoutContext();\n\n useEffect(() => {\n const handleResize = () => {\n setMinimized(MinimizedState.Calculating);\n forceUpdate();\n };\n\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, [forceUpdate]);\n\n const updateIsMinimized = () => {\n if (containerRef.current && navigationRef.current) {\n const widthGap = 16 + (overflowItems?.length ? 32 : 0);\n if (navigationRef.current.clientWidth + widthGap > containerRef.current.clientWidth) {\n setMinimized(MinimizedState.Minimized);\n } else if (minimized === MinimizedState.Calculating) {\n setMinimized(MinimizedState.Full);\n }\n }\n };\n\n useEffect(() => {\n updateIsMinimized();\n });\n\n useEffect(() => {\n setMinimized(MinimizedState.Calculating);\n forceUpdate();\n }, [forceUpdate]);\n\n const isMinimized = minimized === MinimizedState.Minimized;\n\n return (\n <div\n ref={containerRef}\n className={classNames(Styles.headerNavigationWrapper, className, {\n [Styles.calculating]: minimized === MinimizedState.Calculating,\n })}\n data-cy=\"navigation-items\"\n >\n <div ref={navigationRef} className={classNames(Styles.headerNavigation)}>\n {mainItems?.map(item =>\n withTooltip(\n <InternalLayoutHeaderNavigationLink\n id={item.id}\n to={item.to}\n title={isMinimized ? undefined : item.title}\n isActive={item.isActive}\n icon={item.icon}\n iconActive={item.iconActive}\n tag={getCounterTag(item.counter, item.tag)}\n className={item.className}\n key={item.id}\n navigationComponent={NavigationComponent}\n />,\n isMinimized ? item.title : undefined,\n { key: item.id }\n )\n )}\n </div>\n {!!overflowItems?.length && (\n <LayoutHeaderNavOverflow\n items={overflowItems}\n navigationComponent={NavigationComponent}\n />\n )}\n </div>\n );\n};\n\nconst LayoutHeaderNavOverflowTrigger: MenuProps['trigger'] = props => (\n <ButtonCompound\n {...props}\n className={Styles.headerNavigationOverflowTrigger}\n data-cy=\"navigation-overflow-trigger\"\n >\n <Icon svg={SvgMoreVert} size=\"medium\" />\n </ButtonCompound>\n);\n\nconst LayoutHeaderNavOverflow: FC<\n {\n items: NavigationItemData[];\n } & NavigationComponentProps\n> = ({ items, navigationComponent }) => {\n return (\n <Menu trigger={LayoutHeaderNavOverflowTrigger} placement=\"bottom-end\">\n <div data-cy=\"navigation-overflow-content\" className={Styles.headerNavigationOverflow}>\n {items.map(item => (\n <InternalLayoutHeaderNavigationLink\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 tag={getCounterTag(item.counter, item.tag)}\n className={item.className}\n key={item.id}\n navigationComponent={navigationComponent}\n isOverflow\n />\n ))}\n </div>\n </Menu>\n );\n};\n"],"names":["ButtonCompound","Icon","Menu","SvgMoreVert","classNames","useCallback","useEffect","useRef","useState","getCounterTag","useTitanLayoutContext","LayoutHeader","InternalLayoutHeaderNavigationLink","Styles","withTooltip","useForceUpdate","setTick","tick","MinimizedState","LayoutHeaderDark","className","isMobile","navigationMainItems","navigationOverflowItems","hasNotifications","logo","profile","right","rightText","rightClassName","center","centerClassName","hasBurger","onBurgerClick","rest","div","headerStacked","data-cy","variant","length","LayoutHeaderNav","headerStackedNav","mainItems","overflowItems","headerDesktopNav","undefined","containerRef","navigationRef","forceUpdate","minimized","setMinimized","NavigationComponent","handleResize","window","addEventListener","removeEventListener","updateIsMinimized","current","widthGap","clientWidth","isMinimized","ref","headerNavigationWrapper","calculating","headerNavigation","map","item","id","to","title","isActive","icon","iconActive","tag","counter","navigationComponent","key","LayoutHeaderNavOverflow","items","LayoutHeaderNavOverflowTrigger","props","headerNavigationOverflowTrigger","svg","size","trigger","placement","headerNavigationOverflow","isOverflow"],"mappings":"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"}
@@ -12,6 +12,8 @@ export type LayoutHeaderProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
12
12
  isMobile: boolean;
13
13
  variant: 'light' | 'dark';
14
14
  hasNotifications: boolean;
15
+ hasBurger: boolean;
16
+ burgerTooltip?: string;
15
17
  onBurgerClick?: (e: MouseEvent<never>) => void;
16
18
  };
17
19
  export declare const LayoutHeader: FC<LayoutHeaderProps>;
@@ -1 +1 @@
1
- {"version":3,"file":"layout-header.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,wBAAwB,EAAE,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI1F,OAAO,EAAc,oBAAoB,EAAgB,MAAM,eAAe,CAAC;AAE/E,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAChF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,GAAG,MAAM,CAAC;IAC1B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAsE9C,CAAC"}
1
+ {"version":3,"file":"layout-header.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,wBAAwB,EAAE,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI1F,OAAO,EAAc,oBAAoB,EAAgB,MAAM,eAAe,CAAC;AAG/E,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAChF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAC5B,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,GAAG,MAAM,CAAC;IAC1B,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CA6E9C,CAAC"}
@@ -5,7 +5,21 @@ import { LayoutPlacementContext } from './layout-context';
5
5
  import { LayoutHeaderNavigationTrigger } from './layout-header-links';
6
6
  import * as Styles from './layout-header.module.less';
7
7
  import { LayoutLogo, isLogoCustom } from './layout-logo';
8
- export const LayoutHeader = ({ className, right, rightText, rightClassName, center, centerClassName, isMobile, hasNotifications, logo, profile, variant, onBurgerClick, ...rest })=>{
8
+ import { withTooltip } from './with-tooltip';
9
+ export const LayoutHeader = ({ className, right, rightText, rightClassName, center, centerClassName, isMobile, hasNotifications, logo, profile, variant, hasBurger, burgerTooltip, onBurgerClick, ...rest })=>{
10
+ const burgerElement = hasBurger && /*#__PURE__*/ _jsx("div", {
11
+ className: Styles.burger,
12
+ children: /*#__PURE__*/ _jsx(LayoutHeaderNavigationTrigger, {
13
+ id: "burger",
14
+ title: "",
15
+ icon: SvgBurgerMenu,
16
+ iconActive: undefined,
17
+ onClick: onBurgerClick,
18
+ tag: {
19
+ value: hasNotifications
20
+ }
21
+ })
22
+ });
9
23
  return /*#__PURE__*/ _jsx(LayoutPlacementContext.Provider, {
10
24
  value: "top",
11
25
  children: /*#__PURE__*/ _jsxs("div", {
@@ -13,19 +27,9 @@ export const LayoutHeader = ({ className, right, rightText, rightClassName, cent
13
27
  "data-cy": "header-navigation",
14
28
  ...rest,
15
29
  children: [
16
- isMobile && /*#__PURE__*/ _jsx("div", {
17
- className: Styles.burger,
18
- children: /*#__PURE__*/ _jsx(LayoutHeaderNavigationTrigger, {
19
- id: "burger",
20
- title: "",
21
- icon: SvgBurgerMenu,
22
- iconActive: undefined,
23
- onClick: onBurgerClick,
24
- tag: {
25
- value: hasNotifications
26
- }
27
- })
28
- }),
30
+ burgerElement && (burgerTooltip ? withTooltip(burgerElement, burgerTooltip, {
31
+ placement: 'bottom-end'
32
+ }) : burgerElement),
29
33
  /*#__PURE__*/ _jsx(LayoutLogo, {
30
34
  ...logo
31
35
  }),
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/titan-layout/layout-header.tsx"],"sourcesContent":["import SvgBurgerMenu from '@servicetitan/anvil2/assets/icons/material/round/menu.svg';\nimport classNames from 'classnames';\nimport { ComponentPropsWithoutRef, FC, MouseEvent, ReactElement, ReactNode } from 'react';\nimport { LayoutPlacementContext } from './layout-context';\nimport { LayoutHeaderNavigationTrigger } from './layout-header-links';\nimport * as Styles from './layout-header.module.less';\nimport { LayoutLogo, TitanLayoutLogoProps, isLogoCustom } from './layout-logo';\n\nexport type LayoutHeaderProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {\n right?: ReactNode;\n rightText?: string;\n rightClassName?: string;\n\n id?: string;\n\n center?: ReactElement;\n centerClassName?: string;\n\n logo?: TitanLayoutLogoProps;\n profile?: ReactElement;\n\n isMobile: boolean;\n variant: 'light' | 'dark';\n hasNotifications: boolean;\n onBurgerClick?: (e: MouseEvent<never>) => void;\n};\n\nexport const LayoutHeader: FC<LayoutHeaderProps> = ({\n className,\n right,\n rightText,\n rightClassName,\n center,\n centerClassName,\n isMobile,\n hasNotifications,\n logo,\n profile,\n variant,\n onBurgerClick,\n ...rest\n}) => {\n return (\n <LayoutPlacementContext.Provider value=\"top\">\n <div\n className={classNames(\n Styles.header,\n variant === 'light' ? Styles.headerLight : Styles.headerDark,\n isMobile ? Styles.headerMobile : Styles.headerDesktop,\n isLogoCustom(logo, isMobile) && Styles.headerLogoCustom,\n className\n )}\n data-cy=\"header-navigation\"\n {...rest}\n >\n {isMobile && (\n <div className={Styles.burger}>\n <LayoutHeaderNavigationTrigger\n id=\"burger\"\n title=\"\"\n icon={SvgBurgerMenu}\n iconActive={undefined}\n onClick={onBurgerClick}\n tag={{ value: hasNotifications }}\n />\n </div>\n )}\n <LayoutLogo {...logo} />\n <div\n className={classNames(\n Styles.heTopCenter,\n 'd-f align-items-center justify-content-center',\n centerClassName\n )}\n data-cy=\"navigation-center\"\n >\n {center}\n </div>\n <div\n className={classNames(\n 'd-f flex-row justify-content-end align-items-center',\n Styles.heTopRight,\n rightClassName\n )}\n data-cy=\"navigation-right\"\n >\n {!!rightText && (\n <div className={Styles.heTopRightText} data-cy=\"navigation-right-text\">\n {rightText}\n </div>\n )}\n {right}\n {profile}\n </div>\n </div>\n </LayoutPlacementContext.Provider>\n );\n};\n"],"names":["SvgBurgerMenu","classNames","LayoutPlacementContext","LayoutHeaderNavigationTrigger","Styles","LayoutLogo","isLogoCustom","LayoutHeader","className","right","rightText","rightClassName","center","centerClassName","isMobile","hasNotifications","logo","profile","variant","onBurgerClick","rest","Provider","value","div","header","headerLight","headerDark","headerMobile","headerDesktop","headerLogoCustom","data-cy","burger","id","title","icon","iconActive","undefined","onClick","tag","heTopCenter","heTopRight","heTopRightText"],"mappings":";AAAA,OAAOA,mBAAmB,4DAA4D;AACtF,OAAOC,gBAAgB,aAAa;AAEpC,SAASC,sBAAsB,QAAQ,mBAAmB;AAC1D,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,YAAYC,YAAY,8BAA8B;AACtD,SAASC,UAAU,EAAwBC,YAAY,QAAQ,gBAAgB;AAqB/E,OAAO,MAAMC,eAAsC,CAAC,EAChDC,SAAS,EACTC,KAAK,EACLC,SAAS,EACTC,cAAc,EACdC,MAAM,EACNC,eAAe,EACfC,QAAQ,EACRC,gBAAgB,EAChBC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,aAAa,EACb,GAAGC,MACN;IACG,qBACI,KAAClB,uBAAuBmB,QAAQ;QAACC,OAAM;kBACnC,cAAA,MAACC;YACGf,WAAWP,WACPG,OAAOoB,MAAM,EACbN,YAAY,UAAUd,OAAOqB,WAAW,GAAGrB,OAAOsB,UAAU,EAC5DZ,WAAWV,OAAOuB,YAAY,GAAGvB,OAAOwB,aAAa,EACrDtB,aAAaU,MAAMF,aAAaV,OAAOyB,gBAAgB,EACvDrB;YAEJsB,WAAQ;YACP,GAAGV,IAAI;;gBAEPN,0BACG,KAACS;oBAAIf,WAAWJ,OAAO2B,MAAM;8BACzB,cAAA,KAAC5B;wBACG6B,IAAG;wBACHC,OAAM;wBACNC,MAAMlC;wBACNmC,YAAYC;wBACZC,SAASlB;wBACTmB,KAAK;4BAAEhB,OAAOP;wBAAiB;;;8BAI3C,KAACV;oBAAY,GAAGW,IAAI;;8BACpB,KAACO;oBACGf,WAAWP,WACPG,OAAOmC,WAAW,EAClB,iDACA1B;oBAEJiB,WAAQ;8BAEPlB;;8BAEL,MAACW;oBACGf,WAAWP,WACP,uDACAG,OAAOoC,UAAU,EACjB7B;oBAEJmB,WAAQ;;wBAEP,CAAC,CAACpB,2BACC,KAACa;4BAAIf,WAAWJ,OAAOqC,cAAc;4BAAEX,WAAQ;sCAC1CpB;;wBAGRD;wBACAQ;;;;;;AAKrB,EAAE"}
1
+ {"version":3,"sources":["../../../src/components/titan-layout/layout-header.tsx"],"sourcesContent":["import SvgBurgerMenu from '@servicetitan/anvil2/assets/icons/material/round/menu.svg';\nimport classNames from 'classnames';\nimport { ComponentPropsWithoutRef, FC, MouseEvent, ReactElement, ReactNode } from 'react';\nimport { LayoutPlacementContext } from './layout-context';\nimport { LayoutHeaderNavigationTrigger } from './layout-header-links';\nimport * as Styles from './layout-header.module.less';\nimport { LayoutLogo, TitanLayoutLogoProps, isLogoCustom } from './layout-logo';\nimport { withTooltip } from './with-tooltip';\n\nexport type LayoutHeaderProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {\n right?: ReactNode;\n rightText?: string;\n rightClassName?: string;\n\n id?: string;\n\n center?: ReactElement;\n centerClassName?: string;\n\n logo?: TitanLayoutLogoProps;\n profile?: ReactElement;\n\n isMobile: boolean;\n variant: 'light' | 'dark';\n hasNotifications: boolean;\n hasBurger: boolean;\n burgerTooltip?: string;\n onBurgerClick?: (e: MouseEvent<never>) => void;\n};\n\nexport const LayoutHeader: FC<LayoutHeaderProps> = ({\n className,\n right,\n rightText,\n rightClassName,\n center,\n centerClassName,\n isMobile,\n hasNotifications,\n logo,\n profile,\n variant,\n hasBurger,\n burgerTooltip,\n onBurgerClick,\n ...rest\n}) => {\n const burgerElement = hasBurger && (\n <div className={Styles.burger}>\n <LayoutHeaderNavigationTrigger\n id=\"burger\"\n title=\"\"\n icon={SvgBurgerMenu}\n iconActive={undefined}\n onClick={onBurgerClick}\n tag={{ value: hasNotifications }}\n />\n </div>\n );\n\n return (\n <LayoutPlacementContext.Provider value=\"top\">\n <div\n className={classNames(\n Styles.header,\n variant === 'light' ? Styles.headerLight : Styles.headerDark,\n isMobile ? Styles.headerMobile : Styles.headerDesktop,\n isLogoCustom(logo, isMobile) && Styles.headerLogoCustom,\n className\n )}\n data-cy=\"header-navigation\"\n {...rest}\n >\n {burgerElement &&\n (burgerTooltip\n ? withTooltip(burgerElement, burgerTooltip, { placement: 'bottom-end' })\n : burgerElement)}\n <LayoutLogo {...logo} />\n <div\n className={classNames(\n Styles.heTopCenter,\n 'd-f align-items-center justify-content-center',\n centerClassName\n )}\n data-cy=\"navigation-center\"\n >\n {center}\n </div>\n <div\n className={classNames(\n 'd-f flex-row justify-content-end align-items-center',\n Styles.heTopRight,\n rightClassName\n )}\n data-cy=\"navigation-right\"\n >\n {!!rightText && (\n <div className={Styles.heTopRightText} data-cy=\"navigation-right-text\">\n {rightText}\n </div>\n )}\n {right}\n {profile}\n </div>\n </div>\n </LayoutPlacementContext.Provider>\n );\n};\n"],"names":["SvgBurgerMenu","classNames","LayoutPlacementContext","LayoutHeaderNavigationTrigger","Styles","LayoutLogo","isLogoCustom","withTooltip","LayoutHeader","className","right","rightText","rightClassName","center","centerClassName","isMobile","hasNotifications","logo","profile","variant","hasBurger","burgerTooltip","onBurgerClick","rest","burgerElement","div","burger","id","title","icon","iconActive","undefined","onClick","tag","value","Provider","header","headerLight","headerDark","headerMobile","headerDesktop","headerLogoCustom","data-cy","placement","heTopCenter","heTopRight","heTopRightText"],"mappings":";AAAA,OAAOA,mBAAmB,4DAA4D;AACtF,OAAOC,gBAAgB,aAAa;AAEpC,SAASC,sBAAsB,QAAQ,mBAAmB;AAC1D,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,YAAYC,YAAY,8BAA8B;AACtD,SAASC,UAAU,EAAwBC,YAAY,QAAQ,gBAAgB;AAC/E,SAASC,WAAW,QAAQ,iBAAiB;AAuB7C,OAAO,MAAMC,eAAsC,CAAC,EAChDC,SAAS,EACTC,KAAK,EACLC,SAAS,EACTC,cAAc,EACdC,MAAM,EACNC,eAAe,EACfC,QAAQ,EACRC,gBAAgB,EAChBC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,aAAa,EACbC,aAAa,EACb,GAAGC,MACN;IACG,MAAMC,gBAAgBJ,2BAClB,KAACK;QAAIhB,WAAWL,OAAOsB,MAAM;kBACzB,cAAA,KAACvB;YACGwB,IAAG;YACHC,OAAM;YACNC,MAAM7B;YACN8B,YAAYC;YACZC,SAASV;YACTW,KAAK;gBAAEC,OAAOlB;YAAiB;;;IAK3C,qBACI,KAACd,uBAAuBiC,QAAQ;QAACD,OAAM;kBACnC,cAAA,MAACT;YACGhB,WAAWR,WACPG,OAAOgC,MAAM,EACbjB,YAAY,UAAUf,OAAOiC,WAAW,GAAGjC,OAAOkC,UAAU,EAC5DvB,WAAWX,OAAOmC,YAAY,GAAGnC,OAAOoC,aAAa,EACrDlC,aAAaW,MAAMF,aAAaX,OAAOqC,gBAAgB,EACvDhC;YAEJiC,WAAQ;YACP,GAAGnB,IAAI;;gBAEPC,iBACIH,CAAAA,gBACKd,YAAYiB,eAAeH,eAAe;oBAAEsB,WAAW;gBAAa,KACpEnB,aAAY;8BACtB,KAACnB;oBAAY,GAAGY,IAAI;;8BACpB,KAACQ;oBACGhB,WAAWR,WACPG,OAAOwC,WAAW,EAClB,iDACA9B;oBAEJ4B,WAAQ;8BAEP7B;;8BAEL,MAACY;oBACGhB,WAAWR,WACP,uDACAG,OAAOyC,UAAU,EACjBjC;oBAEJ8B,WAAQ;;wBAEP,CAAC,CAAC/B,2BACC,KAACc;4BAAIhB,WAAWL,OAAO0C,cAAc;4BAAEJ,WAAQ;sCAC1C/B;;wBAGRD;wBACAQ;;;;;;AAKrB,EAAE"}
@@ -1,14 +1,12 @@
1
1
  import { IconProps } from '@servicetitan/anvil2';
2
- import { FC, MouseEvent, ReactNode } from 'react';
2
+ import { ComponentPropsWithoutRef, FC, MouseEvent, ReactNode } from 'react';
3
3
  import { BadgeTagProps } from '../badge-tag';
4
4
  import { NavigationComponentProps } from './interface-internal';
5
5
  export interface InternalSideNavigationItemContentProps {
6
6
  icon: IconProps['svg'] | undefined;
7
7
  iconActive: IconProps['svg'] | undefined;
8
8
  title: string;
9
- submenuExpanded: boolean | undefined;
10
9
  tag: BadgeTagProps | undefined;
11
- onExpandToggle?: (e: MouseEvent<never>) => void;
12
10
  }
13
11
  /** Side Navigation menu item (for internal usage) */
14
12
  export declare const InternalSideNavigationLink: FC<NavigationComponentProps & {
@@ -20,9 +18,7 @@ export declare const InternalSideNavigationLink: FC<NavigationComponentProps & {
20
18
  iconActive: IconProps['svg'] | undefined;
21
19
  className: string | undefined;
22
20
  tag: BadgeTagProps | undefined;
23
- submenuExpanded: boolean | undefined;
24
- onExpandToggle?: (e: MouseEvent<never>) => void;
25
- }>;
21
+ } & Omit<ComponentPropsWithoutRef<'a'>, 'children' | 'title'>>;
26
22
  /** Side Navigation menu trigger (for internal usage) */
27
23
  export declare const InternalSideNavigationTrigger: FC<{
28
24
  id: string;
@@ -31,11 +27,9 @@ export declare const InternalSideNavigationTrigger: FC<{
31
27
  icon: IconProps['svg'] | undefined;
32
28
  iconActive: IconProps['svg'] | undefined;
33
29
  className: string | undefined;
34
- submenuExpanded: boolean | undefined;
35
30
  tag: BadgeTagProps | undefined;
36
31
  onClick?: (e: MouseEvent<never>) => void;
37
- onExpandToggle?: (e: MouseEvent<never>) => void;
38
- }>;
32
+ } & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'title'>>;
39
33
  export declare const InternalSideNavigationGroupLink: FC<NavigationComponentProps & {
40
34
  id: string;
41
35
  to: string;
@@ -65,7 +59,7 @@ export declare const InternalSideNavigationGroup: FC<NavigationComponentProps &
65
59
  tag: BadgeTagProps | undefined;
66
60
  children: ReactNode;
67
61
  submenuExpanded: boolean;
68
- onExpandToggle?: (e: MouseEvent<never>) => void;
69
62
  onClick?: (e: MouseEvent<never>) => void;
63
+ onExpandToggle(e: MouseEvent<never>): void;
70
64
  }>;
71
65
  //# sourceMappingURL=layout-sidebar-links-internal.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"layout-sidebar-links-internal.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar-links-internal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAIvD,OAAO,EAAE,EAAE,EAAY,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,EAAY,aAAa,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,wBAAwB,EAAE,MAAM,sBAAsB,CAAC;AAGhE,MAAM,WAAW,sCAAsC;IACnD,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACnC,UAAU,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,EAAE,OAAO,GAAG,SAAS,CAAC;IACrC,GAAG,EAAE,aAAa,GAAG,SAAS,CAAC;IAC/B,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;CACnD;AA2DD,qDAAqD;AACrD,eAAO,MAAM,0BAA0B,EAAE,EAAE,CACvC,wBAAwB,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,SAAS,CAAC;IAChE,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACnC,UAAU,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACzC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,GAAG,EAAE,aAAa,GAAG,SAAS,CAAC;IAE/B,eAAe,EAAE,OAAO,GAAG,SAAS,CAAC;IACrC,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;CACnD,CAuCJ,CAAC;AAEF,wDAAwD;AACxD,eAAO,MAAM,6BAA6B,EAAE,EAAE,CAAC;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACnC,UAAU,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACzC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAE9B,eAAe,EAAE,OAAO,GAAG,SAAS,CAAC;IACrC,GAAG,EAAE,aAAa,GAAG,SAAS,CAAC;IAC/B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IACzC,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;CACnD,CAkCA,CAAC;AAEF,eAAO,MAAM,+BAA+B,EAAE,EAAE,CAC5C,wBAAwB,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,SAAS,CAAC;IAChE,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,GAAG,EAAE,aAAa,GAAG,SAAS,CAAC;IAE/B,QAAQ,EAAE,MAAM,CAAC;CACpB,CA8BJ,CAAC;AAEF,eAAO,MAAM,kCAAkC,EAAE,EAAE,CAAC;IAChD,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,SAAS,CAAC;IAChE,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,GAAG,EAAE,aAAa,GAAG,SAAS,CAAC;IAE/B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;CAC1C,CA0BA,CAAC;AAEF,eAAO,MAAM,kCAAkC,+CAE9C,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,EAAE,CACxC,wBAAwB,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,GAAG,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,GAAG,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,SAAS,CAAC;IAChE,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACnC,UAAU,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC;IACzC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,GAAG,EAAE,aAAa,GAAG,SAAS,CAAC;IAE/B,QAAQ,EAAE,SAAS,CAAC;IACpB,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IAChD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;CAC5C,CA8DJ,CAAC"}
1
+ {"version":3,"file":"layout-sidebar-links-internal.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-sidebar-links-internal.tsx"],"names":[],"mappings":"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"}
@@ -1,12 +1,13 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { Icon } from '@servicetitan/anvil2';
2
+ import { Button, Icon } from '@servicetitan/anvil2';
3
3
  import SvgGroupCollapse from '@servicetitan/anvil2/assets/icons/material/round/expand_less.svg';
4
4
  import SvgGroupExpand from '@servicetitan/anvil2/assets/icons/material/round/expand_more.svg';
5
5
  import classNames from 'classnames';
6
6
  import { Fragment } from 'react';
7
7
  import { BadgeTag } from '../badge-tag';
8
8
  import * as Styles from './layout-sidebar.module.less';
9
- const InternalSideNavigationItemContent = ({ icon, iconActive, tag, title, submenuExpanded, onExpandToggle })=>/*#__PURE__*/ _jsxs(Fragment, {
9
+ import { withTooltip } from './with-tooltip';
10
+ const InternalSideNavigationItemContent = ({ icon, iconActive, tag, title })=>/*#__PURE__*/ _jsxs(Fragment, {
10
11
  children: [
11
12
  /*#__PURE__*/ _jsxs("div", {
12
13
  className: Styles.navItemIconWrapper,
@@ -28,21 +29,6 @@ const InternalSideNavigationItemContent = ({ icon, iconActive, tag, title, subme
28
29
  data: tag,
29
30
  className: Styles.navItemCounter,
30
31
  longClassName: Styles.navItemCounterLong
31
- }),
32
- typeof submenuExpanded === 'boolean' && /*#__PURE__*/ _jsxs("div", {
33
- className: Styles.navItemGroupToggleWrapper,
34
- children: [
35
- /*#__PURE__*/ _jsx(Icon, {
36
- svg: submenuExpanded ? SvgGroupCollapse : SvgGroupExpand,
37
- className: Styles.navItemGroupToggle,
38
- onClick: onExpandToggle
39
- }),
40
- /*#__PURE__*/ _jsx("div", {
41
- className: Styles.navItemGroupToggleClick,
42
- "data-cy": "nav-item-group-expand",
43
- onClick: onExpandToggle
44
- })
45
- ]
46
32
  })
47
33
  ]
48
34
  }),
@@ -55,7 +41,7 @@ const InternalSideNavigationItemContent = ({ icon, iconActive, tag, title, subme
55
41
  })
56
42
  ]
57
43
  });
58
- /** Side Navigation menu item (for internal usage) */ export const InternalSideNavigationLink = ({ id, to, title, isActive, icon, iconActive, className, tag, navigationComponent: NavigationComponent, submenuExpanded, onExpandToggle, ...rest })=>{
44
+ /** Side Navigation menu item (for internal usage) */ export const InternalSideNavigationLink = ({ id, to, title, isActive, icon, iconActive, className, tag, navigationComponent: NavigationComponent, ...rest })=>{
59
45
  return /*#__PURE__*/ _jsx(NavigationComponent, {
60
46
  "data-cy": `navigation-item-${id}`,
61
47
  "data-pendo": `navigation-item-${id}`,
@@ -70,14 +56,12 @@ const InternalSideNavigationItemContent = ({ icon, iconActive, tag, title, subme
70
56
  children: /*#__PURE__*/ _jsx(InternalSideNavigationItemContent, {
71
57
  icon: icon,
72
58
  iconActive: iconActive,
73
- submenuExpanded: submenuExpanded,
74
- onExpandToggle: onExpandToggle,
75
59
  title: title,
76
60
  tag: tag
77
61
  })
78
62
  });
79
63
  };
80
- /** Side Navigation menu trigger (for internal usage) */ export const InternalSideNavigationTrigger = ({ id, title, isActive, icon, iconActive, className, submenuExpanded, tag, onExpandToggle, ...rest })=>{
64
+ /** Side Navigation menu trigger (for internal usage) */ export const InternalSideNavigationTrigger = ({ id, title, isActive, icon, iconActive, className, tag, ...rest })=>{
81
65
  return /*#__PURE__*/ _jsx("div", {
82
66
  "data-cy": `navigation-item-${id}`,
83
67
  "data-pendo": `navigation-item-${id}`,
@@ -88,8 +72,6 @@ const InternalSideNavigationItemContent = ({ icon, iconActive, tag, title, subme
88
72
  [Styles.navItemIconSwitch]: !!icon && !!iconActive
89
73
  }),
90
74
  children: /*#__PURE__*/ _jsx(InternalSideNavigationItemContent, {
91
- submenuExpanded: submenuExpanded,
92
- onExpandToggle: onExpandToggle,
93
75
  icon: icon,
94
76
  iconActive: iconActive,
95
77
  title: title,
@@ -119,16 +101,15 @@ export const InternalSideNavigationGroupLink = ({ id, to, title, isActive, class
119
101
  ]
120
102
  }, id);
121
103
  };
122
- export const InternalSideNavigationGroupTrigger = ({ id, title, isActive, className, tag, onClick, ...rest })=>{
104
+ export const InternalSideNavigationGroupTrigger = ({ id, title, isActive, className, tag, ...rest })=>{
123
105
  return /*#__PURE__*/ _jsxs("div", {
124
106
  "data-cy": `navigation-item-${id}`,
125
107
  "data-pendo": `navigation-item-${id}`,
126
108
  ...rest,
127
109
  className: classNames(Styles.submenuItem, {
128
- [Styles.submenuLink]: !!onClick,
110
+ [Styles.submenuLink]: !!rest.onClick,
129
111
  [Styles.submenuLinkActive]: isActive === true
130
112
  }),
131
- onClick: onClick,
132
113
  children: [
133
114
  /*#__PURE__*/ _jsx("span", {
134
115
  children: title
@@ -146,37 +127,56 @@ export const InternalSideNavigationGroupDivider = ()=>{
146
127
  });
147
128
  };
148
129
  export const InternalSideNavigationGroup = ({ id, to, title, isActive, icon, iconActive, className, tag, children, submenuExpanded, onExpandToggle, onClick, navigationComponent, ...rest })=>{
130
+ const onRootClickCapture = (e)=>{
131
+ if (!submenuExpanded) {
132
+ onExpandToggle === null || onExpandToggle === void 0 ? void 0 : onExpandToggle(e);
133
+ e.preventDefault();
134
+ e.stopPropagation();
135
+ }
136
+ };
149
137
  return /*#__PURE__*/ _jsxs("div", {
150
138
  className: classNames(Styles.navGroupWrapper),
151
139
  children: [
152
- /*#__PURE__*/ _jsx("div", {
140
+ /*#__PURE__*/ _jsxs("div", {
153
141
  className: Styles.navGroupItem,
154
- children: to ? /*#__PURE__*/ _jsx(InternalSideNavigationLink, {
155
- id: id,
156
- to: to,
157
- title: title,
158
- isActive: isActive,
159
- icon: icon,
160
- iconActive: iconActive,
161
- tag: tag,
162
- className: className,
163
- ...rest,
164
- submenuExpanded: submenuExpanded,
165
- onExpandToggle: onExpandToggle,
166
- navigationComponent: navigationComponent
167
- }) : /*#__PURE__*/ _jsx(InternalSideNavigationTrigger, {
168
- id: id,
169
- title: title,
170
- isActive: isActive === true || undefined,
171
- icon: icon,
172
- iconActive: iconActive,
173
- tag: tag,
174
- className: className,
175
- ...rest,
176
- submenuExpanded: submenuExpanded,
177
- onExpandToggle: onExpandToggle,
178
- onClick: onClick
179
- })
142
+ onClickCapture: onRootClickCapture,
143
+ children: [
144
+ to ? /*#__PURE__*/ _jsx(InternalSideNavigationLink, {
145
+ id: id,
146
+ to: to,
147
+ title: title,
148
+ isActive: isActive,
149
+ icon: icon,
150
+ iconActive: iconActive,
151
+ tag: tag,
152
+ className: className,
153
+ ...rest,
154
+ navigationComponent: navigationComponent
155
+ }) : /*#__PURE__*/ _jsx(InternalSideNavigationTrigger, {
156
+ id: id,
157
+ title: title,
158
+ isActive: isActive === true || undefined,
159
+ icon: icon,
160
+ iconActive: iconActive,
161
+ tag: tag,
162
+ className: className,
163
+ ...rest
164
+ }),
165
+ /*#__PURE__*/ _jsx("div", {
166
+ className: Styles.navItemGroupToggleWrapper,
167
+ children: withTooltip(/*#__PURE__*/ _jsx(Button, {
168
+ appearance: "secondary",
169
+ size: "small",
170
+ icon: submenuExpanded ? SvgGroupCollapse : SvgGroupExpand,
171
+ className: Styles.navItemGroupToggle,
172
+ onClick: onExpandToggle,
173
+ "aria-label": "Toggle submenu",
174
+ "data-cy": "nav-item-group-expand"
175
+ }), 'View Submenu', {
176
+ placement: 'top-end'
177
+ })
178
+ })
179
+ ]
180
180
  }),
181
181
  /*#__PURE__*/ _jsx("div", {
182
182
  className: classNames(Styles.submenuWrapper, {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/titan-layout/layout-sidebar-links-internal.tsx"],"sourcesContent":["import { 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 { 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';\n\nexport interface InternalSideNavigationItemContentProps {\n icon: IconProps['svg'] | undefined;\n iconActive: IconProps['svg'] | undefined;\n title: string;\n submenuExpanded: boolean | undefined;\n tag: BadgeTagProps | undefined;\n onExpandToggle?: (e: MouseEvent<never>) => void;\n}\n\nconst InternalSideNavigationItemContent: FC<InternalSideNavigationItemContentProps> = ({\n icon,\n iconActive,\n tag,\n title,\n submenuExpanded,\n onExpandToggle,\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 {typeof submenuExpanded === 'boolean' && (\n <div className={Styles.navItemGroupToggleWrapper}>\n <Icon\n svg={submenuExpanded ? SvgGroupCollapse : SvgGroupExpand}\n className={Styles.navItemGroupToggle}\n onClick={onExpandToggle}\n />\n <div\n className={Styles.navItemGroupToggleClick}\n data-cy=\"nav-item-group-expand\"\n onClick={onExpandToggle}\n />\n </div>\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\n submenuExpanded: boolean | undefined;\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 navigationComponent: NavigationComponent,\n submenuExpanded,\n onExpandToggle,\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 submenuExpanded={submenuExpanded}\n onExpandToggle={onExpandToggle}\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 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 submenuExpanded: boolean | undefined;\n tag: BadgeTagProps | undefined;\n onClick?: (e: MouseEvent<never>) => void;\n onExpandToggle?: (e: MouseEvent<never>) => void;\n}> = ({\n id,\n title,\n isActive,\n icon,\n iconActive,\n className,\n\n submenuExpanded,\n tag,\n onExpandToggle,\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 submenuExpanded={submenuExpanded}\n onExpandToggle={onExpandToggle}\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 onClick,\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]: !!onClick,\n [Styles.submenuLinkActive]: isActive === true,\n })}\n onClick={onClick}\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 onExpandToggle?: (e: MouseEvent<never>) => void;\n onClick?: (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 return (\n <div className={classNames(Styles.navGroupWrapper)}>\n <div className={Styles.navGroupItem}>\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 submenuExpanded={submenuExpanded}\n onExpandToggle={onExpandToggle}\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 submenuExpanded={submenuExpanded}\n onExpandToggle={onExpandToggle}\n onClick={onClick}\n />\n )}\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":["Icon","SvgGroupCollapse","SvgGroupExpand","classNames","Fragment","BadgeTag","Styles","InternalSideNavigationItemContent","icon","iconActive","tag","title","submenuExpanded","onExpandToggle","div","className","navItemIconWrapper","svg","navIcon","navIconInactive","navIconActive","navItemTextExpanded","data-cy","data","navItemCounter","longClassName","navItemCounterLong","navItemGroupToggleWrapper","navItemGroupToggle","onClick","navItemGroupToggleClick","navItemTextCollapsed","navItemTextSmall","length","InternalSideNavigationLink","id","to","isActive","navigationComponent","NavigationComponent","rest","data-pendo","navItem","navLink","navItemActive","navItemIconSwitch","undefined","activeClassName","InternalSideNavigationTrigger","InternalSideNavigationGroupLink","parentId","submenuItem","submenuLink","submenuLinkActive","span","submenuLinkCounter","InternalSideNavigationGroupTrigger","InternalSideNavigationGroupDivider","divider","InternalSideNavigationGroup","children","navGroupWrapper","navGroupItem","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 '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 +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,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,2CAiCtB;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,2CA6BzB"}
1
+ {"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"}
@@ -27,8 +27,7 @@ const WrappedLink = ({ children, isMobile, wrapper: WrapperComponent })=>{
27
27
  tag: tagData,
28
28
  className: className,
29
29
  ...rest,
30
- navigationComponent: NavigationComponent,
31
- submenuExpanded: undefined
30
+ navigationComponent: NavigationComponent
32
31
  });
33
32
  return wrapper ? /*#__PURE__*/ _jsx(WrappedLink, {
34
33
  isMobile: isMobile,
@@ -50,8 +49,7 @@ const WrappedLink = ({ children, isMobile, wrapper: WrapperComponent })=>{
50
49
  iconActive: iconActive,
51
50
  tag: tagData,
52
51
  className: className,
53
- ...rest,
54
- submenuExpanded: undefined
52
+ ...rest
55
53
  });
56
54
  return wrapper ? /*#__PURE__*/ _jsx(WrappedLink, {
57
55
  isMobile: isMobile,