@servicetitan/navigation 11.0.0-canary.237.ff793b3.0 → 11.0.0

package/src/components/titan-layout/titan-layout.tsx

@@ -147,9 +147,11 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
     const [mobileDrawerOpened, setMobileDrawerOpened] = useState(false);
     const { content, logo } = useLayoutChildren(children);
     const { hasNotifications, NotificationsContextProvider } = useNotificationsState();
-    const [anvil2Styles, setAnvil2Styles] = useState<object>({});
+    const [offsetTopStyles, setOffsetTopStyles] = useState<object>({});
     const updateIndicatorsHeight = useCallback((offset: number) => {
-        setAnvil2Styles({ '--offset': `calc(var(--nav-offset-top) + ${offset}px)` });
+        setOffsetTopStyles({
+            '--content-offset-top': `calc(var(--nav-offset-top) + ${offset}px)`,
+        });
     }, []);
 
     const isMobile = breakpoint.isMobile;
@@ -219,17 +221,18 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
 
     const contentStyles = useMemo(() => {
         if (variant.isAnvil2) {
-            return anvil2Styles;
+            return offsetTopStyles;
         }
 
-        if (variant.isLegacy && limitContentWidth) {
+        if (variant.isLegacy) {
             return {
-                display: 'flex',
-                flexDirection: 'column',
-                minHeight: '100vh',
+                ...(limitContentWidth
+                    ? { display: 'flex', flexDirection: 'column', minHeight: '100vh' }
+                    : {}),
+                ...offsetTopStyles,
             };
         }
-    }, [variant, anvil2Styles, limitContentWidth]);
+    }, [variant, offsetTopStyles, limitContentWidth]);
 
     const layoutClass = variant.isLegacy
         ? Styles.layoutLegacy
@@ -311,21 +314,21 @@ const TitanLayoutComponent: FC<TitanLayoutProps> = ({
                         </NotificationsContextProvider>
                     )}
 
+                    {variant.isSequent && (
+                        <TitanLayoutHeaderObserved heightChange={updateIndicatorsHeight}>
+                            {header}
+                        </TitanLayoutHeaderObserved>
+                    )}
                     {variant.isAnvil1 ? (
                         <LayoutContentAnvil1 header={header} minWidth={limitContentWidth}>
                             {content}
                         </LayoutContentAnvil1>
                     ) : variant.isLegacy ? (
-                        <LayoutContentLegacy header={header} minWidth={limitContentWidth}>
+                        <LayoutContentLegacy minWidth={limitContentWidth}>
                             {content}
                         </LayoutContentLegacy>
                     ) : (
-                        <LayoutContentAnvil2
-                            header={header}
-                            onHeaderHeightChange={updateIndicatorsHeight}
-                        >
-                            {content}
-                        </LayoutContentAnvil2>
+                        children
                     )}
                 </div>
             </LayoutPlacementContext.Provider>
@@ -380,21 +383,6 @@ export interface TitanLayoutContentProps {
 }
 const TitanLayoutContent: FC<TitanLayoutContentProps> = ({ children }) => children;
 
-const LayoutContentAnvil2: FC<{
-    children: ReactNode;
-    header?: ReactNode;
-    onHeaderHeightChange?: (height: number) => void;
-}> = ({ children, header, onHeaderHeightChange }) => {
-    return (
-        <Fragment>
-            <TitanLayoutHeaderObserved heightChange={onHeaderHeightChange}>
-                {header}
-            </TitanLayoutHeaderObserved>
-            {children}
-        </Fragment>
-    );
-};
-
 const LayoutContentAnvil1: FC<{
     children: ReactNode;
     header?: ReactNode;
@@ -427,9 +415,8 @@ const LayoutContentAnvil1: FC<{
 
 const LayoutContentLegacy: FC<{
     children: ReactNode;
-    header?: ReactNode;
     minWidth: number | undefined;
-}> = ({ children, header, minWidth }) => {
+}> = ({ children, minWidth }) => {
     const innerContentStyles: CSSProperties = useMemo(
         () => ({
             position: 'relative',
@@ -439,17 +426,9 @@ const LayoutContentLegacy: FC<{
     );
 
     return (
-        <Fragment>
-            <TitanLayoutHeader>{header}</TitanLayoutHeader>
-
-            {minWidth ? (
-                <div className="of-x-auto flex-basis-0 flex-grow-1">
-                    <div style={innerContentStyles}>{children}</div>
-                </div>
-            ) : (
-                children
-            )}
-        </Fragment>
+        <div className={minWidth ? 'of-x-auto flex-basis-0 flex-grow-1' : undefined}>
+            <div style={minWidth ? innerContentStyles : undefined}>{children}</div>
+        </div>
     );
 };
 

package/src/utils/use-breakpoint.ts

@@ -13,7 +13,7 @@ export const useTitanBreakpoint = (): TitanBreakpoint => {
     return useMemo(
         () => ({
             name: breakpoint?.name ?? 'xl',
-            isMobile: breakpoint ? breakpoint.innerWidth <= 768 : false,
+            isMobile: breakpoint ? breakpoint.innerWidth < 768 : false,
             width: breakpoint?.innerWidth ?? 0,
         }),
         [breakpoint]