@servicetitan/navigation 12.0.3 → 12.0.4-canary.267.0da7a87.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 (17) hide show
  1. package/dist/components/titan-layout/layout-sidebar.module.less +4 -5
  2. package/dist/components/titan-layout/titan-layout.d.ts +1 -0
  3. package/dist/components/titan-layout/titan-layout.d.ts.map +1 -1
  4. package/dist/components/titan-layout/titan-layout.js +9 -23
  5. package/dist/components/titan-layout/titan-layout.js.map +1 -1
  6. package/dist/components/titan-layout/titan-layout.module.less +3 -3
  7. package/dist/components/titan-layout/titan-layout.stories.d.ts.map +1 -1
  8. package/dist/utils/use-breakpoint.d.ts +1 -1
  9. package/dist/utils/use-breakpoint.d.ts.map +1 -1
  10. package/dist/utils/use-breakpoint.js +4 -3
  11. package/dist/utils/use-breakpoint.js.map +1 -1
  12. package/package.json +2 -2
  13. package/src/components/titan-layout/layout-sidebar.module.less +4 -5
  14. package/src/components/titan-layout/titan-layout.module.less +3 -3
  15. package/src/components/titan-layout/titan-layout.stories.tsx +11 -3
  16. package/src/components/titan-layout/titan-layout.tsx +11 -20
  17. package/src/utils/use-breakpoint.ts +3 -3
package/dist/components/titan-layout/layout-sidebar.module.less CHANGED
@@ -17,13 +17,12 @@
17
17
 
18
18
  // mobile version
19
19
  .nav-drawer {
20
- // display: none;
21
20
  position: fixed;
22
21
  max-width: 400px;
23
22
  width: 0;
24
- height: 100vh;
23
+ height: 100%;
25
24
  top: 0;
26
- left: -100vh;
25
+ left: -100vw;
27
26
  z-index: 991;
28
27
 
29
28
  -webkit-transition: width 200ms ease-in-out;
@@ -69,8 +68,8 @@
69
68
 
70
69
  .nav-drawer-backdrop {
71
70
  position: fixed;
72
- height: 100vh;
73
- width: 100vw;
71
+ height: 100%;
72
+ width: 100%;
74
73
  top: 0;
75
74
  left: 0;
76
75
  z-index: 991;
package/dist/components/titan-layout/titan-layout.d.ts CHANGED
@@ -31,6 +31,7 @@ export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
31
31
  extraLinksTop?: ReactElement;
32
32
  extraText?: string;
33
33
  minContentWidth?: number;
34
+ noMobile?: boolean;
34
35
  };
35
36
  export declare const TitanLayout: FC<TitanLayoutProps> & {
36
37
  Link: typeof TitanLayoutSidebarLink;
package/dist/components/titan-layout/titan-layout.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"titan-layout.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.tsx"],"names":[],"mappings":"AACA,OAAO,EAEH,wBAAwB,EACxB,EAAE,EAEF,YAAY,EACZ,SAAS,EAMZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAA2B,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAEhG,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAS/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,OAAO,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAK3F,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACzF,wBAAwB;IACxB,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAE5C,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAE5B,uBAAuB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,oCAAoC;IACpC,mBAAmB,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAEhD,qCAAqC;IACrC,mBAAmB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE3C,sEAAsE;IACtE,uBAAuB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE/C,iBAAiB;IACjB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAE5B,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAElD,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,GAAG,CAAC,EAAE,YAAY,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAyXF,eAAO,MAAM,WAAW;;;CAGtB,CAAC"}
1
+ {"version":3,"file":"titan-layout.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.tsx"],"names":[],"mappings":"AACA,OAAO,EAEH,wBAAwB,EACxB,EAAE,EAEF,YAAY,EACZ,SAAS,EAMZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAA2B,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAEhG,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAS/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAErD,OAAO,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAK3F,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG;IACzF,wBAAwB;IACxB,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAE5C,kDAAkD;IAClD,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAE5B,uBAAuB;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,oCAAoC;IACpC,mBAAmB,CAAC,EAAE,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAEhD,qCAAqC;IACrC,mBAAmB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE3C,sEAAsE;IACtE,uBAAuB,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAE/C,iBAAiB;IACjB,IAAI,CAAC,EAAE,oBAAoB,CAAC;IAE5B,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAElD,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,GAAG,CAAC,EAAE,YAAY,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AA+WF,eAAO,MAAM,WAAW;;;CAGtB,CAAC"}
package/dist/components/titan-layout/titan-layout.js CHANGED
@@ -32,8 +32,8 @@ const useAppearance = (appearance)=>useMemo(()=>{
32
32
  }, [
33
33
  appearance
34
34
  ]);
