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

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

@@ -1,13 +0,0 @@
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./layout-profile").ProfileDropdownProps> & {
-        Divider: import("react").FC;
-        Link: import("react").FC<import("./layout-profile").ProfileDropdownLinkProps>;
-        Section: import("react").FC<import("./layout-profile").ProfileDropdownSectionProps>;
-    };
-    decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
-    parameters: {};
-};
-export default _default;
-export declare const ProfileDefault: () => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=layout-profile.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"layout-profile.stories.d.ts","sourceRoot":"","sources":["../../../src/components/titan-layout/layout-profile.stories.tsx"],"names":[],"mappings":";;;;;;;;;;AAWA,wBAKE;AAEF,eAAO,MAAM,cAAc,+CA2B1B,CAAC"}

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

@@ -1,29 +0,0 @@
-interface LayoutContentArgs {
-    header: boolean;
-    sideTop: boolean;
-    extraText: boolean;
-    search: boolean;
-    longContent: boolean;
-    wideContent: boolean;
-    minWidth: boolean;
-    emptyNav: boolean;
-}
-declare const _default: {
-    title: string;
-    decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
-    parameters: {};
-    argTypes: {};
-    args: LayoutContentArgs;
-};
-export default _default;
-export declare const TitanLayoutLegacy: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
-export declare const TitanLayoutLegacyTopNav: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
-export declare const TitanLayoutLegacyTop: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
-export declare const TitanLayoutAnvil1: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
-export declare const TitanLayoutAnvil1TopNav: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
-export declare const TitanLayoutAnvil1Top: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
-export declare const TitanLayoutAnvil1TopOverflow: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
-export declare const TitanLayoutAnvil2: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
-export declare const TitanLayoutAnvil2TopNav: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
-export declare const TitanLayoutAnvil2Top: (args: LayoutContentArgs) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=titan-layout.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"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"}

package/dist/utils/navigation-legacy.d.ts

@@ -1,88 +0,0 @@
-import { IconProps } from '@servicetitan/anvil2';
-import { IconPropsStrict } from '@servicetitan/design-system';
-import { FC, HTMLAttributeAnchorTarget } from 'react';
-import { CounterTagData, CounterTagValue } from './counter-tag';
-import { NavigationSubmenuData } from './navigation';
-export interface HeaderNavigationItemData extends HeaderNavigationItemLinkProps {
-    /** link description */
-    hint: string;
-    /** flag if the link is not shown (based on FG and/or user permissions) */
-    isHidden?: boolean;
-    /** custom className (can be used for mdi icons) */
-    iconClassName?: string;
-    /** anvil's icon name of item */
-    iconName?: IconPropsStrict['name'];
-    /** svg icon (anvil2) of inactive item */
-    icon: IconProps['svg'] | undefined;
-    /** svg icon (anvil2) of active item */
-    iconActive: IconProps['svg'] | undefined;
-    /** icon component of item (<svg />) */
-    iconComponent?: FC;
-    /** item tag (optional). shown if it is set and true or greater than 0 */
-    counter?: CounterTagValue;
-    tag?: CounterTagData;
-    /** class name of link item */
-    className?: string;
-    /** optional submenu of link item */
-    submenu?: NavigationSubmenuData;
-}
-export interface HeaderNavigationItemLinkProps {
-    /** 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);
-}
-export interface HeaderNavigationTriggerPropsStrict {
-    /** unique identifier */
-    id: string;
-    /** item title (used for mobile) */
-    title: string;
-    /** tooltip text */
-    tooltip?: string;
-    /** item description */
-    hint?: string;
-    /** container class name */
-    className?: string;
-    /** item label */
-    label?: string;
-    /** label class name */
-    labelClassName?: string;
-    /** isActive */
-    isActive?: boolean;
-    /** counter value shown for item */
-    counter?: CounterTagValue;
-    tag?: CounterTagData;
-    /** counter component class name */
-    counterClassName?: string;
-    /** icon component class name */
-    iconClassName?: string;
-    /** IconComponent custom icon component */
-    iconComponent?: FC;
-    /** iconName name of anvil icon */
-    iconName?: IconPropsStrict['name'];
-    /** svg icon (anvil2) of inactive item */
-    icon: IconProps['svg'] | undefined;
-    /** svg icon (anvil2) of active item */
-    iconActive?: IconProps['svg'];
-}
-export interface HeaderNavigationTriggerProps extends HeaderNavigationTriggerPropsStrict {
-    /** unstrict props */
-    [key: string]: any;
-}
-export interface HeaderNavigationLinkPropsStrict extends Omit<HeaderNavigationTriggerPropsStrict, 'isActive'> {
-    /** link href */
-    to: string;
-    /** isActive */
-    isActive?: boolean | ((pathname: string) => boolean);
-    /** link html target */
-    target?: HTMLAttributeAnchorTarget;
-}
-export interface HeaderNavigationLinkProps extends HeaderNavigationLinkPropsStrict {
-    /** unstrict props */
-    [key: string]: any;
-}
-//# sourceMappingURL=navigation-legacy.d.ts.map

