@servicetitan/navigation 12.0.3 → 13.0.0-canary.256.44cf055.0

package/src/components/profile-dropdown/interface.ts

@@ -0,0 +1,47 @@
+import { PopoverPropsStrict } from '@servicetitan/design-system';
+import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
+import { CounterTagData, CounterTagValue } from '../../utils/counter-tag';
+
+export type ProfileDropdownTriggerProps = {
+    info?: { title: string; text: string };
+    imageSrc?: string | null;
+    avatarBadge?: boolean | string;
+    badge?: { content?: number | string; className: string };
+} & Omit<ComponentPropsWithoutRef<'div'>, 'onClick'>;
+
+export type ProfileDropdownProps = {
+    direction?: PopoverPropsStrict['direction'];
+    trigger?: Omit<ProfileDropdownTriggerProps, 'onClick' | 'open' | 'hintArrow'>;
+    hintPopup?: {
+        className?: string;
+        content: FC<{ openProfile(): void }>;
+        width?: PopoverPropsStrict['width'];
+        onClose?: () => void;
+    };
+    portal?: boolean;
+    width?: PopoverPropsStrict['width'];
+    onClose?(): void;
+    onOpen?(): void;
+} & ComponentPropsWithoutRef<'div'>;
+
+export type ProfileItemContent =
+    | { children: string; text?: string }
+    | { children: ReactNode; text: string };
+
+export type ProfileDropdownSectionProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> & {
+    children: ReactNode;
+    id: string;
+    tooltip?: string;
+    tag?: CounterTagData;
+    counter?: CounterTagValue;
+} & ProfileItemContent;
+
+export type ProfileDropdownLinkProps = Omit<ComponentPropsWithoutRef<'a'>, 'children'> & {
+    id: string;
+    children: ReactNode;
+    external?: boolean;
+    tooltip?: string;
+    to: string;
+    tag?: CounterTagData;
+    counter?: CounterTagValue;
+} & ProfileItemContent;

package/src/components/profile-dropdown/profile-dropdown-legacy.stories.tsx

@@ -0,0 +1,25 @@
+import { NavLinkMock, withAnvil, withMemoryRouter } from '../../test/data';
+import { TitanLayout } from '../titan-layout';
+import { DesktopProfileDropdown } from './profile-dropdown';
+
+const withLayout = (Story: any) => (
+    <TitanLayout navVariant="top" profile={<Story />} navigationComponent={NavLinkMock} />
+);
+
+export default {
+    title: 'Navigation/DesktopProfileDropdown/Legacy',
+    component: DesktopProfileDropdown,
+    parameters: {},
+    decorators: [withMemoryRouter, withAnvil, withLayout],
+};
+
+export {
+    ProfileDropdownDefault,
+    ProfileDropdownWithBothBadges,
+    ProfileDropdownWithCounter,
+    ProfileDropdownWithErrorLogo,
+    ProfileDropdownWithInfo,
+    ProfileDropdownWithHintAndInfoPopup,
+    ProfileDropdownWithHintPopup,
+    ProfileDropdownWithLogo,
+} from './profile-dropdown.stories';

package/src/components/profile-dropdown/profile-dropdown-stacked.stories.tsx

@@ -1,14 +1,22 @@
-import { withAnvil, withMemoryRouter } from '../../test/data';
-import { HeaderNavigationStacked } from '../header-navigation';
-import { ProfileDropdown } from './profile-dropdown';
+import { NavLinkMock, navItems, withAnvil, withMemoryRouter } from '../../test/data';
+import { TitanLayout } from '../titan-layout';
+import { DesktopProfileDropdown } from './profile-dropdown';
 