35
- const TitanLayoutComponent = ({ appearance = 'anvil2', navVariant = 'left', id, children, contentOnly, navigationComponent, header, top, profile, state, logo, onStateChange, navigationMainItems, navigationOverflowItems, extraLinks, extraLinksTop, extraText, minContentWidth, sideTop })=>{
36
- const breakpoint = useTitanBreakpoint();
35
+ const TitanLayoutComponent = ({ appearance = 'anvil2', navVariant = 'left', id, children, contentOnly, navigationComponent, header, top, profile, state, logo, onStateChange, navigationMainItems, navigationOverflowItems, extraLinks, extraLinksTop, extraText, minContentWidth, noMobile, sideTop })=>{
36
+ const breakpoint = useTitanBreakpoint(noMobile);
37
37
  const context = useMemo(()=>({
38
38
  NavigationComponent: navigationComponent !== null && navigationComponent !== void 0 ? navigationComponent : DefaultNavLinkComponent,
39
39
  breakpoint,
@@ -141,23 +141,12 @@ const TitanLayoutComponent = ({ appearance = 'anvil2', navVariant = 'left', id,
141
141
  breakpoint.width
142
142
  ]);
143
143
  const contentStyles = useMemo(()=>{
144
- if (view.isAnvil2) {
144
+ if (view.isAnvil2 || view.isLegacy) {
145
145
  return offsetTopStyles;
146
146
  }
147
- if (view.isLegacy) {
148
- return {
149
- ...limitContentWidth ? {
150
- display: 'flex',
151
- flexDirection: 'column',
152
- minHeight: '100vh'
153
- } : {},
154
- ...offsetTopStyles
155
- };
156
- }
157
147
  }, [
158
148
  view,
159
- offsetTopStyles,
160
- limitContentWidth
149
+ offsetTopStyles
161
150
  ]);
162
151
  const layoutClass = view.isLegacy ? Styles.layoutLegacy : view.isAnvil1 ? Styles.layoutAnvil1 : Styles.layoutAnvil2;
163
152
  return /*#__PURE__*/ _jsx(LayoutContext.Provider, {
@@ -172,7 +161,7 @@ const TitanLayoutComponent = ({ appearance = 'anvil2', navVariant = 'left', id,
172
161
  }, layoutClass),
173
162
  style: contentStyles,
174
163
  children: [
175
- view.isSequent && /*#__PURE__*/ _jsx("div", {
164
+ /*#__PURE__*/ _jsx("div", {
176
165
  className: Styles.topPlaceholder
177
166
  }),
178
167
  hasTopBar && (navVariant === 'left' ? /*#__PURE__*/ _jsx(LayoutHeader, {
@@ -238,10 +227,10 @@ const TitanLayoutComponent = ({ appearance = 'anvil2', navVariant = 'left', id,
238
227
  }) : undefined
239
228
  })
240
229
  }),
241
- view.isSequent && /*#__PURE__*/ _jsx(TitanLayoutHeaderObserved, {
230
+ view.isAnvil2 ? /*#__PURE__*/ _jsx(TitanLayoutHeaderObserved, {
242
231
  heightChange: updateIndicatorsHeight,
243
232
  children: header
244
- }),
233
+ }) : view.isLegacy ? header : null,
245
234
  view.isAnvil1 ? /*#__PURE__*/ _jsx(LayoutContentAnvil1, {
246
235
  header: header,
247
236
  minWidth: limitContentWidth,
@@ -330,11 +319,8 @@ const LayoutContentLegacy = ({ children, minWidth })=>{
330
319
  minWidth
331
320
  ]);
332
321
  return /*#__PURE__*/ _jsx("div", {
333
- className: minWidth ? 'of-x-auto flex-basis-0 flex-grow-1' : undefined,
334
- children: /*#__PURE__*/ _jsx("div", {
335
- style: minWidth ? innerContentStyles : undefined,
336
- children: children
337
- })
322
+ style: minWidth ? innerContentStyles : undefined,
323
+ children: children
338
324
  });
339
325
  };
340
326
  export const TitanLayout = Object.assign(TitanLayoutComponent, {
package/dist/components/titan-layout/titan-layout.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/titan-layout/titan-layout.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport {\n CSSProperties,\n ComponentPropsWithoutRef,\n FC,\n Fragment,\n ReactElement,\n ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { NavigationItemData } from '../../utils/navigation';\nimport { DefaultNavLinkComponent, NavLinkComponentProps } from '../../utils/navigation-context';\nimport { useTitanBreakpoint } from '../../utils/use-breakpoint';\nimport { TitanLayoutState } from './interface';\nimport {\n LayoutContext,\n LayoutPlacementContext,\n TitanLayoutContextType,\n TitanLayoutSidebarContextType,\n} from './layout-context';\nimport { LayoutHeader } from './layout-header';\nimport { LayoutHeaderDark } from './layout-header-dark';\nimport { TitanLayoutLogoProps } from './layout-logo';\nimport { LayoutSidebar } from './layout-sidebar';\nimport { TitanLayoutSidebarLink, TitanLayoutSidebarTrigger } from './layout-sidebar-links';\nimport { InternalSideNavigationTrigger } from './layout-sidebar-links-internal';\nimport { useNotificationsState } from './notifications-context';\nimport * as Styles from './titan-layout.module.less';\n\nexport type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & {\n /** layout appearance */\n appearance?: 'legacy' | 'anvil1' | 'anvil2';\n\n /** layout navigation variant (left by default) */\n navVariant?: 'left' | 'top';\n\n /** layout's content */\n children?: ReactNode;\n\n /** show only content without side and top bars */\n contentOnly?: boolean;\n\n /** component used for navigation */\n navigationComponent?: FC<NavLinkComponentProps>;\n\n /** data for main navigation links */\n navigationMainItems?: NavigationItemData[];\n\n /** data for overflow navigation links (used only with top variant) */\n navigationOverflowItems?: NavigationItemData[];\n\n /** logo props */\n logo?: TitanLayoutLogoProps;\n\n state?: TitanLayoutState;\n onStateChange?: (state: TitanLayoutState) => void;\n\n header?: ReactElement;\n top?: ReactElement;\n sideTop?: ReactElement[];\n profile?: ReactElement;\n extraLinks?: ReactElement;\n extraLinksTop?: ReactElement;\n extraText?: string;\n minContentWidth?: number;\n};\n\nconst defaultSidebarContext: TitanLayoutSidebarContextType = {\n styles: {\n popoverContent: {\n '--background-color-strong': '#24323C',\n 'color': 'var(--color-white)',\n } as CSSProperties,\n },\n};\n\nconst useAppearance = (appearance: TitanLayoutProps['appearance']) =>\n useMemo(() => {\n const isLegacy = appearance === 'legacy';\n const isAnvil1 = appearance === 'anvil1';\n const isAnvil2 = appearance === 'anvil2';\n\n return {\n isLegacy,\n isAnvil1,\n isAnvil2,\n isSequent: isLegacy || isAnvil2,\n };\n }, [appearance]);\n\nconst TitanLayoutComponent: FC<TitanLayoutProps> = ({\n appearance = 'anvil2',\n navVariant = 'left',\n id,\n children,\n contentOnly,\n navigationComponent,\n header,\n top,\n profile,\n state,\n logo,\n onStateChange,\n navigationMainItems,\n navigationOverflowItems,\n extraLinks,\n extraLinksTop,\n extraText,\n minContentWidth,\n sideTop,\n}) => {\n const breakpoint = useTitanBreakpoint();\n const context: TitanLayoutContextType = useMemo(\n () => ({\n NavigationComponent: navigationComponent ?? DefaultNavLinkComponent,\n breakpoint,\n isTitanLayout: true,\n sidebar: defaultSidebarContext,\n }),\n [navigationComponent, breakpoint]\n );\n const view = useAppearance(appearance);\n const [mobileDrawerOpened, setMobileDrawerOpened] = useState(false);\n const { hasNotifications, NotificationsContextProvider } = useNotificationsState();\n const [offsetTopStyles, setOffsetTopStyles] = useState<object>({});\n const updateIndicatorsHeight = useCallback((offset: number) => {\n setOffsetTopStyles({\n '--content-offset-top': `calc(var(--nav-offset-top) + ${offset}px)`,\n });\n }, []);\n\n const isMobile = breakpoint.isMobile;\n const hasSideBar =\n !contentOnly &&\n (navVariant === 'left' || (navVariant === 'top' && isMobile)) &&\n (!!navigationMainItems?.length || !!sideTop?.length);\n const hasTopBar = !contentOnly;\n\n useEffect(() => {\n if (view.isAnvil1) {\n const bodyClassName = 'of-hidden-i';\n document.body.classList.add(bodyClassName);\n return () => document.body.classList.remove(bodyClassName);\n }\n }, [view.isAnvil1]);\n\n const onBurgerClick = useCallback((e: MouseEvent) => {\n setMobileDrawerOpened(true);\n e.stopPropagation();\n }, []);\n\n const onBarExpandChange = useCallback(\n (expanded: boolean) => {\n if (isMobile) {\n setMobileDrawerOpened(false);\n } else {\n onStateChange?.({ navCollapsed: !expanded });\n }\n },\n [onStateChange, isMobile]\n );\n const onSubmenuExpandChange = useCallback(\n (id: string, expanded: boolean) => {\n onStateChange?.({\n navCollapsed: state?.navCollapsed ?? false,\n submenuExpanded: expanded ? id : undefined,\n });\n },\n [state, onStateChange]\n );\n const sidebarNavItems = useMemo(() => {\n if (!hasSideBar) {\n return undefined;\n }\n\n if (navVariant === 'left') {\n return navigationMainItems;\n }\n\n return [...(navigationMainItems ?? []), ...(navigationOverflowItems ?? [])];\n }, [hasSideBar, navigationMainItems, navigationOverflowItems, navVariant]);\n\n const hasMenuNotifications = useMemo(() => {\n try {\n return (\n sidebarNavItems?.some(item => {\n if (item.counter || item.tag?.value) {\n return true;\n } else if (item.submenu) {\n return item.submenu.groups.some(group =>\n group.links.some(link => !!link.counter || !!link.tag?.value)\n );\n }\n return false;\n }) ?? false\n );\n } catch {\n return false;\n }\n }, [sidebarNavItems]);\n\n const limitContentWidth = useMemo(() => {\n if (view.isAnvil2 || !minContentWidth) {\n return undefined;\n }\n\n if (breakpoint.width < minContentWidth) {\n return minContentWidth;\n }\n }, [view, minContentWidth, breakpoint.width]);\n\n const contentStyles = useMemo(() => {\n if (view.isAnvil2) {\n return offsetTopStyles;\n }\n\n if (view.isLegacy) {\n return {\n ...(limitContentWidth\n ? { display: 'flex', flexDirection: 'column', minHeight: '100vh' }\n : {}),\n ...offsetTopStyles,\n };\n }\n }, [view, offsetTopStyles, limitContentWidth]);\n\n const layoutClass = view.isLegacy\n ? Styles.layoutLegacy\n : view.isAnvil1\n ? Styles.layoutAnvil1\n : Styles.layoutAnvil2;\n\n return (\n <LayoutContext.Provider value={context}>\n <LayoutPlacementContext.Provider value=\"unset\">\n <div\n id={id}\n className={classNames(\n Styles.layout,\n isMobile ? Styles.layoutMobile : Styles.layoutDesktop,\n hasTopBar &&\n (navVariant === 'left' || !top\n ? Styles.layoutTopLight\n : Styles.layoutTopNav),\n {\n [Styles.layoutNavSlim]: !isMobile && hasSideBar && state?.navCollapsed,\n [Styles.layoutNavWide]: !isMobile && hasSideBar && !state?.navCollapsed,\n },\n layoutClass\n )}\n style={contentStyles}\n >\n {view.isSequent && <div className={Styles.topPlaceholder} />}\n {hasTopBar &&\n (navVariant === 'left' ? (\n <LayoutHeader\n className={Styles.top}\n variant=\"light\"\n logo={logo}\n profile={isMobile ? undefined : profile}\n center={top}\n rightText={isMobile ? undefined : extraText}\n right={\n <Fragment>\n {extraLinksTop}\n {!isMobile && extraLinks}\n </Fragment>\n }\n isMobile={isMobile}\n hasNotifications={hasNotifications || hasMenuNotifications}\n onBurgerClick={onBurgerClick}\n />\n ) : (\n <LayoutHeaderDark\n className={Styles.top}\n logo={logo}\n profile={isMobile ? undefined : profile}\n center={top}\n rightText={isMobile ? undefined : extraText}\n right={\n <Fragment>\n {extraLinksTop}\n {!isMobile && extraLinks}\n </Fragment>\n }\n isMobile={isMobile}\n hasNotifications={hasNotifications || hasMenuNotifications}\n onBurgerClick={onBurgerClick}\n navigationMainItems={navigationMainItems}\n navigationOverflowItems={navigationOverflowItems}\n />\n ))}\n\n {hasSideBar && (\n <NotificationsContextProvider>\n <LayoutSidebar\n className={Styles.side}\n mobile={breakpoint.isMobile}\n barExpanded={!state?.navCollapsed}\n onBarExpandChange={onBarExpandChange}\n submenuExpanded={state?.submenuExpanded}\n onSubmenuExpandChange={onSubmenuExpandChange}\n drawerOpened={mobileDrawerOpened}\n onDrawerOpenChange={setMobileDrawerOpened}\n top={sideTop}\n mainItems={sidebarNavItems}\n navigationComponent={context.NavigationComponent}\n bottom={\n isMobile ? (\n <Fragment>\n {profile}\n {extraLinks}\n {!!extraText && (\n <InternalSideNavigationTrigger\n id=\"--extra-text\"\n title={extraText}\n submenuExpanded={undefined}\n tag={undefined}\n icon={undefined}\n iconActive={undefined}\n />\n )}\n </Fragment>\n ) : undefined\n }\n />\n </NotificationsContextProvider>\n )}\n\n {view.isSequent && (\n <TitanLayoutHeaderObserved heightChange={updateIndicatorsHeight}>\n {header}\n </TitanLayoutHeaderObserved>\n )}\n {view.isAnvil1 ? (\n <LayoutContentAnvil1 header={header} minWidth={limitContentWidth}>\n {children}\n </LayoutContentAnvil1>\n ) : view.isLegacy ? (\n <LayoutContentLegacy minWidth={limitContentWidth}>\n {children}\n </LayoutContentLegacy>\n ) : (\n children\n )}\n </div>\n </LayoutPlacementContext.Provider>\n </LayoutContext.Provider>\n );\n};\n\nconst TitanLayoutHeaderObserved: FC<{\n children: ReactNode;\n heightChange?(value: number): void;\n}> = ({ children, heightChange }) => {\n const ref = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (ref.current) {\n const updatePosition = () => {\n if (ref.current && heightChange) {\n const pos = ref.current.getBoundingClientRect();\n heightChange(pos.height);\n }\n };\n\n const observer = new ResizeObserver(updatePosition);\n observer.observe(ref.current);\n\n updatePosition();\n return () => observer.disconnect();\n }\n }, [heightChange]);\n\n useEffect(() => {\n return () => {\n heightChange?.(0);\n };\n }, [heightChange]);\n return (\n <div ref={ref} className={Styles.contentHeader} data-cy=\"layout-content-header\">\n {children}\n </div>\n );\n};\nconst TitanLayoutHeader: FC<{ children: ReactNode }> = ({ children }) => {\n return (\n <div className={Styles.contentHeader} data-cy=\"layout-content-header\">\n {children}\n </div>\n );\n};\n\nconst LayoutContentAnvil1: FC<{\n children: ReactNode;\n header?: ReactNode;\n minWidth?: number;\n}> = ({ children, header, minWidth }) => {\n const innerContentStyles: CSSProperties = useMemo(\n () => ({\n ...(minWidth ? { minWidth: `${minWidth}px`, overflowX: 'auto' } : {}),\n }),\n [minWidth]\n );\n\n return (\n <Fragment>\n <TitanLayoutHeader>{header}</TitanLayoutHeader>\n <div\n className={classNames(Styles.content, { 'of-x-auto-i': !!minWidth })}\n data-cy=\"layout-content\"\n >\n <div\n className=\"position-relative d-f flex-grow-1 flex-basis-0 of-hidden\"\n style={innerContentStyles}\n >\n {children}\n </div>\n </div>\n </Fragment>\n );\n};\n\nconst LayoutContentLegacy: FC<{\n children: ReactNode;\n minWidth: number | undefined;\n}> = ({ children, minWidth }) => {\n const innerContentStyles: CSSProperties = useMemo(\n () => ({\n position: 'relative',\n minWidth: `${minWidth}px`,\n }),\n [minWidth]\n );\n\n return (\n <div className={minWidth ? 'of-x-auto flex-basis-0 flex-grow-1' : undefined}>\n <div style={minWidth ? innerContentStyles : undefined}>{children}</div>\n </div>\n );\n};\n\nexport const TitanLayout = Object.assign(TitanLayoutComponent, {\n Link: TitanLayoutSidebarLink,\n Trigger: TitanLayoutSidebarTrigger,\n});\n"],"names":["classNames","Fragment","useCallback","useEffect","useMemo","useRef","useState","DefaultNavLinkComponent","useTitanBreakpoint","LayoutContext","LayoutPlacementContext","LayoutHeader","LayoutHeaderDark","LayoutSidebar","TitanLayoutSidebarLink","TitanLayoutSidebarTrigger","InternalSideNavigationTrigger","useNotificationsState","Styles","defaultSidebarContext","styles","popoverContent","useAppearance","appearance","isLegacy","isAnvil1","isAnvil2","isSequent","TitanLayoutComponent","navVariant","id","children","contentOnly","navigationComponent","header","top","profile","state","logo","onStateChange","navigationMainItems","navigationOverflowItems","extraLinks","extraLinksTop","extraText","minContentWidth","sideTop","breakpoint","context","NavigationComponent","isTitanLayout","sidebar","view","mobileDrawerOpened","setMobileDrawerOpened","hasNotifications","NotificationsContextProvider","offsetTopStyles","setOffsetTopStyles","updateIndicatorsHeight","offset","isMobile","hasSideBar","length","hasTopBar","bodyClassName","document","body","classList","add","remove","onBurgerClick","e","stopPropagation","onBarExpandChange","expanded","navCollapsed","onSubmenuExpandChange","submenuExpanded","undefined","sidebarNavItems","hasMenuNotifications","some","item","counter","tag","value","submenu","groups","group","links","link","limitContentWidth","width","contentStyles","display","flexDirection","minHeight","layoutClass","layoutLegacy","layoutAnvil1","layoutAnvil2","Provider","div","className","layout","layoutMobile","layoutDesktop","layoutTopLight","layoutTopNav","layoutNavSlim","layoutNavWide","style","topPlaceholder","variant","center","rightText","right","side","mobile","barExpanded","drawerOpened","onDrawerOpenChange","mainItems","bottom","title","icon","iconActive","TitanLayoutHeaderObserved","heightChange","LayoutContentAnvil1","minWidth","LayoutContentLegacy","ref","current","updatePosition","pos","getBoundingClientRect","height","observer","ResizeObserver","observe","disconnect","contentHeader","data-cy","TitanLayoutHeader","innerContentStyles","overflowX","content","position","TitanLayout","Object","assign","Link","Trigger"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../src/components/titan-layout/titan-layout.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport {\n CSSProperties,\n ComponentPropsWithoutRef,\n FC,\n Fragment,\n ReactElement,\n ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { NavigationItemData } from '../../utils/navigation';\nimport { DefaultNavLinkComponent, NavLinkComponentProps } from '../../utils/navigation-context';\nimport { useTitanBreakpoint } from '../../utils/use-breakpoint';\nimport { TitanLayoutState } from './interface';\nimport {\n LayoutContext,\n LayoutPlacementContext,\n TitanLayoutContextType,\n TitanLayoutSidebarContextType,\n} from './layout-context';\nimport { LayoutHeader } from './layout-header';\nimport { LayoutHeaderDark } from './layout-header-dark';\nimport { TitanLayoutLogoProps } from './layout-logo';\nimport { LayoutSidebar } from './layout-sidebar';\nimport { TitanLayoutSidebarLink, TitanLayoutSidebarTrigger } from './layout-sidebar-links';\nimport { InternalSideNavigationTrigger } from './layout-sidebar-links-internal';\nimport { useNotificationsState } from './notifications-context';\nimport * as Styles from './titan-layout.module.less';\n\nexport type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & {\n /** layout appearance */\n appearance?: 'legacy' | 'anvil1' | 'anvil2';\n\n /** layout navigation variant (left by default) */\n navVariant?: 'left' | 'top';\n\n /** layout's content */\n children?: ReactNode;\n\n /** show only content without side and top bars */\n contentOnly?: boolean;\n\n /** component used for navigation */\n navigationComponent?: FC<NavLinkComponentProps>;\n\n /** data for main navigation links */\n navigationMainItems?: NavigationItemData[];\n\n /** data for overflow navigation links (used only with top variant) */\n navigationOverflowItems?: NavigationItemData[];\n\n /** logo props */\n logo?: TitanLayoutLogoProps;\n\n state?: TitanLayoutState;\n onStateChange?: (state: TitanLayoutState) => void;\n\n header?: ReactElement;\n top?: ReactElement;\n sideTop?: ReactElement[];\n profile?: ReactElement;\n extraLinks?: ReactElement;\n extraLinksTop?: ReactElement;\n extraText?: string;\n minContentWidth?: number;\n noMobile?: boolean;\n};\n\nconst defaultSidebarContext: TitanLayoutSidebarContextType = {\n styles: {\n popoverContent: {\n '--background-color-strong': '#24323C',\n 'color': 'var(--color-white)',\n } as CSSProperties,\n },\n};\n\nconst useAppearance = (appearance: TitanLayoutProps['appearance']) =>\n useMemo(() => {\n const isLegacy = appearance === 'legacy';\n const isAnvil1 = appearance === 'anvil1';\n const isAnvil2 = appearance === 'anvil2';\n\n return {\n isLegacy,\n isAnvil1,\n isAnvil2,\n isSequent: isLegacy || isAnvil2,\n };\n }, [appearance]);\n\nconst TitanLayoutComponent: FC<TitanLayoutProps> = ({\n appearance = 'anvil2',\n navVariant = 'left',\n id,\n children,\n contentOnly,\n navigationComponent,\n header,\n top,\n profile,\n state,\n logo,\n onStateChange,\n navigationMainItems,\n navigationOverflowItems,\n extraLinks,\n extraLinksTop,\n extraText,\n minContentWidth,\n noMobile,\n sideTop,\n}) => {\n const breakpoint = useTitanBreakpoint(noMobile);\n const context: TitanLayoutContextType = useMemo(\n () => ({\n NavigationComponent: navigationComponent ?? DefaultNavLinkComponent,\n breakpoint,\n isTitanLayout: true,\n sidebar: defaultSidebarContext,\n }),\n [navigationComponent, breakpoint]\n );\n const view = useAppearance(appearance);\n const [mobileDrawerOpened, setMobileDrawerOpened] = useState(false);\n const { hasNotifications, NotificationsContextProvider } = useNotificationsState();\n const [offsetTopStyles, setOffsetTopStyles] = useState<object>({});\n const updateIndicatorsHeight = useCallback((offset: number) => {\n setOffsetTopStyles({\n '--content-offset-top': `calc(var(--nav-offset-top) + ${offset}px)`,\n });\n }, []);\n\n const isMobile = breakpoint.isMobile;\n const hasSideBar =\n !contentOnly &&\n (navVariant === 'left' || (navVariant === 'top' && isMobile)) &&\n (!!navigationMainItems?.length || !!sideTop?.length);\n const hasTopBar = !contentOnly;\n\n useEffect(() => {\n if (view.isAnvil1) {\n const bodyClassName = 'of-hidden-i';\n document.body.classList.add(bodyClassName);\n return () => document.body.classList.remove(bodyClassName);\n }\n }, [view.isAnvil1]);\n\n const onBurgerClick = useCallback((e: MouseEvent) => {\n setMobileDrawerOpened(true);\n e.stopPropagation();\n }, []);\n\n const onBarExpandChange = useCallback(\n (expanded: boolean) => {\n if (isMobile) {\n setMobileDrawerOpened(false);\n } else {\n onStateChange?.({ navCollapsed: !expanded });\n }\n },\n [onStateChange, isMobile]\n );\n const onSubmenuExpandChange = useCallback(\n (id: string, expanded: boolean) => {\n onStateChange?.({\n navCollapsed: state?.navCollapsed ?? false,\n submenuExpanded: expanded ? id : undefined,\n });\n },\n [state, onStateChange]\n );\n const sidebarNavItems = useMemo(() => {\n if (!hasSideBar) {\n return undefined;\n }\n\n if (navVariant === 'left') {\n return navigationMainItems;\n }\n\n return [...(navigationMainItems ?? []), ...(navigationOverflowItems ?? [])];\n }, [hasSideBar, navigationMainItems, navigationOverflowItems, navVariant]);\n\n const hasMenuNotifications = useMemo(() => {\n try {\n return (\n sidebarNavItems?.some(item => {\n if (item.counter || item.tag?.value) {\n return true;\n } else if (item.submenu) {\n return item.submenu.groups.some(group =>\n group.links.some(link => !!link.counter || !!link.tag?.value)\n );\n }\n return false;\n }) ?? false\n );\n } catch {\n return false;\n }\n }, [sidebarNavItems]);\n\n const limitContentWidth = useMemo(() => {\n if (view.isAnvil2 || !minContentWidth) {\n return undefined;\n }\n\n if (breakpoint.width < minContentWidth) {\n return minContentWidth;\n }\n }, [view, minContentWidth, breakpoint.width]);\n\n const contentStyles = useMemo(() => {\n if (view.isAnvil2 || view.isLegacy) {\n return offsetTopStyles;\n }\n }, [view, offsetTopStyles]);\n\n const layoutClass = view.isLegacy\n ? Styles.layoutLegacy\n : view.isAnvil1\n ? Styles.layoutAnvil1\n : Styles.layoutAnvil2;\n\n return (\n <LayoutContext.Provider value={context}>\n <LayoutPlacementContext.Provider value=\"unset\">\n <div\n id={id}\n className={classNames(\n Styles.layout,\n isMobile ? Styles.layoutMobile : Styles.layoutDesktop,\n hasTopBar &&\n (navVariant === 'left' || !top\n ? Styles.layoutTopLight\n : Styles.layoutTopNav),\n {\n [Styles.layoutNavSlim]: !isMobile && hasSideBar && state?.navCollapsed,\n [Styles.layoutNavWide]: !isMobile && hasSideBar && !state?.navCollapsed,\n },\n layoutClass\n )}\n style={contentStyles}\n >\n <div className={Styles.topPlaceholder} />\n {hasTopBar &&\n (navVariant === 'left' ? (\n <LayoutHeader\n className={Styles.top}\n variant=\"light\"\n logo={logo}\n profile={isMobile ? undefined : profile}\n center={top}\n rightText={isMobile ? undefined : extraText}\n right={\n <Fragment>\n {extraLinksTop}\n {!isMobile && extraLinks}\n </Fragment>\n }\n isMobile={isMobile}\n hasNotifications={hasNotifications || hasMenuNotifications}\n onBurgerClick={onBurgerClick}\n />\n ) : (\n <LayoutHeaderDark\n className={Styles.top}\n logo={logo}\n profile={isMobile ? undefined : profile}\n center={top}\n rightText={isMobile ? undefined : extraText}\n right={\n <Fragment>\n {extraLinksTop}\n {!isMobile && extraLinks}\n </Fragment>\n }\n isMobile={isMobile}\n hasNotifications={hasNotifications || hasMenuNotifications}\n onBurgerClick={onBurgerClick}\n navigationMainItems={navigationMainItems}\n navigationOverflowItems={navigationOverflowItems}\n />\n ))}\n\n {hasSideBar && (\n <NotificationsContextProvider>\n <LayoutSidebar\n className={Styles.side}\n mobile={breakpoint.isMobile}\n barExpanded={!state?.navCollapsed}\n onBarExpandChange={onBarExpandChange}\n submenuExpanded={state?.submenuExpanded}\n onSubmenuExpandChange={onSubmenuExpandChange}\n drawerOpened={mobileDrawerOpened}\n onDrawerOpenChange={setMobileDrawerOpened}\n top={sideTop}\n mainItems={sidebarNavItems}\n navigationComponent={context.NavigationComponent}\n bottom={\n isMobile ? (\n <Fragment>\n {profile}\n {extraLinks}\n {!!extraText && (\n <InternalSideNavigationTrigger\n id=\"--extra-text\"\n title={extraText}\n submenuExpanded={undefined}\n tag={undefined}\n icon={undefined}\n iconActive={undefined}\n />\n )}\n </Fragment>\n ) : undefined\n }\n />\n </NotificationsContextProvider>\n )}\n\n {view.isAnvil2 ? (\n <TitanLayoutHeaderObserved heightChange={updateIndicatorsHeight}>\n {header}\n </TitanLayoutHeaderObserved>\n ) : view.isLegacy ? (\n header\n ) : null}\n {view.isAnvil1 ? (\n <LayoutContentAnvil1 header={header} minWidth={limitContentWidth}>\n {children}\n </LayoutContentAnvil1>\n ) : view.isLegacy ? (\n <LayoutContentLegacy minWidth={limitContentWidth}>\n {children}\n </LayoutContentLegacy>\n ) : (\n children\n )}\n </div>\n </LayoutPlacementContext.Provider>\n </LayoutContext.Provider>\n );\n};\n\nconst TitanLayoutHeaderObserved: FC<{\n children: ReactNode;\n heightChange?(value: number): void;\n}> = ({ children, heightChange }) => {\n const ref = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (ref.current) {\n const updatePosition = () => {\n if (ref.current && heightChange) {\n const pos = ref.current.getBoundingClientRect();\n heightChange(pos.height);\n }\n };\n\n const observer = new ResizeObserver(updatePosition);\n observer.observe(ref.current);\n\n updatePosition();\n return () => observer.disconnect();\n }\n }, [heightChange]);\n\n useEffect(() => {\n return () => {\n heightChange?.(0);\n };\n }, [heightChange]);\n return (\n <div ref={ref} className={Styles.contentHeader} data-cy=\"layout-content-header\">\n {children}\n </div>\n );\n};\nconst TitanLayoutHeader: FC<{ children: ReactNode }> = ({ children }) => {\n return (\n <div className={Styles.contentHeader} data-cy=\"layout-content-header\">\n {children}\n </div>\n );\n};\n\nconst LayoutContentAnvil1: FC<{\n children: ReactNode;\n header?: ReactNode;\n minWidth?: number;\n}> = ({ children, header, minWidth }) => {\n const innerContentStyles: CSSProperties = useMemo(\n () => ({\n ...(minWidth ? { minWidth: `${minWidth}px`, overflowX: 'auto' } : {}),\n }),\n [minWidth]\n );\n\n return (\n <Fragment>\n <TitanLayoutHeader>{header}</TitanLayoutHeader>\n <div\n className={classNames(Styles.content, { 'of-x-auto-i': !!minWidth })}\n data-cy=\"layout-content\"\n >\n <div\n className=\"position-relative d-f flex-grow-1 flex-basis-0 of-hidden\"\n style={innerContentStyles}\n >\n {children}\n </div>\n </div>\n </Fragment>\n );\n};\n\nconst LayoutContentLegacy: FC<{\n children: ReactNode;\n minWidth: number | undefined;\n}> = ({ children, minWidth }) => {\n const innerContentStyles: CSSProperties = useMemo(\n () => ({\n position: 'relative',\n minWidth: `${minWidth}px`,\n }),\n [minWidth]\n );\n\n return <div style={minWidth ? innerContentStyles : undefined}>{children}</div>;\n};\n\nexport const TitanLayout = Object.assign(TitanLayoutComponent, {\n Link: TitanLayoutSidebarLink,\n Trigger: TitanLayoutSidebarTrigger,\n});\n"],"names":["classNames","Fragment","useCallback","useEffect","useMemo","useRef","useState","DefaultNavLinkComponent","useTitanBreakpoint","LayoutContext","LayoutPlacementContext","LayoutHeader","LayoutHeaderDark","LayoutSidebar","TitanLayoutSidebarLink","TitanLayoutSidebarTrigger","InternalSideNavigationTrigger","useNotificationsState","Styles","defaultSidebarContext","styles","popoverContent","useAppearance","appearance","isLegacy","isAnvil1","isAnvil2","isSequent","TitanLayoutComponent","navVariant","id","children","contentOnly","navigationComponent","header","top","profile","state","logo","onStateChange","navigationMainItems","navigationOverflowItems","extraLinks","extraLinksTop","extraText","minContentWidth","noMobile","sideTop","breakpoint","context","NavigationComponent","isTitanLayout","sidebar","view","mobileDrawerOpened","setMobileDrawerOpened","hasNotifications","NotificationsContextProvider","offsetTopStyles","setOffsetTopStyles","updateIndicatorsHeight","offset","isMobile","hasSideBar","length","hasTopBar","bodyClassName","document","body","classList","add","remove","onBurgerClick","e","stopPropagation","onBarExpandChange","expanded","navCollapsed","onSubmenuExpandChange","submenuExpanded","undefined","sidebarNavItems","hasMenuNotifications","some","item","counter","tag","value","submenu","groups","group","links","link","limitContentWidth","width","contentStyles","layoutClass","layoutLegacy","layoutAnvil1","layoutAnvil2","Provider","div","className","layout","layoutMobile","layoutDesktop","layoutTopLight","layoutTopNav","layoutNavSlim","layoutNavWide","style","topPlaceholder","variant","center","rightText","right","side","mobile","barExpanded","drawerOpened","onDrawerOpenChange","mainItems","bottom","title","icon","iconActive","TitanLayoutHeaderObserved","heightChange","LayoutContentAnvil1","minWidth","LayoutContentLegacy","ref","current","updatePosition","pos","getBoundingClientRect","height","observer","ResizeObserver","observe","disconnect","contentHeader","data-cy","TitanLayoutHeader","innerContentStyles","overflowX","content","position","TitanLayout","Object","assign","Link","Trigger"],"mappings":"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"}
package/dist/components/titan-layout/titan-layout.module.less CHANGED
@@ -9,8 +9,7 @@
9
9
  @bg-color-active: rgba(120, 187, 250, 0.2);
10
10
 
11
11
  .layout-anvil1 {
12
- height: calc(100vh - var(--nav-offset-top));
13
- margin-top: var(--nav-offset-top);
12
+ height: 100vh;
14
13
 
15
14
  display: flex;
16
15
  flex-direction: column;
@@ -52,7 +51,8 @@
52
51
  }
53
52
 
54
53
  .layout-legacy,
55
- .layout-anvil2 {
54
+ .layout-anvil2,
55
+ .layout-anvil1 {
56
56
  .top-placeholder {
57
57
  height: var(--nav-offset-top);
58
58
  }
package/dist/components/titan-layout/titan-layout.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"titan-layout.stories.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.stories.tsx"],"names":[],"mappings":"AAsBA,UAAU,iBAAiB;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CACrB;;;;;;UAgBQ,iBAAiB;;AAd1B,wBAeE;AA6QF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CASxD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,MAAM,iBAAiB,4CAS9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,MAAM,iBAAiB,4CAS3D,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CAMxD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,MAAM,iBAAiB,4CAM9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,MAAM,iBAAiB,4CAY3D,CAAC;AAEF,eAAO,MAAM,4BAA4B,GAAI,MAAM,iBAAiB,4CAMnE,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CAQxD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,MAAM,iBAAiB,4CAQ9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,MAAM,iBAAiB,4CAQ3D,CAAC"}
1
+ {"version":3,"file":"titan-layout.stories.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/titan-layout.stories.tsx"],"names":[],"mappings":"AAsBA,UAAU,iBAAiB;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CACrB;;;;;;UAgBQ,iBAAiB;;AAd1B,wBAeE;AAqRF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CASxD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,MAAM,iBAAiB,4CAS9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,MAAM,iBAAiB,4CAS3D,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CAMxD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,MAAM,iBAAiB,4CAM9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,MAAM,iBAAiB,4CAY3D,CAAC;AAEF,eAAO,MAAM,4BAA4B,GAAI,MAAM,iBAAiB,4CAMnE,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,MAAM,iBAAiB,4CAQxD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,MAAM,iBAAiB,4CAQ9D,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,MAAM,iBAAiB,4CAQ3D,CAAC"}
package/dist/utils/use-breakpoint.d.ts CHANGED
@@ -4,5 +4,5 @@ export interface TitanBreakpoint {
4
4
  isMobile: boolean;
5
5
  width: number;
6
6
  }
7
- export declare const useTitanBreakpoint: () => TitanBreakpoint;
7
+ export declare const useTitanBreakpoint: (noMobile?: boolean) => TitanBreakpoint;
8
8
  //# sourceMappingURL=use-breakpoint.d.ts.map
package/dist/utils/use-breakpoint.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"use-breakpoint.d.ts","sourceRoot":"","sources":["../../src/utils/use-breakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAiB,MAAM,sBAAsB,CAAC;AAG5E,MAAM,WAAW,eAAe;IAC5B,IAAI,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAC;IACpC,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,kBAAkB,QAAO,eAWrC,CAAC"}
1
+ {"version":3,"file":"use-breakpoint.d.ts","sourceRoot":"","sources":["../../src/utils/use-breakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAiB,MAAM,sBAAsB,CAAC;AAG5E,MAAM,WAAW,eAAe;IAC5B,IAAI,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAC;IACpC,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,kBAAkB,GAAI,WAAW,OAAO,KAAG,eAWvD,CAAC"}
package/dist/utils/use-breakpoint.js CHANGED
@@ -1,16 +1,17 @@
1
1
  import { useBreakpoint } from '@servicetitan/anvil2';
2
2
  import { useMemo } from 'react';
3
- export const useTitanBreakpoint = ()=>{
3
+ export const useTitanBreakpoint = (noMobile)=>{
4
4
  const breakpoint = useBreakpoint();
5
5
  return useMemo(()=>{
6
6
  var _breakpoint_name, _breakpoint_innerWidth;
7
7
  return {
8
8
  name: (_breakpoint_name = breakpoint === null || breakpoint === void 0 ? void 0 : breakpoint.name) !== null && _breakpoint_name !== void 0 ? _breakpoint_name : 'xl',
9
- isMobile: breakpoint ? breakpoint.innerWidth < 768 : false,
9
+ isMobile: breakpoint && !noMobile ? breakpoint.innerWidth < 768 : false,
10
10
  width: (_breakpoint_innerWidth = breakpoint === null || breakpoint === void 0 ? void 0 : breakpoint.innerWidth) !== null && _breakpoint_innerWidth !== void 0 ? _breakpoint_innerWidth : 0
11
11
  };
12
12
  }, [
13
- breakpoint
13
+ breakpoint,
14
+ noMobile
14
15
  ]);
15
16
  };
16
17
 
package/dist/utils/use-breakpoint.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/utils/use-breakpoint.ts"],"sourcesContent":["import { BreakpointReturnProps, useBreakpoint } from '@servicetitan/anvil2';\nimport { useMemo } from 'react';\n\nexport interface TitanBreakpoint {\n name: BreakpointReturnProps['name'];\n isMobile: boolean;\n width: number;\n}\n\nexport const useTitanBreakpoint = (): TitanBreakpoint => {\n const breakpoint = useBreakpoint();\n\n return useMemo(\n () => ({\n name: breakpoint?.name ?? 'xl',\n isMobile: breakpoint ? breakpoint.innerWidth < 768 : false,\n width: breakpoint?.innerWidth ?? 0,\n }),\n [breakpoint]\n );\n};\n"],"names":["useBreakpoint","useMemo","useTitanBreakpoint","breakpoint","name","isMobile","innerWidth","width"],"mappings":"AAAA,SAAgCA,aAAa,QAAQ,uBAAuB;AAC5E,SAASC,OAAO,QAAQ,QAAQ;AAQhC,OAAO,MAAMC,qBAAqB;IAC9B,MAAMC,aAAaH;IAEnB,OAAOC,QACH;YACUE,kBAECA;eAHJ;YACHC,MAAMD,CAAAA,mBAAAA,uBAAAA,iCAAAA,WAAYC,IAAI,cAAhBD,8BAAAA,mBAAoB;YAC1BE,UAAUF,aAAaA,WAAWG,UAAU,GAAG,MAAM;YACrDC,OAAOJ,CAAAA,yBAAAA,uBAAAA,iCAAAA,WAAYG,UAAU,cAAtBH,oCAAAA,yBAA0B;QACrC;OACA;QAACA;KAAW;AAEpB,EAAE"}
1
+ {"version":3,"sources":["../../src/utils/use-breakpoint.ts"],"sourcesContent":["import { BreakpointReturnProps, useBreakpoint } from '@servicetitan/anvil2';\nimport { useMemo } from 'react';\n\nexport interface TitanBreakpoint {\n name: BreakpointReturnProps['name'];\n isMobile: boolean;\n width: number;\n}\n\nexport const useTitanBreakpoint = (noMobile?: boolean): TitanBreakpoint => {\n const breakpoint = useBreakpoint();\n\n return useMemo(\n () => ({\n name: breakpoint?.name ?? 'xl',\n isMobile: breakpoint && !noMobile ? breakpoint.innerWidth < 768 : false,\n width: breakpoint?.innerWidth ?? 0,\n }),\n [breakpoint, noMobile]\n );\n};\n"],"names":["useBreakpoint","useMemo","useTitanBreakpoint","noMobile","breakpoint","name","isMobile","innerWidth","width"],"mappings":"AAAA,SAAgCA,aAAa,QAAQ,uBAAuB;AAC5E,SAASC,OAAO,QAAQ,QAAQ;AAQhC,OAAO,MAAMC,qBAAqB,CAACC;IAC/B,MAAMC,aAAaJ;IAEnB,OAAOC,QACH;YACUG,kBAECA;eAHJ;YACHC,MAAMD,CAAAA,mBAAAA,uBAAAA,iCAAAA,WAAYC,IAAI,cAAhBD,8BAAAA,mBAAoB;YAC1BE,UAAUF,cAAc,CAACD,WAAWC,WAAWG,UAAU,GAAG,MAAM;YAClEC,OAAOJ,CAAAA,yBAAAA,uBAAAA,iCAAAA,WAAYG,UAAU,cAAtBH,oCAAAA,yBAA0B;QACrC;OACA;QAACA;QAAYD;KAAS;AAE9B,EAAE"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@servicetitan/navigation",
3
- "version": "12.0.3",
3
+ "version": "12.0.4-canary.267.0da7a87.0",
4
4
  "description": "Navigation components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -42,5 +42,5 @@
42
42
  "less": true,
43
43
  "webpack": false
44
44
  },
45
- "gitHead": "c4d3e8b44fbf7d1fc7849c475ddeb32547bcac8b"
45
+ "gitHead": "0da7a8782a91502ee7f12329c0a9736eb921f447"
46
46
  }
package/src/components/titan-layout/layout-sidebar.module.less CHANGED
@@ -17,13 +17,12 @@
17
17
 
18
18
  // mobile version
19
19
  .nav-drawer {
20
- // display: none;
21
20
  position: fixed;
22
21
  max-width: 400px;
23
22
  width: 0;
24
- height: 100vh;
23
+ height: 100%;
25
24
  top: 0;
26
- left: -100vh;
25
+ left: -100vw;
27
26
  z-index: 991;
28
27
 
29
28
  -webkit-transition: width 200ms ease-in-out;
@@ -69,8 +68,8 @@
69
68
 
70
69
  .nav-drawer-backdrop {
71
70
  position: fixed;
72
- height: 100vh;
73
- width: 100vw;
71
+ height: 100%;
72
+ width: 100%;
74
73
  top: 0;
75
74
  left: 0;
76
75
  z-index: 991;
package/src/components/titan-layout/titan-layout.module.less CHANGED
@@ -9,8 +9,7 @@
9
9
  @bg-color-active: rgba(120, 187, 250, 0.2);
10
10
 
11
11
  .layout-anvil1 {
12
- height: calc(100vh - var(--nav-offset-top));
13
- margin-top: var(--nav-offset-top);
12
+ height: 100vh;
14
13
 
15
14
  display: flex;
16
15
  flex-direction: column;
@@ -52,7 +51,8 @@
52
51
  }
53
52
 
54
53
  .layout-legacy,
55
- .layout-anvil2 {
54
+ .layout-anvil2,
55
+ .layout-anvil1 {
56
56
  .top-placeholder {
57
57
  height: var(--nav-offset-top);
58
58
  }
package/src/components/titan-layout/titan-layout.stories.tsx CHANGED
@@ -222,9 +222,17 @@ const useLayoutProps = (args: LayoutContentArgs): TitanLayoutProps => {
222
222
  };
223
223
  };
224
224
 
225
- const Content = (args: LayoutContentArgs) => {
225
+ const Content = (args: LayoutContentArgs & { stickyHeader?: boolean }) => {
226
226
  return (
227
227
  <Fragment>
228
+ {!!args.stickyHeader && (
229
+ <div
230
+ className="w-100 p-4 bg-white m-l--3 m-t--3"
231
+ style={{ position: 'sticky', top: 'var(--nav-offset-top)' }}
232
+ >
233
+ sticky header
234
+ </div>
235
+ )}
228
236
  <LocationInfo className="m-b-3" />
229
237
  <div className="m-b-3">rendered - {new Date().toLocaleTimeString()}</div>
230
238
  {args.wideContent && (
@@ -332,7 +340,7 @@ export const TitanLayoutLegacyTopNav = (args: LayoutContentArgs) => (
332
340
  className="p-3"
333
341
  style={{ position: 'absolute', width: 'calc(100% - var(--nav-offset-left))' }}
334
342
  >
335
- <Content {...args} />
343
+ <Content {...args} stickyHeader />
336
344
  </div>
337
345
  </TitanLayout>
338
346
  );
@@ -343,7 +351,7 @@ export const TitanLayoutLegacyTop = (args: LayoutContentArgs) => (
343
351
  className="p-3"
344
352
  style={{ position: 'absolute', width: 'calc(100% - var(--nav-offset-left))' }}
345
353
  >
346
- <Content {...args} />
354
+ <Content {...args} stickyHeader />
347
355
  </div>
348
356
  </TitanLayout>
349
357
  );
package/src/components/titan-layout/titan-layout.tsx CHANGED
@@ -67,6 +67,7 @@ export type TitanLayoutProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'
67
67
  extraLinksTop?: ReactElement;
68
68
  extraText?: string;
69
69
  minContentWidth?: number;
70
+ noMobile?: boolean;
70
71
  };
71
72
 
72
73
  const defaultSidebarContext: TitanLayoutSidebarContextType = {
@@ -111,9 +112,10 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
111
112
  extraLinksTop,
112
113
  extraText,
113
114
  minContentWidth,
115
+ noMobile,
114
116
  sideTop,
115
117
  }) => {
116
- const breakpoint = useTitanBreakpoint();
118
+ const breakpoint = useTitanBreakpoint(noMobile);
117
119
  const context: TitanLayoutContextType = useMemo(
118
120
  () => ({
119
121
  NavigationComponent: navigationComponent ?? DefaultNavLinkComponent,
@@ -214,19 +216,10 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
214
216
  }, [view, minContentWidth, breakpoint.width]);
215
217
 
216
218
  const contentStyles = useMemo(() => {
217
- if (view.isAnvil2) {
219
+ if (view.isAnvil2 || view.isLegacy) {
218
220
  return offsetTopStyles;
219
221
  }
220
-
221
- if (view.isLegacy) {
222
- return {
223
- ...(limitContentWidth
224
- ? { display: 'flex', flexDirection: 'column', minHeight: '100vh' }
225
- : {}),
226
- ...offsetTopStyles,
227
- };
228
- }
229
- }, [view, offsetTopStyles, limitContentWidth]);
222
+ }, [view, offsetTopStyles]);
230
223
 
231
224
  const layoutClass = view.isLegacy
232
225
  ? Styles.layoutLegacy
@@ -254,7 +247,7 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
254
247
  )}
255
248
  style={contentStyles}
256
249
  >
257
- {view.isSequent && <div className={Styles.topPlaceholder} />}
250
+ <div className={Styles.topPlaceholder} />
258
251
  {hasTopBar &&
259
252
  (navVariant === 'left' ? (
260
253
  <LayoutHeader
@@ -331,11 +324,13 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
331
324
  </NotificationsContextProvider>
332
325
  )}
333
326
 
334
- {view.isSequent && (
327
+ {view.isAnvil2 ? (
335
328
  <TitanLayoutHeaderObserved heightChange={updateIndicatorsHeight}>
336
329
  {header}
337
330
  </TitanLayoutHeaderObserved>
338
- )}
331
+ ) : view.isLegacy ? (
332
+ header
333
+ ) : null}
339
334
  {view.isAnvil1 ? (
340
335
  <LayoutContentAnvil1 header={header} minWidth={limitContentWidth}>
341
336
  {children}
@@ -437,11 +432,7 @@ const LayoutContentLegacy: FC<{
437
432
  [minWidth]
438
433
  );
439
434
 
440
- return (
441
- <div className={minWidth ? 'of-x-auto flex-basis-0 flex-grow-1' : undefined}>
442
- <div style={minWidth ? innerContentStyles : undefined}>{children}</div>
443
- </div>
444
- );
435
+ return <div style={minWidth ? innerContentStyles : undefined}>{children}</div>;
445
436
  };
446
437
 
447
438
  export const TitanLayout = Object.assign(TitanLayoutComponent, {
package/src/utils/use-breakpoint.ts CHANGED
@@ -7,15 +7,15 @@ export interface TitanBreakpoint {
7
7
  width: number;
8
8
  }
9
9
 
10
- export const useTitanBreakpoint = (): TitanBreakpoint => {
10
+ export const useTitanBreakpoint = (noMobile?: boolean): TitanBreakpoint => {
11
11
  const breakpoint = useBreakpoint();
12
12
 
13
13
  return useMemo(
14
14
  () => ({
15
15
  name: breakpoint?.name ?? 'xl',
16
- isMobile: breakpoint ? breakpoint.innerWidth < 768 : false,
16
+ isMobile: breakpoint && !noMobile ? breakpoint.innerWidth < 768 : false,
17
17
  width: breakpoint?.innerWidth ?? 0,
18
18
  }),
19
- [breakpoint]
19
+ [breakpoint, noMobile]
20
20
  );
21
21
  };