package/dist/utils/navigation-legacy.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"navigation-legacy.d.ts","sourceRoot":"","sources":["../../src/utils/navigation-legacy.ts"],"names":[],"mappings":"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"}

package/dist/utils/navigation-legacy.js

@@ -1,3 +0,0 @@
-export { };
-
-//# sourceMappingURL=navigation-legacy.js.map

package/dist/utils/navigation-legacy.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/utils/navigation-legacy.ts"],"sourcesContent":["import { IconProps } from '@servicetitan/anvil2';\nimport { IconPropsStrict } from '@servicetitan/design-system';\nimport { FC, HTMLAttributeAnchorTarget } from 'react';\nimport { CounterTagData, CounterTagValue } from './counter-tag';\nimport { NavigationSubmenuData } from './navigation';\n\nexport interface HeaderNavigationItemData extends HeaderNavigationItemLinkProps {\n    /** link description */\n    hint: string;\n\n    /** flag if the link is not shown (based on FG and/or user permissions) */\n    isHidden?: boolean;\n\n    /** custom className (can be used for mdi icons) */\n    iconClassName?: string;\n\n    /** anvil's icon name of item */\n    iconName?: IconPropsStrict['name'];\n\n    /** svg icon (anvil2) of inactive item */\n    icon: IconProps['svg'] | undefined;\n\n    /** svg icon (anvil2) of active item */\n    iconActive: IconProps['svg'] | undefined;\n\n    /** icon component of item (<svg />) */\n    iconComponent?: FC;\n\n    /** item tag (optional). shown if it is set and true or greater than 0 */\n    counter?: CounterTagValue;\n    tag?: CounterTagData;\n\n    /** class name of link item */\n    className?: string;\n\n    /** optional submenu of link item */\n    submenu?: NavigationSubmenuData;\n}\n\nexport interface HeaderNavigationItemLinkProps {\n    /** link id */\n    id: string;\n\n    /** link href */\n    to: string;\n\n    /** link title */\n    title: string;\n\n    /** callback to return active state. By default, it compares link href with current pathname */\n    isActive?: boolean | ((pathname: string) => boolean);\n}\n\nexport interface HeaderNavigationTriggerPropsStrict {\n    /** unique identifier */\n    id: string;\n    /** item title (used for mobile) */\n    title: string;\n    /** tooltip text */\n    tooltip?: string;\n    /** item description */\n    hint?: string;\n    /** container class name */\n    className?: string;\n    /** item label */\n    label?: string;\n    /** label class name */\n    labelClassName?: string;\n    /** isActive */\n    isActive?: boolean;\n    /** counter value shown for item */\n    counter?: CounterTagValue;\n    tag?: CounterTagData;\n    /** counter component class name */\n    counterClassName?: string;\n    /** icon component class name */\n    iconClassName?: string;\n    /** IconComponent custom icon component */\n    iconComponent?: FC;\n    /** iconName name of anvil icon */\n    iconName?: IconPropsStrict['name'];\n    /** svg icon (anvil2) of inactive item */\n    icon: IconProps['svg'] | undefined;\n    /** svg icon (anvil2) of active item */\n    iconActive?: IconProps['svg'];\n}\n\nexport interface HeaderNavigationTriggerProps extends HeaderNavigationTriggerPropsStrict {\n    /** unstrict props */\n    [key: string]: any;\n}\n\nexport interface HeaderNavigationLinkPropsStrict\n    extends Omit<HeaderNavigationTriggerPropsStrict, 'isActive'> {\n    /** link href */\n    to: string;\n    /** isActive */\n    isActive?: boolean | ((pathname: string) => boolean);\n    /** link html target */\n    target?: HTMLAttributeAnchorTarget;\n}\n\nexport interface HeaderNavigationLinkProps extends HeaderNavigationLinkPropsStrict {\n    /** unstrict props */\n    [key: string]: any;\n}\n"],"names":[],"mappings":"AAsGA,WAGC"}