-const withHeaderNavigationStacked = (Story: any) => <HeaderNavigationStacked right={<Story />} />;
+const withStackedLayout = (Story: any) => (
+    <TitanLayout
+        navVariant="top"
+        top={<div />}
+        profile={<Story />}
+        navigationMainItems={[navItems.accounting]}
+        navigationComponent={NavLinkMock}
+    />
+);
 
 export default {
-    title: 'Navigation/ProfileDropdown/Stacked',
-    component: ProfileDropdown,
+    title: 'Navigation/DesktopProfileDropdown/Stacked',
+    component: DesktopProfileDropdown,
     parameters: {},
-    decorators: [withMemoryRouter, withAnvil, withHeaderNavigationStacked],
+    decorators: [withStackedLayout, withMemoryRouter, withAnvil],
 };
 
 export {

package/src/components/profile-dropdown/profile-dropdown.stories.tsx

@@ -1,58 +1,65 @@
 import { Button } from '@servicetitan/design-system';
-import { withAnvil, withMemoryRouter } from '../../test/data';
-import { HeaderNavigation } from '../header-navigation';
-import { ProfileDropdown } from './profile-dropdown';
+import { NavLinkMock, withAnvil, withMemoryRouter } from '../../test/data';
+import { TitanLayout } from '../titan-layout';
+import { DesktopProfileDropdown } from './profile-dropdown';
 
-const withHeaderNavigation = (Story: any) => (
-    <HeaderNavigation>
-        <Story />
-    </HeaderNavigation>
+const withLegacyLayout = (Story: any) => (
+    <TitanLayout navigationComponent={NavLinkMock} profile={<Story />} />
 );
 
 export default {
-    title: 'Navigation/ProfileDropdown/Legacy',
-    component: ProfileDropdown,
+    title: 'Navigation/DesktopProfileDropdown/Default',
+    component: DesktopProfileDropdown,
     parameters: {},
-    decorators: [withMemoryRouter, withAnvil, withHeaderNavigation],
+    decorators: [withLegacyLayout, withMemoryRouter, withAnvil],
 };
 
 export const ProfileDropdownDefault = () => (
-    <ProfileDropdown>
-        <ProfileDropdown.Link id="first" to="https://google.com">
+    <DesktopProfileDropdown>
+        <DesktopProfileDropdown.Link id="first" to="https://google.com" external>
             first link
-        </ProfileDropdown.Link>
-        <ProfileDropdown.Section id="second" onClick={() => alert('second click')}>
+        </DesktopProfileDropdown.Link>
+        <DesktopProfileDropdown.Section id="second" onClick={() => alert('second click')}>
             second link
-        </ProfileDropdown.Section>
-        <ProfileDropdown.Divider />
-        <ProfileDropdown.Section id="content">some content</ProfileDropdown.Section>
-        <ProfileDropdown.Divider />
-        <ProfileDropdown.Divider />
-        <ProfileDropdown.Divider />
-        <ProfileDropdown.Link id="third" to="third">
+        </DesktopProfileDropdown.Section>
+        <DesktopProfileDropdown.Divider />
+        <DesktopProfileDropdown.Section id="content">some content</DesktopProfileDropdown.Section>
+        <DesktopProfileDropdown.Divider />
+        <DesktopProfileDropdown.Divider />
+        <DesktopProfileDropdown.Divider />
+        <DesktopProfileDropdown.Link id="third" to="third">
             third link
-        </ProfileDropdown.Link>
-        <ProfileDropdown.Divider />
-    </ProfileDropdown>
+        </DesktopProfileDropdown.Link>
+        <DesktopProfileDropdown.Divider />
+        <DesktopProfileDropdown.Section
+            id="forth"
+            onClick={() => alert('forth click')}
+            text="Sign Out user"
+        >
+            Sign Out
+            <span className="c-neutral-60 m-l-1">user</span>
+        </DesktopProfileDropdown.Section>
+        <DesktopProfileDropdown.Divider />
+    </DesktopProfileDropdown>
 );
 
 export const ProfileDropdownWithLogo = () => (
-    <ProfileDropdown
+    <DesktopProfileDropdown
         trigger={{
             imageSrc: 'https://upload.wikimedia.org/wikipedia/en/1/11/Milhouse_Van_Houten.png',
         }}
     >
-        <ProfileDropdown.Link id="first" to="https://google.com">
+        <DesktopProfileDropdown.Link id="first" to="https://google.com">
             first link
-        </ProfileDropdown.Link>
-        <ProfileDropdown.Section id="second" onClick={() => alert('second click')}>
+        </DesktopProfileDropdown.Link>
+        <DesktopProfileDropdown.Section id="second" onClick={() => alert('second click')}>
             second link
-        </ProfileDropdown.Section>
-    </ProfileDropdown>
+        </DesktopProfileDropdown.Section>
+    </DesktopProfileDropdown>
 );
 
 export const ProfileDropdownWithErrorLogo = () => (
-    <ProfileDropdown
+    <DesktopProfileDropdown
         trigger={{
             imageSrc: 'https://some.incorrect.url/logo.png',
         }}
@@ -60,7 +67,7 @@ export const ProfileDropdownWithErrorLogo = () => (
 );
 
 export const ProfileDropdownWithInfo = () => (
-    <ProfileDropdown
+    <DesktopProfileDropdown
         trigger={{
             info: { text: 'first', title: 'tenant user' },
             avatarBadge: true,
@@ -69,7 +76,7 @@ export const ProfileDropdownWithInfo = () => (
 );
 
 export const ProfileDropdownWithCounter = () => (
-    <ProfileDropdown
+    <DesktopProfileDropdown
         trigger={{
             info: { text: 'first', title: 'tenant user' },
             avatarBadge: true,
@@ -79,7 +86,7 @@ export const ProfileDropdownWithCounter = () => (
 );
 
 export const ProfileDropdownWithBothBadges = () => (
-    <ProfileDropdown
+    <DesktopProfileDropdown
         trigger={{
             avatarBadge: 'yellow-500',
             badge: { className: 'bg-red-400' },
@@ -91,7 +98,7 @@ export const ProfileDropdownWithBothBadges = () => (
 const log = (text: string) => console.log(text);
 
 export const ProfileDropdownWithHintPopup = () => (
-    <ProfileDropdown
+    <DesktopProfileDropdown
         trigger={{
             avatarBadge: 'yellow-500',
             badge: { className: 'bg-red-400' },
@@ -112,19 +119,19 @@ export const ProfileDropdownWithHintPopup = () => (
         onOpen={() => log('open profile dropdown')}
         onClose={() => log('close profile dropdown')}
     >
-        <ProfileDropdown.Link id="first" to="https://google.com" counter={12}>
+        <DesktopProfileDropdown.Link id="first" to="https://google.com" counter={12}>
             first item
-        </ProfileDropdown.Link>
-        <ProfileDropdown.Divider />
-        <ProfileDropdown.Section id="second">second item</ProfileDropdown.Section>
-        <ProfileDropdown.Link id="third" to="https://google.com" tag={{ value: 1 }}>
+        </DesktopProfileDropdown.Link>
+        <DesktopProfileDropdown.Divider />
+        <DesktopProfileDropdown.Section id="second">second item</DesktopProfileDropdown.Section>
+        <DesktopProfileDropdown.Link id="third" to="https://google.com" tag={{ value: 1 }}>
             third item
-        </ProfileDropdown.Link>
-    </ProfileDropdown>
+        </DesktopProfileDropdown.Link>
+    </DesktopProfileDropdown>
 );
 
 export const ProfileDropdownWithHintAndInfoPopup = () => (
-    <ProfileDropdown
+    <DesktopProfileDropdown
         trigger={{
             avatarBadge: 'yellow-500',
             badge: { className: 'bg-red-400' },

package/src/components/profile-dropdown/profile-dropdown.tsx

@@ -3,57 +3,41 @@ import SvgExpandLess from '@servicetitan/anvil2/assets/icons/material/round/expa
 import SvgExpandMore from '@servicetitan/anvil2/assets/icons/material/round/expand_more.svg';
 import SvgAccountActive from '@servicetitan/anvil2/assets/icons/st/gnav_account_active.svg';
 import SvgAccountInactive from '@servicetitan/anvil2/assets/icons/st/gnav_account_inactive.svg';
-import { BodyText, Popover, PopoverPropsStrict } from '@servicetitan/design-system';
+import { BodyText, Popover } from '@servicetitan/design-system';
 import classNames from 'classnames';
 import {
     ComponentPropsWithoutRef,
     FC,
-    HTMLAttributeAnchorTarget,
     MouseEvent,
     MouseEventHandler,
-    ReactNode,
     useCallback,
-    useContext,
     useEffect,
     useMemo,
     useState,
 } from 'react';
 
 import { CounterTagData, CounterTagValue } from '../../utils/counter-tag';
-import {
-    NavigationComponentContext,
-    NavigationLegacyContext,
-} from '../../utils/navigation-context';
 import { getCounterTag } from '../../utils/side-nav';
 import { CounterTag } from '../counter-tag';
+import { useTitanLayoutContext } from '../titan-layout';
 import { withTooltip } from '../titan-layout/with-tooltip';
+import {
+    ProfileDropdownLinkProps,
+    ProfileDropdownProps,
+    ProfileDropdownSectionProps,
+    ProfileDropdownTriggerProps,
+} from './interface';
 import * as Styles from './profile-dropdown.module.less';
-import { ProfileLogo } from './profile-icon';
 
-export interface ProfileDropdownTriggerProps {
-    className?: string;
-    info?: { title: string; text: string };
-    imageSrc?: string | null;
-    avatarBadge?: boolean | string;
-    badge?: { content?: number | string; className: string };
-    hintArrow?: boolean;
-    open: boolean;
-    onClick?(e: MouseEvent): void;
-}
-
-const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
-    avatarBadge,
-    badge,
-    className,
-    hintArrow,
-    imageSrc,
-    info,
-    onClick,
-    open,
-}) => {
+const ProfileDropdownTrigger: FC<
+    ProfileDropdownTriggerProps & {
+        hintArrow?: boolean;
+        open: boolean;
+        onClick: ComponentPropsWithoutRef<'div'>['onClick'];
+    }
+> = ({ info, imageSrc, avatarBadge, badge, className, hintArrow, open, onClick, ...rest }) => {
     const [avatarSource, setAvatarSource] = useState(imageSrc ?? '');
     const [avatarSourceError, setAvatarSourceError] = useState(false);
-    const isLegacy = useContext(NavigationLegacyContext);
 
     useEffect(() => {
         const src = imageSrc ?? '';
@@ -72,19 +56,19 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
 
     return (
         <div
+            data-cy="profile-dropdown-trigger"
+            data-pendo="profile-dropdown-trigger"
+            {...rest}
             className={classNames(
                 'd-f align-items-center cursor-pointer position-relative p-x-1 p-y-half',
                 'profile-dropdown-trigger',
                 Styles.triggerContainer,
                 {
                     [Styles.triggerContainerHintArrow]: hintArrow,
-                    [Styles.triggerContainerLegacy]: isLegacy,
                 },
                 className
             )}
             onClick={onClick}
-            data-cy="profile-dropdown-trigger"
-            data-pendo="profile-dropdown-trigger"
         >
             {avatarSource && !avatarSourceError ? (
                 <img
@@ -93,8 +77,6 @@ const ProfileDropdownTrigger: FC<ProfileDropdownTriggerProps> = ({
                     onError={onAvatarError}
                     alt="user dropdown menu"
                 />
-            ) : isLegacy ? (
-                <ProfileLogo />
             ) : (
                 <Icon
                     className="c-inherit-i"
@@ -163,25 +145,7 @@ const useTag = (counter?: CounterTagValue, tag?: CounterTagData) =>
         ) : undefined;
     }, [counter, tag]);
 
-export type ProfileItemContent =
-    | { children: string; text?: string }
-    | { children: ReactNode; text: string };
-
-export interface ProfileDropdownSectionPropsStrict {
-    children: ReactNode;
-    id: string;
-    tooltip?: string;
-    className?: string;
-    tag?: CounterTagData;
-    counter?: CounterTagValue;
-    onClick?(e: MouseEvent): void;
-}
-
-export type ProfileDropdownSectionProps = Omit<ComponentPropsWithoutRef<'div'>, 'children'> &
-    ProfileDropdownSectionPropsStrict &
-    ProfileItemContent;
-
-export const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({
+function DesktopProfileDropdownSection({
     children,
     className,
     counter,
@@ -191,7 +155,7 @@ export const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({
     tooltip,
     onClick,
     ...rest
-}) => {
+}: ProfileDropdownSectionProps) {
     const clickHandler: MouseEventHandler<never> = e => {
         if (onClick) {
             onClick(e);
@@ -221,27 +185,11 @@ export const ProfileDropdownSection: FC<ProfileDropdownSectionProps> = ({
         tooltip,
         { placement: 'left' }
     );
-};
-
-export const ProfileDropdownDivider: FC = Popover.Divider;
-
-export interface ProfileDropdownLinkPropsStrict {
-    id: string;
-    children: ReactNode;
-    className?: string;
-    external?: boolean;
-    target?: HTMLAttributeAnchorTarget;
-    tooltip?: string;
-    to: string;
-    tag?: CounterTagData;
-    counter?: CounterTagValue;
 }
 
-export type ProfileDropdownLinkProps = Omit<ComponentPropsWithoutRef<'a'>, 'children'> &
-    ProfileDropdownLinkPropsStrict &
-    ProfileItemContent;
+const DesktopProfileDropdownDivider: FC = Popover.Divider;
 
-export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
+function DesktopProfileDropdownLink({
     children,
     className,
     external,
@@ -254,8 +202,8 @@ export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
     tooltip,
     onClick,
     ...rest
-}: ProfileDropdownLinkProps) => {
-    const NavigationComponent = useContext(NavigationComponentContext);
+}: ProfileDropdownLinkProps) {
+    const { NavigationComponent } = useTitanLayoutContext();
 
     const isExternalLink = external ?? to?.startsWith('http');
 
@@ -300,47 +248,21 @@ export const ProfileDropdownLink: FC<ProfileDropdownLinkProps> = ({
         tooltip,
         { placement: 'left' }
     );
-};
-
-export interface ProfileDropdownPropsStrict {
-    children?: ReactNode;
-    className?: string;
-    direction?: PopoverPropsStrict['direction'];
-    trigger?: Omit<ProfileDropdownTriggerProps, 'onClick' | 'open' | 'hintArrow'>;
-    hintPopup?: {
-        className?: string;
-        content: FC<{ openProfile(): void }>;
-        width?: PopoverPropsStrict['width'];
-        onClose?: () => void;
-    };
-    portal?: boolean;
-    width?: PopoverPropsStrict['width'];
-    onClose?(): void;
-    onOpen?(): void;
-}
-
-export interface ProfileDropdownProps extends ProfileDropdownPropsStrict {
-    [key: string]: any;
 }
 
-export interface ProfileDropdownType extends FC<ProfileDropdownProps> {
-    Divider: typeof ProfileDropdownDivider;
-    Link: typeof ProfileDropdownLink;
-    Trigger: typeof ProfileDropdownTrigger;
-    Section: typeof ProfileDropdownSection;
-}
-
-export const ProfileDropdown: ProfileDropdownType = (({
+function DesktopProfileDropdownComponent({
     children,
-    className,
+
     direction,
+    trigger,
     hintPopup,
-    onClose,
-    onOpen,
     portal,
-    trigger,
     width,
-}) => {
+    onClose,
+    onOpen,
+
+    ...rest
+}: ProfileDropdownProps) {
     const [open, setOpen] = useState(false);
     const handleClose = useCallback(() => {
         setOpen(false);
@@ -376,7 +298,7 @@ export const ProfileDropdown: ProfileDropdownType = (({
     );
 
     return (
-        <div className={className} data-cy="profile-dropdown">
+        <div data-cy="profile-dropdown" {...rest}>
             {!!hintPopup && hintShown && HintComponent ? (
                 <Popover
                     direction={direction ?? 'bl'}
@@ -415,8 +337,10 @@ export const ProfileDropdown: ProfileDropdownType = (({
             )}
         </div>
     );
-}) as ProfileDropdownType;
+}
 
-ProfileDropdown.Divider = ProfileDropdownDivider;
-ProfileDropdown.Link = ProfileDropdownLink;
-ProfileDropdown.Section = ProfileDropdownSection;
+export const DesktopProfileDropdown = Object.assign(DesktopProfileDropdownComponent, {
+    Divider: DesktopProfileDropdownDivider,
+    Link: DesktopProfileDropdownLink,
+    Section: DesktopProfileDropdownSection,
+});

package/src/components/titan-layout/interface-internal.ts

@@ -1,6 +1,19 @@
+import { IconProps } from '@servicetitan/anvil2';
 import { FC } from 'react';
+import { CounterTagData } from '../../utils/counter-tag';
 import { NavLinkComponentProps } from '../../utils/navigation-context';
 
 export interface NavigationComponentProps {
     navigationComponent: FC<NavLinkComponentProps>;
 }
+export interface NavigationItemPropsStrict {
+    id: string;
+    to: string;
+    title: string;
+    isActive: boolean | ((pathname: string) => boolean) | undefined;
+    icon: IconProps['svg'] | undefined;
+    iconActive: IconProps['svg'] | undefined;
+
+    tag: CounterTagData | undefined;
+    className: string | undefined;
+}

package/src/components/titan-layout/interface.ts

@@ -1,26 +1,82 @@
-import { FC, ReactElement } from 'react';
-import { NavigationItemData } from '../../utils/navigation';
+import { IconProps } from '@servicetitan/anvil2';
+import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
+import { CounterTagData, CounterTagValue } from '../../utils/counter-tag';
 import { TitanLayoutSidebarContextType } from './layout-context';
 
-export interface TitanLayoutSidebarLinkWrapperProps {
-    children:
-        | ReactElement<TitanLayoutSidebarLinkProps>
-        | ReactElement<TitanLayoutSidebarTriggerProps>;
+export interface TitanLayoutLinkWrapperProps {
+    children: ReactNode;
     context: TitanLayoutSidebarContextType;
+    isMobile: boolean;
 }
 
-export interface TitanLayoutSidebarLinkProps extends Omit<NavigationItemData, 'submenu'> {
-    wrapper?: FC<TitanLayoutSidebarLinkWrapperProps>;
-}
-export interface TitanLayoutSidebarTriggerProps
-    extends Omit<TitanLayoutSidebarLinkProps, 'to' | 'isActive'> {
-    isActive?: boolean;
-    wrapper?: FC<TitanLayoutSidebarLinkWrapperProps>;
-    onClick?: () => void;
-    onMobileClick?: () => void;
-}
+export type TitanLayoutLinkWrapper = FC<TitanLayoutLinkWrapperProps>;
 
 export interface TitanLayoutState {
     navCollapsed: boolean;
-    submenuExpanded?: string;
+    submenusExpanded?: string[];
+}
+
+export interface TitanLayoutLinkExtraProps {
+    showTitle?: boolean;
+    flashing?: boolean;
+}
+
+export interface TitanLayoutLinkSideProps {
+    counter: CounterTagValue;
 }
+
+export type TitanLayoutLinkProps = {
+    /** link id */
+    id: string;
+    /** link href */
+    to: string;
+    /** link title */
+    title: string;
+    /** callback to return active state. By default, it compares link href with current pathname */
+    isActive?: boolean | ((pathname: string) => boolean);
+    /** svg icon (anvil2) of inactive item */
+    icon: IconProps['svg'] | undefined;
+    /** svg icon (anvil2) of active item */
+    iconActive: IconProps['svg'] | undefined;
+    /** item tag (optional). shown if it is set and value is true or greater than 0 */
+    tag?: CounterTagData;
+    counter?: CounterTagValue;
+    /** class name of link item */
+    className?: string;
+
+    /** tooltip text (for extra links) */
+    tooltip?: string;
+    /** wrapper component for link element (used for side links) */
+    wrapper?: TitanLayoutLinkWrapper;
+    /** props for extra link element */
+    extra?: TitanLayoutLinkExtraProps;
+    /** props for side nav link element (mobile version) */
+    side?: TitanLayoutLinkSideProps;
+} & Omit<ComponentPropsWithoutRef<'a'>, 'children' | 'title'>;
+
+export type TitanLayoutTriggerProps = {
+    /** link id */
+    id: string;
+    /** link title */
+    title: string;
+    /** active state */
+    isActive?: boolean;
+    /** svg icon (anvil2) of inactive item */
+    icon: IconProps['svg'] | undefined;
+    /** svg icon (anvil2) of active item */
+    iconActive: IconProps['svg'] | undefined;
+    /** item tag (optional). shown if it is set and value is true or greater than 0 */
+    tag?: CounterTagData;
+    counter?: CounterTagValue;
+    /** class name of link item */
+    className?: string;
+
+    /** tooltip text (for extra links) */
+    tooltip?: string;
+    /** wrapper component for link element (used for side links) */
+    wrapper?: TitanLayoutLinkWrapper;
+    /** props for extra link element */
+    extra?: TitanLayoutLinkExtraProps;
+    /** props for nav link element (mobile version) */
+    side?: TitanLayoutLinkSideProps;
+} & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'title'>;