@ainias42/react-bootstrap-mobile 1.0.3 → 1.0.5

package/src/Components/Layout/{InlineBlock.tsx → BaseInlineBlock.tsx}

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import { JSX } from 'react/jsx-runtime';
 import { ViewWithoutListeners } from '@/Components/Layout/ViewWithoutListeners';
-import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
 import styles from '@/Components/Layout/layout.module.scss';
 import type { RbmComponentProps } from '@/Components/RbmComponentProps';
 import type { ViewWithoutListenersProps } from '@/Components/Layout/ViewWithoutListeners';
 
 import IntrinsicElements = JSX.IntrinsicElements;
+import { withMemo } from '@/helper/withMemo';
 
 export type InlineBlockProps<AsType extends keyof IntrinsicElements> = RbmComponentProps<
     ViewWithoutListenersProps<AsType> & {
@@ -16,7 +16,7 @@ export type InlineBlockProps<AsType extends keyof IntrinsicElements> = RbmCompon
     }
 >;
 
-export const InlineBlock = withMemo(function InlineBlock<AsType extends keyof JSX.IntrinsicElements = 'span'>({
+export const BaseInlineBlock = withMemo(function BaseInlineBlock<AsType extends keyof JSX.IntrinsicElements = 'span'>({
     children,
     as = 'span' as AsType,
     className,

package/src/Components/Layout/Block.ts

@@ -0,0 +1,4 @@
+import { BaseBlock } from '@/Components/Layout/BaseBlock';
+import { withTitle } from '@/Components/Title/withTitle';
+
+export const Block = withTitle(BaseBlock);

package/src/Components/Layout/Flex.tsx

@@ -13,6 +13,12 @@ export type FlexProps<AsType extends keyof IntrinsicElements> = RbmComponentProp
     ViewWithoutListenersProps<AsType> & {
         horizontal?: boolean;
         grow?: boolean;
+        unaligned?: boolean;
+        fillWidth?: boolean;
+        fillHeight?: boolean;
+        fill?: boolean;
+        // TODO gap as enum?
+        gap?: number;
     }
 >;
 
@@ -23,6 +29,12 @@ export const Flex = withMemo(function Flex<AsType extends keyof JSX.IntrinsicEle
     horizontal = false,
     ref,
     grow = false,
+    unaligned = false,
+    fill = false,
+    fillWidth = fill,
+    fillHeight = fill,
+    gap,
+    style,
     ...props
 }: FlexProps<AsType>) {
     // Variables
@@ -45,7 +57,11 @@ export const Flex = withMemo(function Flex<AsType extends keyof JSX.IntrinsicEle
                 [styles.horizontal]: horizontal,
                 [styles.grow]: grow,
                 [styles.weight1]: grow,
+                [styles.unaligned]: unaligned,
+                [styles.fillWidth]: fillWidth,
+                [styles.fillHeight]: fillHeight,
             })}
+            style={{ gap, ...style }}
             as={as as AsType}
             ref={ref}
             {...(props as ViewWithoutListenersProps<AsType>)}

package/src/Components/Layout/Grid/Grid.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Block } from '@/Components/Layout/Block';
+import { BaseBlock } from '@/Components/Layout/BaseBlock';
 import { useMemo } from 'react';
 import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
@@ -49,13 +49,13 @@ export const Grid = withMemo(function Grid({
     // Render Functions
 
     return (
-        <Block
+        <BaseBlock
             ref={ref}
             style={appliedStyle}
             className={classNames(styles.grid, className, { [styles.useContainerWidth]: useContainerWidth })}
             __allowChildren={__allowChildren as 'all'}
         >
             {children}
-        </Block>
+        </BaseBlock>
     );
 });

package/src/Components/Layout/Grid/GridItem.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { InlineBlock } from '@/Components/Layout/InlineBlock';
+import { BaseInlineBlock } from '@/Components/Layout/BaseInlineBlock';
 import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
 import styles from '@/Components/Layout/Grid/grid.module.scss';
@@ -151,13 +151,13 @@ function GridItem({
 
     // Render Functions
     return (
-        <InlineBlock
+        <BaseInlineBlock
             style={style}
             className={classNames(...classes.map((name) => styles[name]), styles.item, className)}
             __allowChildren={__allowChildren as 'all'}
         >
             {children}
-        </InlineBlock>
+        </BaseInlineBlock>
     );
 }
 

package/src/Components/Layout/InlineBlock.ts

@@ -0,0 +1,4 @@
+import { BaseInlineBlock } from '@/Components/Layout/BaseInlineBlock';
+import { withTitle } from '@/Components/Title/withTitle';
+
+export const InlineBlock = withTitle(BaseInlineBlock);

package/src/Components/Layout/layout.module.scss

@@ -7,6 +7,19 @@
   &.horizontal {
     flex-direction: row;
   }
+
+  &.unaligned {
+    align-items: unset;
+    justify-content: unset;
+  }
+
+  &.fillWidth {
+    width: 100%;
+  }
+
+  &.fillHeight {
+    height: 100%;
+  }
 }
 
 .grow {

package/src/Components/LoadingArea/LoadingArea.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Block } from '@/Components/Layout/Block';
+import { BaseBlock } from '@/Components/Layout/BaseBlock';
 import { LoadingArea } from '@/Components/LoadingArea/LoadingArea';
 import { Text } from '@/Components/Text/Text';
 import React from 'react';
@@ -9,14 +9,14 @@ const meta = {
     component: LoadingArea,
     render: (args) => (
         <LoadingArea {...args}>
-            <Block
+            <BaseBlock
                 style={{
                     height: '200px',
                     background: 'gray',
                 }}
             >
                 <Text>Content goes here Error within Story. Normally it would only cover the content and not more</Text>
-            </Block>
+            </BaseBlock>
         </LoadingArea>
     ),
 } satisfies Meta<typeof LoadingArea>;

package/src/Components/Menu/HoverMenu.stories.tsx

@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import * as MenuStories from '@/Components/Menu/Menu.stories';
+import { BaseIcon } from '@/Components/Icon/BaseIcon';
 import { HoverMenu } from '@/Components/Menu/HoverMenu';
-import { Icon } from '@/Components/Icon/Icon';
 import { faCogs } from '@fortawesome/free-solid-svg-icons';
 import React from 'react';
-import type { ReactElement  } from 'react';
+import type { ReactElement } from 'react';
 
 const meta = {
     component: HoverMenu,
@@ -26,7 +26,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     args: {
         openToSide: false,
-        children: <Icon icon={faCogs} />,
+        children: <BaseIcon icon={faCogs} />,
         items: MenuStories.Default.args?.children as ReactElement,
     },
 };

package/src/Components/Menu/HoverMenu.tsx

@@ -1,7 +1,8 @@
 import { Clickable } from '@/Components/Clickable/Clickable';
 import { Menu } from '@/Components/Menu/Menu';
+import { useHoverMenu } from '@/Components/Menu/useHoverMenu';
 import { withMemo } from '@/helper/withMemo';
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useRef } from 'react';
 import classNames from 'classnames';
 import styles from '@/Components/Menu/menu.module.scss';
 import type {
@@ -33,37 +34,16 @@ export const HoverMenu = withMemo(function HoverMenu({
 
     // States/Variables/Selectors
     const hoverItemRef = useRef<HTMLDivElement>(null);
-
-    const [isOpen, setIsOpen] = useState(false);
-    const [position, setPosition] = useState({ x: 0, y: 0 });
-    const [offset, setOffset] = useState({ x: 0, y: 0 });
+    const { isOpen, position, offset, open, close } = useHoverMenu({ ref: hoverItemRef, openToSide });
 
     // Dispatch
 
     // Callbacks
-    const recalculatePosition = useCallback(() => {
-        if (!hoverItemRef.current) {
-            return;
-        }
-        const { top, left, bottom, right, width, height } = hoverItemRef.current.getBoundingClientRect();
-        if (openToSide) {
-            setPosition({ x: right, y: top });
-            setOffset({ x: width, y: -height });
-        } else {
-            setPosition({ x: left, y: bottom });
-            setOffset({ x: -width, y: height });
-        }
-    }, [openToSide]);
 
-    const close = useCallback(() => {
-        setIsOpen(false);
+    const innerOnClose = useCallback(() => {
+        close();
         onClose?.();
-    }, [onClose]);
-
-    const open = useCallback(() => {
-        recalculatePosition();
-        setIsOpen(true);
-    }, [recalculatePosition]);
+    }, [onClose, close]);
 
     const onClickInner = useCallback(() => {
         if (onClick?.() !== false) {
@@ -80,7 +60,7 @@ export const HoverMenu = withMemo(function HoverMenu({
     return (
         <Clickable
             onMouseEnter={open}
-            onMouseLeave={close}
+            onMouseLeave={innerOnClose}
             useReactOnMouseLeave={true}
             onClick={onClickInner}
             className={classNames(styles.hoverMenu, { [styles.open]: isOpen }, className)}
@@ -93,7 +73,7 @@ export const HoverMenu = withMemo(function HoverMenu({
                 x={position.x}
                 y={position.y}
                 isOpen={true}
-                onClose={close}
+                onClose={innerOnClose}
                 offsetX={offset.x}
                 offsetY={offset.y}
                 className={classNames({ [styles.hidden]: !isOpen })}

package/src/Components/Menu/Menu.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Block } from '@/Components/Layout/Block';
+import { BaseBlock } from '@/Components/Layout/BaseBlock';
 import { MenuCloseContextProvider } from '@/Components/Menu/MenuCloseContext';
 import { MenuItem } from '@/Components/Menu/MenuItem';
 import { createPortal } from 'react-dom';
@@ -10,7 +10,7 @@ import { withMemo } from '@/helper/withMemo';
 import { withRenderBrowserOnly } from '@/helper/withRenderBrowserOnly';
 import classNames from 'classnames';
 import styles from '@/Components/Menu/menu.module.scss';
-import type { IconSource } from '@/Components/Icon/Icon';
+import type { IconSource } from '@/Components/Icon/BaseIcon';
 import type { RbmComponentProps } from '@/Components/RbmComponentProps';
 
 export type MenuItemType = {
@@ -140,7 +140,7 @@ export const Menu = withMemo(
             <>
                 {createPortal(
                     <MenuCloseContextProvider value={onClose}>
-                        <Block
+                        <BaseBlock
                             className={classNames(className, styles.menu)}
                             style={{ ...style, top: innerY, left: innerX }}
                             ref={menuRef}
@@ -171,7 +171,7 @@ export const Menu = withMemo(
                                 );
                             })}
                             {children}
-                        </Block>
+                        </BaseBlock>
                     </MenuCloseContextProvider>,
                     portalContainer,
                 )}

package/src/Components/Menu/MenuDivider.tsx

@@ -1,4 +1,4 @@
-import { Block } from '@/Components/Layout/Block';
+import { BaseBlock } from '@/Components/Layout/BaseBlock';
 import { withMemo } from '@/helper/withMemo';
 import React from 'react';
 import styles from '@/Components/Menu/menu.module.scss';
@@ -18,5 +18,5 @@ export const MenuDivider = withMemo(function MenuDivider() {
 
     // RenderFunctions
 
-    return <Block className={styles.divider} />;
+    return <BaseBlock className={styles.divider} />;
 });

package/src/Components/Menu/MenuItem.tsx

@@ -1,13 +1,13 @@
-import { Block } from '@/Components/Layout/Block';
+import { BaseBlock } from '@/Components/Layout/BaseBlock';
+import { BaseIcon } from '@/Components/Icon/BaseIcon';
 import { Clickable } from '@/Components/Clickable/Clickable';
-import { Icon } from '@/Components/Icon/Icon';
 import { Text } from '@/Components/Text/Text';
 import { useMenuClose } from '@/Components/Menu/MenuCloseContext';
 import { withMemo } from '@/helper/withMemo';
 import React, { useCallback } from 'react';
 import classNames from 'classnames';
 import styles from '@/Components/Menu/menu.module.scss';
-import type { IconSource } from '@/Components/Icon/Icon';
+import type { IconSource } from '@/Components/Icon/BaseIcon';
 import type { RbmComponentProps, WithChildren } from '@/Components/RbmComponentProps';
 import type { ReactNode } from 'react';
 
@@ -97,10 +97,10 @@ export const MenuItem = withMemo(function MenuItem<Item>({
             onMouseLeave={onMouseLeaveInner}
             __allowChildren="all"
         >
-            <Block className={classNames(styles.itemChildren)}>
-                {!!icon && <Icon icon={icon} color={iconColor} className={styles.icon} />}
+            <BaseBlock className={classNames(styles.itemChildren)}>
+                {!!icon && <BaseIcon icon={icon} color={iconColor} className={styles.icon} />}
                 {childElements}
-            </Block>
+            </BaseBlock>
         </Clickable>
     );
 }, 'text');

package/src/Components/Menu/Submenu.tsx

@@ -1,8 +1,8 @@
-import { Block } from '@/Components/Layout/Block';
+import { BaseBlock } from '@/Components/Layout/BaseBlock';
+import { BaseIcon } from '@/Components/Icon/BaseIcon';
 import { Clickable } from '@/Components/Clickable/Clickable';
 import { Flex } from '@/Components/Layout/Flex';
 import { Grow } from '@/Components/Layout/Grow';
-import { Icon } from '@/Components/Icon/Icon';
 import { MenuCloseContextProvider, useMenuClose } from '@/Components/Menu/MenuCloseContext';
 import { Text } from '@/Components/Text/Text';
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
@@ -11,7 +11,7 @@ import { withMemo } from '@/helper/withMemo';
 import React, { useCallback, useRef, useState } from 'react';
 import classNames from 'classnames';
 import styles from '@/Components/Menu/menu.module.scss';
-import type { IconSource } from '@/Components/Icon/Icon';
+import type { IconSource } from '@/Components/Icon/BaseIcon';
 import type { RbmComponentProps, WithNoStringAndChildrenProps } from '@/Components/RbmComponentProps';
 
 export type SubmenuProps = RbmComponentProps<
@@ -100,15 +100,15 @@ export const Submenu = withMemo(function Submenu({
                 style={style}
             >
                 <Flex ref={submenuRef} className={classNames(styles.itemChildren)} horizontal={true}>
-                    {!!icon && <Icon icon={icon} color={iconColor} className={styles.icon} />}
+                    {!!icon && <BaseIcon icon={icon} color={iconColor} className={styles.icon} />}
                     <Grow>
                         <Text>{label}</Text>
                     </Grow>
-                    <Icon icon={faChevronRight} />
+                    <BaseIcon icon={faChevronRight} />
                 </Flex>
-                <Block className={styles.container} __allowChildren="all" ref={containerRef}>
+                <BaseBlock className={styles.container} __allowChildren="all" ref={containerRef}>
                     {children}
-                </Block>
+                </BaseBlock>
             </Clickable>
         </MenuCloseContextProvider>
     );

package/src/Components/Menu/menu.module.scss

@@ -30,6 +30,7 @@
   padding-top: 1px;
   margin-top: 1px;
   border-top: 1px solid var(--menu-divider-color);
+  width: 100%;
 }
 
 .item {
@@ -80,7 +81,7 @@
     pointer-events: none;
   }
 
-  &.open:hover {
+  &.open {
     .menu {
       visibility: visible;
       pointer-events: initial;
@@ -113,7 +114,7 @@
     bottom: 3px;
   }
 
-  &.open:hover {
+  &.open {
     .container {
       visibility: visible;
       pointer-events: initial;

package/src/Components/Menu/useHoverMenu.ts

@@ -0,0 +1,36 @@
+import { useCallback, useState } from 'react';
+import type { RefObject } from 'react';
+
+export function useHoverMenu({ openToSide, ref }: { ref: RefObject<HTMLElement | null>; openToSide?: boolean }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+    const [offset, setOffset] = useState({ x: 0, y: 0 });
+
+    // Dispatch
+
+    // Callbacks
+    const recalculatePosition = useCallback(() => {
+        if (!ref.current) {
+            return;
+        }
+        const { top, left, bottom, right, width, height } = ref.current.getBoundingClientRect();
+        if (openToSide) {
+            setPosition({ x: right, y: top });
+            setOffset({ x: width, y: -height });
+        } else {
+            setPosition({ x: left, y: bottom });
+            setOffset({ x: -width, y: height });
+        }
+    }, [openToSide, ref]);
+
+    const close = useCallback(() => {
+        setIsOpen(false);
+    }, []);
+
+    const open = useCallback(() => {
+        recalculatePosition();
+        setIsOpen(true);
+    }, [recalculatePosition]);
+
+    return { isOpen, position, open, close, offset };
+}

package/src/Components/SizeCalculator/SizeCalculator.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { InlineBlock } from '@/Components/Layout/InlineBlock';
+import { BaseInlineBlock } from '@/Components/Layout/BaseInlineBlock';
 import { useEffect, useRef } from 'react';
 import { withMemo } from '@/helper/withMemo';
 import type { WithNoStringAndChildrenProps } from '@/Components/RbmComponentProps';
@@ -34,9 +34,9 @@ function SizeCalculator({ onSize, children, absolute = false }: SizeCalculatorPr
     // Render Functions
 
     return (
-        <InlineBlock ref={ref} __allowChildren="all" style={{ position: absolute ? 'absolute' : 'static' }}>
+        <BaseInlineBlock ref={ref} __allowChildren="all" style={{ position: absolute ? 'absolute' : 'static' }}>
             {children}
-        </InlineBlock>
+        </BaseInlineBlock>
     );
 }
 

package/src/Components/SpoilerList/Spoiler/Spoiler.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { Block } from '@/Components/Layout/Block';
+import { BaseBlock } from '@/Components/Layout/BaseBlock';
+import { BaseIcon } from '@/Components/Icon/BaseIcon';
 import { Clickable } from '@/Components/Clickable/Clickable';
 import { Flex } from '@/Components/Layout/Flex';
 import { Grow } from '@/Components/Layout/Grow';
-import { Icon } from '@/Components/Icon/Icon';
 import { TEXT_SIZE, Text } from '@/Components/Text/Text';
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -11,7 +11,7 @@ import { useListener } from '@/Components/Hooks/useListener';
 import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
 import styles from '@/Components/SpoilerList/Spoiler/spoiler.module.scss';
-import type { IconSource } from '@/Components/Icon/Icon';
+import type { IconSource } from '@/Components/Icon/BaseIcon';
 import type { MouseEvent, ReactNode } from 'react';
 import type { OptionalListener } from '@/Components/Hooks/useListener';
 import type { RbmComponentProps, WithChildren } from '@/Components/RbmComponentProps';
@@ -59,7 +59,7 @@ export const Spoiler = withMemo(function Spoiler<OnClickData>({
     const onClickListener = useListener<'onClick', OnClickData, boolean>('onClick', listenerProps);
 
     const toggleOpen = useCallback(
-        (ev: MouseEvent) => {
+        (_: MouseEvent) => {
             if (open !== undefined) {
                 onClickListener?.(!open);
             } else {
@@ -100,14 +100,14 @@ export const Spoiler = withMemo(function Spoiler<OnClickData>({
             <Clickable onClick={toggleOpen}>
                 <Flex horizontal={true}>
                     <Grow __allowChildren="all">{titleComponent}</Grow>
-                    {icon ? <Icon icon={icon} className={styles.icon} /> : null}
+                    {icon ? <BaseIcon icon={icon} className={styles.icon} /> : null}
                 </Flex>
             </Clickable>
-            <Block className={styles.bodyContainer}>
-                <Block __allowChildren="all" className={styles.body}>
+            <BaseBlock className={styles.bodyContainer}>
+                <BaseBlock __allowChildren="all" className={styles.body}>
                     {children}
-                </Block>
-            </Block>
+                </BaseBlock>
+            </BaseBlock>
         </Clickable>
     );
 }, 'all');

package/src/Components/SpoilerList/SpoilerList.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Block } from '@/Components/Layout/Block';
+import { BaseBlock } from '@/Components/Layout/BaseBlock';
 import { Spoiler } from '@/Components/SpoilerList/Spoiler/Spoiler';
 import { useSpoilerGroup } from '@/Components/SpoilerList/useSpoilerGroup';
 import { withMemo } from '@/helper/withMemo';
@@ -48,12 +48,12 @@ export const SpoilerList = withMemo(function SpoilerList<BodyData, TitleData = s
 
     // Render Functions
     return (
-        <Block className={classNames(className)} style={style}>
+        <BaseBlock className={classNames(className)} style={style}>
             {data.map((item) => (
                 <Spoiler title={renderTitle(item)} {...propsGenerator(item.key)}>
                     {renderBody(item)}
                 </Spoiler>
             ))}
-        </Block>
+        </BaseBlock>
     );
 });

package/src/Components/TabBar/TabBar.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
+import { BaseIcon } from '@/Components/Icon/BaseIcon';
 import { Container } from '@/Components/Layout/Container';
-import { Icon } from '@/Components/Icon/Icon';
 import { Inline } from '@/Components/Layout/Inline';
 import { TabBarButton } from '@/Components/TabBar/TabBarButton';
 import { Text } from '@/Components/Text/Text';
@@ -9,7 +9,7 @@ import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
 import styles from '@/Components/TabBar/tabBar.module.scss';
 import type { ComponentType } from 'react';
-import type { IconSource } from '@/Components/Icon/Icon';
+import type { IconSource } from '@/Components/Icon/BaseIcon';
 import type { ListenerWithData } from '@/Components/Hooks/useListener';
 import type { RbmComponentProps } from '@/Components/RbmComponentProps';
 
@@ -55,7 +55,7 @@ function getButtonComponents(buttons: TabBarButtonType[], activeTab: number, onS
         return (
             <TabBarButton key={key} active={isActive} onClickData={index} onClick={onSelect}>
                 <Inline>
-                    {button.icon ? <Icon icon={button.icon} className={styles.buttonIcon} /> : null}
+                    {button.icon ? <BaseIcon icon={button.icon} className={styles.buttonIcon} /> : null}
                     {button.title ? <Text className={styles.buttonTitle}>{button.title}</Text> : null}
                 </Inline>
             </TabBarButton>

package/src/Components/Title/HoverTitle.tsx

@@ -0,0 +1,97 @@
+import { BaseInlineBlock } from '@/Components/Layout/BaseInlineBlock';
+import { useClientLayoutEffect } from '@/Components/Hooks/useClientLayoutEffect';
+import { useWindow } from '@/WindowContext/WindowContext';
+import { withMemo } from '@/helper/withMemo';
+import React, { useEffect, useRef, useState } from 'react';
+import styles from '@/Components/Title/hoverTitle.module.scss';
+import type { ReactElement, RefObject } from 'react';
+
+export type HoverTitleProps = {
+    children: ReactElement | undefined;
+    baseElement: RefObject<HTMLElement | null>;
+    isOpen: boolean;
+    onClose: () => void;
+};
+
+export const HoverTitle = withMemo(function HoverTitle({ children, baseElement, isOpen, onClose }: HoverTitleProps) {
+    // Refs
+    const titleRef = useRef<HTMLDivElement>(null);
+
+    // States/Variables/Selectors
+    const [top, setTop] = useState(0);
+    const [left, setLeft] = useState(0);
+
+    const window = useWindow();
+
+    // Callbacks
+
+    // Effects
+    useEffect(() => {
+        if (!isOpen) {
+            return undefined;
+        }
+        const listener = (e: MouseEvent | TouchEvent) => {
+            if (!titleRef.current?.contains(e.target as Node)) {
+                onClose();
+            }
+        };
+
+        window?.addEventListener('mousedown', listener, { capture: true });
+        window?.addEventListener('touchstart', listener, { capture: true });
+        return () => {
+            window?.removeEventListener('mousedown', listener, { capture: true });
+            window?.removeEventListener('touchstart', listener, { capture: true });
+        };
+    }, [isOpen, onClose, window]);
+
+    useClientLayoutEffect(() => {
+        if (!titleRef.current || !baseElement.current || !isOpen) {
+            return undefined;
+        }
+        const titleElement = titleRef.current;
+        const base = baseElement.current;
+
+        const updateInnerPositions = () => {
+            const computedStyleElement = base.getBoundingClientRect();
+            const computedStyleTitle = getComputedStyle(titleElement);
+
+            const height = Number.parseFloat(computedStyleTitle.height);
+            let newY = computedStyleElement.top - height;
+            if (newY < 0) {
+                newY = computedStyleElement.top + computedStyleElement.height;
+            }
+            setTop(Math.min(window?.innerHeight ?? 1600, newY));
+
+            const width = Number.parseFloat(computedStyleTitle.width);
+            let newX = computedStyleElement.left;
+            if (newX > (window?.innerWidth ?? 0) - width) {
+                newX -= width;
+            }
+            setLeft(Math.max(0, newX));
+        };
+
+        const observer = new ResizeObserver(() => {
+            updateInnerPositions();
+        });
+        observer.observe(titleElement);
+        observer.observe(base);
+        updateInnerPositions();
+
+        return () => {
+            observer.disconnect();
+        };
+    }, [window, baseElement, isOpen]);
+
+    // Other
+
+    // RenderFunctions
+    if (!isOpen || !children) {
+        return null;
+    }
+
+    return (
+        <BaseInlineBlock ref={titleRef} style={{ top, left }} className={styles.title}>
+            {children}
+        </BaseInlineBlock>
+    );
+});