package/src/components/header-navigation/header-navigation-content.tsx

@@ -1,120 +0,0 @@
-import { Icon, IconPropsStrict } from '@servicetitan/design-system';
-import classNames from 'classnames';
-import { FC, Fragment, useContext } from 'react';
-import { NavigationComponentContext } from '../../utils/navigation-context';
-import { HeaderNavigationItemData } from '../../utils/navigation-legacy';
-import { getCounterTag } from '../../utils/side-nav';
-import { CounterTag, CounterTagProps } from '../counter-tag';
-import * as Styles from './header-navigation.module.less';
-import { withTooltip } from './with-tooltip';
-
-export interface HeaderNavigationItemContentPropsStrict {
-    /** item text */
-    title?: string;
-    /** text component class name */
-    titleClassName?: string;
-    /** counter tag shown for item */
-    tag: CounterTagProps | undefined;
-    /** counter component class name */
-    counterClassName?: string;
-    /** icon component class name */
-    iconClassName?: string;
-    /** IconComponent custom icon component */
-    iconComponent?: FC;
-    /** iconName name of anvil icon */
-    iconName?: IconPropsStrict['name'];
-}
-
-/** Content for navigation items */
-export const HeaderNavigationItemContent: FC<HeaderNavigationItemContentPropsStrict> = ({
-    title,
-    titleClassName,
-    counterClassName,
-    iconClassName,
-    iconComponent: IconComponent,
-    iconName,
-    tag,
-}) => {
-    const iconClass = classNames(Styles.navigationIcon, iconClassName);
-    return (
-        <Fragment>
-            {IconComponent ? (
-                <i className={iconClass}>
-                    <IconComponent />
-                </i>
-            ) : iconName ? (
-                <Icon name={iconName} className={iconClass} />
-            ) : (
-                <i className={iconClass} />
-            )}
-
-            {!!title && (
-                <span className={classNames(Styles.navigationItemTitle, titleClassName)}>
-                    {title}
-                </span>
-            )}
-
-            {!!tag && (
-                <CounterTag
-                    data={tag}
-                    className={classNames(Styles.navigationItemCounter, counterClassName)}
-                    longClassName={Styles.navigationItemCounterLong}
-                />
-            )}
-        </Fragment>
-    );
-};
-
-interface HeaderNavigationItemPropsStrict extends HeaderNavigationItemData {
-    minimized: boolean;
-    main: boolean;
-}
-
-/** Navigation main menu item */
-export const HeaderNavigationItem: FC<HeaderNavigationItemPropsStrict> = ({
-    id,
-    to,
-    counter,
-    title,
-    hint,
-    className,
-    iconClassName,
-    iconComponent,
-    iconName,
-    isActive,
-    main,
-    minimized,
-    tag,
-}) => {
-    const NavigationComponent = useContext(NavigationComponentContext);
-
-    return withTooltip(
-        <NavigationComponent
-            data-cy={`navigation-item-${id}`}
-            data-pendo={`navigation-item-${id}`}
-            key={id}
-            to={to}
-            title={hint}
-            className={classNames(
-                Styles.navigationItem,
-                main ? Styles.navigationItemMain : Styles.navigationItemOverflow,
-                className,
-                {
-                    [Styles.navigationItemActive]: isActive === true,
-                }
-            )}
-            isActive={typeof isActive === 'function' ? isActive : undefined}
-            activeClassName={Styles.navigationItemActive}
-        >
-            <HeaderNavigationItemContent
-                title={minimized ? undefined : title}
-                titleClassName={main ? '' : 'm-l-half'}
-                tag={getCounterTag(counter, tag)}
-                iconComponent={iconComponent}
-                iconClassName={iconClassName}
-                iconName={iconName}
-            />
-        </NavigationComponent>,
-        minimized ? title : undefined
-    );
-};

package/src/components/header-navigation/header-navigation-extra-stacked.stories.tsx

@@ -1,19 +0,0 @@
-import { withAnvil, withMemoryRouter } from '../../test/data';
-import { HeaderNavigationLink } from '../links';
-import { HeaderNavigationStacked } from './header-navigation';
-
-const withHeaderNavigationStacked = (Story: any) => <HeaderNavigationStacked right={<Story />} />;
-
-export default {
-    title: 'Navigation/Extra/Stacked',
-    component: HeaderNavigationLink,
-    decorators: [withHeaderNavigationStacked, withMemoryRouter, withAnvil],
-    parameters: {},
-};
-
-export {
-    ExtraWithTooltip,
-    ExtraLink,
-    ExtraTrigger,
-    ExtraWithLabel,
-} from './header-navigation-extra.stories';

package/src/components/header-navigation/header-navigation-extra.stories.tsx

@@ -1,142 +0,0 @@
-import SvgHelp from '@servicetitan/anvil2/assets/icons/material/round/help_outline.svg';
-import SvgPhone from '@servicetitan/anvil2/assets/icons/material/round/phone.svg';
-import SvgSearch from '@servicetitan/anvil2/assets/icons/material/round/search.svg';
-import { Button, Popover } from '@servicetitan/design-system';
-import { Fragment, useState } from 'react';
-import { withAnvil, withMemoryRouter } from '../../test/data';
-import { HeaderNavigationLink, HeaderNavigationTrigger } from '../links';
-import { HeaderNavigation } from './';
-
-const withHeaderNavigation = (Story: any) => (
-    <HeaderNavigation rightClassName="m-r-1">
-        <Story />
-    </HeaderNavigation>
-);
-
-export default {
-    title: 'Navigation/Extra/Legacy',
-    component: HeaderNavigationLink,
-    decorators: [withHeaderNavigation, withMemoryRouter, withAnvil],
-    parameters: {},
-};
-
-export const ExtraLink = () => (
-    <HeaderNavigationLink
-        id="search"
-        title="Search"
-        to="https://google.com"
-        target="_blank"
-        iconName="search"
-        icon={SvgSearch}
-        iconActive={undefined}
-        hint="Search: for all the questions"
-    />
-);
-
-export const ExtraTrigger = () => (
-    <HeaderNavigationTrigger
-        id="dialpad"
-        title="Dialpad"
-        iconName="phone"
-        counter={2}
-        tooltip="Phones pro"
-        icon={SvgPhone}
-        iconActive={undefined}
-    />
-);
-
-export const ExtraWithTooltip = () => (
-    <Fragment>
-        <HeaderNavigationLink
-            id="search"
-            title="Search"
-            to="https://google.com"
-            target="_blank"
-            iconName="search"
-            icon={SvgSearch}
-            iconActive={undefined}
-            tooltip="Search: for all the questions"
-            hint="Google"
-        />
-
-        <HeaderNavigationTrigger
-            id="dialpad"
-            title="Dialpad"
-            iconName="phone"
-            hint="Dialpad"
-            counter={2}
-            icon={SvgPhone}
-            iconActive={undefined}
-        />
-
-        <HelpCenterButton />
-    </Fragment>
-);
-
-const HelpCenterButton = () => {
-    const [open, setOpen] = useState(false);
-
-    return (
-        <Popover
-            onClickOutside={() => setOpen(false)}
-            open={open}
-            direction="bl"
-            width="xs"
-            trigger={
-                <Button
-                    className="c-inherit"
-                    iconName="help_outline"
-                    fill="subtle"
-                    onClick={() => setOpen(true)}
-                />
-            }
-            portal
-        >
-            help center
-        </Popover>
-    );
-};
-
-const HelpTrigger = () => {
-    const [active, setActive] = useState(true);
-
-    return (
-        <HeaderNavigationTrigger
-            id="help"
-            title="Help"
-            iconName="help_outline"
-            hint="Help"
-            icon={SvgHelp}
-            iconActive={undefined}
-            label="Live Chat"
-            onClick={() => setActive(!active)}
-            isActive={active}
-        />
-    );
-};
-export const ExtraWithLabel = () => (
-    <Fragment>
-        <HeaderNavigationLink
-            id="search"
-            title="Search"
-            to="https://google.com"
-            target="_blank"
-            iconName="search"
-            icon={SvgSearch}
-            iconActive={undefined}
-            tooltip="Search: for all the questions"
-            hint="Google"
-        />
-
-        <HelpTrigger />
-        <HeaderNavigationTrigger
-            id="dialpad"
-            title="Dialpad"
-            iconName="phone"
-            hint="Dialpad"
-            tag={{ value: 2 }}
-            icon={SvgPhone}
-            iconActive={undefined}
-        />
-    </Fragment>
-);

package/src/components/header-navigation/header-navigation-links.tsx

@@ -1,141 +0,0 @@
-import classNames from 'classnames';
-import { FC, ReactNode, useContext } from 'react';
-import { NavigationComponentContext } from '../../utils/navigation-context';
-import {
-    HeaderNavigationLinkProps,
-    HeaderNavigationTriggerProps,
-} from '../../utils/navigation-legacy';
-import { getCounterTag } from '../../utils/side-nav';
-import { HeaderNavigationItemContent } from './header-navigation-content';
-import * as Styles from './header-navigation.module.less';
-import { withTooltip } from './with-tooltip';
-
-/** Navigation extra item with link */
-export const HeaderNavigationLink: FC<HeaderNavigationLinkProps> = ({
-    id,
-    to,
-    counter,
-    hint,
-    tooltip,
-    className,
-    icon,
-    iconActive,
-    iconClassName,
-    iconComponent,
-    iconName,
-    isActive,
-    label,
-    labelClassName,
-    tag,
-    target,
-    title,
-    ...rest
-}) => {
-    const NavigationComponent = useContext(NavigationComponentContext);
-
-    return withTooltip(
-        <NavigationComponent
-            data-cy={`navigation-link-${id}`}
-            data-pendo={`navigation-link-${id}`}
-            {...rest}
-            key={id}
-            to={to}
-            title={hint}
-            className={classNames(Styles.navigationLink, Styles.navigationItem, className, {
-                [Styles.navigationItemActive]: isActive === true,
-            })}
-            isActive={typeof isActive === 'function' ? isActive : undefined}
-            activeClassName={Styles.navigationItemActive}
-            target={target}
-        >
-            <HeaderNavigationItemContent
-                tag={getCounterTag(counter, tag)}
-                iconComponent={iconComponent}
-                iconClassName={iconClassName}
-                iconName={iconName}
-                title={label}
-                titleClassName={labelClassName}
-            />
-        </NavigationComponent>,
-        tooltip
-    );
-};
-
-/** Navigation extra item with icon button */
-export const HeaderNavigationTrigger: FC<HeaderNavigationTriggerProps> = ({
-    id,
-    className,
-    counter,
-    icon,
-    iconActive,
-    iconClassName,
-    iconComponent,
-    iconName,
-    isActive,
-    label,
-    labelClassName,
-    hint,
-    tag,
-    tooltip,
-    title,
-    ...rest
-}) => {
-    return withTooltip(
-        <div
-            data-cy={`navigation-trigger-${id}`}
-            data-pendo={`navigation-trigger-${id}`}
-            {...rest}
-            title={hint}
-            className={classNames(
-                Styles.navigationItem,
-                Styles.navigationLink,
-                {
-                    [Styles.navigationItemActive]: isActive === true,
-                },
-                'cursor-pointer',
-                className
-            )}
-        >
-            <HeaderNavigationItemContent
-                tag={getCounterTag(counter, tag)}
-                iconComponent={iconComponent}
-                iconClassName={iconClassName}
-                iconName={iconName}
-                title={label}
-                titleClassName={labelClassName}
-            />
-        </div>,
-        tooltip
-    );
-};
-
-/** Navigation extra item with custom content */
-export const HeaderNavigationTriggerCustom: FC<
-    Omit<
-        HeaderNavigationTriggerProps,
-        | 'counter'
-        | 'iconSize'
-        | 'iconName'
-        | 'iconComponent'
-        | 'iconClassName'
-        | 'icon'
-        | 'iconActive'
-    > & { children: ReactNode }
-> = ({ children, id, className, tooltip, title, ...rest }) =>
-    withTooltip(
-        <div
-            data-cy={`navigation-custom-${id}`}
-            data-pendo={`navigation-custom-${id}`}
-            {...rest}
-            title={title}
-            className={classNames(
-                Styles.navigationItem,
-                Styles.navigationLink,
-                'cursor-pointer',
-                className
-            )}
-        >
-            {children}
-        </div>,
-        tooltip
-    );