@ainias42/react-bootstrap-mobile 1.0.4 → 1.0.5

package/src/Components/Title/Title.stories.tsx

@@ -0,0 +1,95 @@
+import { BaseIcon } from '@/Components/Icon/BaseIcon';
+import { Block } from '@/Components/Layout/Block';
+import { HoverMenu } from '@/Components/Menu/HoverMenu';
+import { MenuDivider } from '@/Components/Menu/MenuDivider';
+import { MenuItem } from '@/Components/Menu/MenuItem';
+import { Submenu } from '@/Components/Menu/Submenu';
+import { Text } from '@/Components/Text/Text';
+import { faCog, faCogs, faHome, faUser } from '@fortawesome/free-solid-svg-icons';
+import { fn } from 'storybook/test';
+import React from 'react';
+import type { HoverMenuProps } from '@/Components/Menu/HoverMenu';
+import type { StoryObj } from '@storybook/react-vite';
+
+const meta = {
+    args: {
+        title: 'This is a title',
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: ({ title }: { title: string }) => {
+        return (
+            <Block title={title}>
+                <Text>Test</Text>
+            </Block>
+        );
+    },
+};
+
+export const WithElement: Story = {
+    render: ({ title }: { title: string }) => {
+        return (
+            <Block
+                title={
+                    <Block style={{ background: 'red', padding: 4 }} title="Inner Title">
+                        <Text>{title}</Text>
+                    </Block>
+                }
+            >
+                <Text>Test</Text>
+            </Block>
+        );
+    },
+};
+
+export const HoverMenuWithTitle: Story = {
+    args: {
+        openToSide: false,
+        children: <BaseIcon icon={faCogs} />,
+        items: (
+            <>
+                <MenuItem onClick={fn()} icon={faHome}>
+                    One
+                </MenuItem>
+                <MenuDivider />
+                <Submenu label="Submenu" icon={faCogs}>
+                    <MenuItem onClick={fn()} icon={faHome}>
+                        <Block title="Title">
+                            <Text>Has Title</Text>
+                        </Block>
+                    </MenuItem>
+                    <MenuItem onClick={fn()} icon={faHome}>
+                        <Block title="Title">
+                            <Text>Has Title</Text>
+                        </Block>
+                    </MenuItem>
+                    <MenuItem onClick={fn()} icon={faUser}>
+                        Sub Two
+                    </MenuItem>
+                    <MenuItem onClick={fn()} icon={faCog}>
+                        Sub Three
+                    </MenuItem>
+                </Submenu>
+                <MenuItem onClick={fn()} icon={faUser} disabled={true}>
+                    Four
+                </MenuItem>
+                <MenuItem onClick={fn()} icon={faCog}>
+                    Five
+                </MenuItem>
+                <MenuDivider />
+                <MenuItem iconColor="green" onClick={fn()} icon={faUser}>
+                    Six
+                </MenuItem>
+                <MenuItem iconColor="green" onClick={fn()} icon={faCog} disabled={true}>
+                    Seven
+                </MenuItem>
+            </>
+        ),
+    },
+    render: (args: HoverMenuProps) => <HoverMenu {...args} />,
+};

package/src/Components/Title/hoverTitle.module.scss

@@ -0,0 +1,8 @@
+.title {
+  position: fixed;
+  background: var(--foreground-primary);
+  border: 1px solid var(--border-light);
+  border-radius: 2px;
+  z-index: 1002;
+  padding: 2px 4px;
+}

package/src/Components/Title/withTitle.module.scss

@@ -0,0 +1,7 @@
+.titleContainer {
+  padding: 2px 4px;
+}
+
+.noInteraction {
+  pointer-events: none;
+}

package/src/Components/Title/withTitle.tsx

@@ -0,0 +1,48 @@
+import { HoverTitle } from '@/Components/Title/HoverTitle';
+import { TEXT_SIZE, Text } from '@/Components/Text/Text';
+import { useComposedRef } from '@/Components/Hooks/useComposedRef';
+import { useHoverMenu } from '@/Components/Menu/useHoverMenu';
+import { withMemo } from '@/helper/withMemo';
+import React, { useEffect, useRef } from 'react';
+import type { FunctionComponent, ReactElement, Ref } from 'react';
+
+export function withTitle<Props extends Record<string, any>>(Comp: FunctionComponent<Props>) {
+    return withMemo(
+        ({
+            title,
+            ref,
+            ...otherProps
+        }: Props & {
+            title?: string | ReactElement;
+            ref?: Ref<HTMLElement | null>;
+        }) => {
+            const titleRef = useRef<HTMLElement | null>(null);
+            const composedRef = useComposedRef(titleRef, ref);
+            const titleElement = typeof title === 'string' ? <Text size={TEXT_SIZE.small}>{title.trim()}</Text> : title;
+            const { isOpen, position, offset, open, close } = useHoverMenu({ ref: titleRef });
+
+            useEffect(() => {
+                const element = titleRef.current;
+                if (!element || !title) {
+                    return undefined;
+                }
+                element.addEventListener('mouseenter', open);
+                element.addEventListener('mouseleave', close);
+
+                return () => {
+                    element.removeEventListener('mouseenter', open);
+                    element.removeEventListener('mouseleave', close);
+                };
+            }, [close, open, title]);
+
+            return (
+                <>
+                    <Comp {...(otherProps as Props)} ref={composedRef} />
+                    <HoverTitle baseElement={titleRef} isOpen={isOpen} onClose={close}>
+                        {titleElement}
+                    </HoverTitle>
+                </>
+            );
+        },
+    );
+}

package/src/Components/TopBar/MoreButton.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Icon } from '@/Components/Icon/Icon';
+import { BaseIcon } from '@/Components/Icon/BaseIcon';
 import { TopBarButton } from '@/Components/TopBar/TopBarButton';
 import { faEllipsisH, faEllipsisV } from '@fortawesome/free-solid-svg-icons';
 import { withMemo } from '@/helper/withMemo';
@@ -29,8 +29,8 @@ export const MoreButton = withMemo(function MoreButton({ onClick, disabled, clas
 
     return (
         <TopBarButton onClick={onClick} disabled={disabled} className={className} style={style}>
-            <Icon icon={faEllipsisH} className={baseStyles.materialHidden} />
-            <Icon icon={faEllipsisV} className={baseStyles.flatHidden} />
+            <BaseIcon icon={faEllipsisH} className={baseStyles.materialHidden} />
+            <BaseIcon icon={faEllipsisV} className={baseStyles.flatHidden} />
         </TopBarButton>
     );
 });

package/src/Components/TopBar/TopBar.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ActionSheet } from '@/Components/ActionSheet/ActionSheet';
+import { BaseIcon } from '@/Components/Icon/BaseIcon';
 import { Container } from '@/Components/Layout/Container';
-import { Icon } from '@/Components/Icon/Icon';
 import { MoreButton } from '@/Components/TopBar/MoreButton';
 import { TopBarButton } from '@/Components/TopBar/TopBarButton';
 import { useCallback, useMemo, useRef, useState } from 'react';
@@ -10,7 +10,7 @@ import type { RbmComponentProps } from '@/Components/RbmComponentProps';
 
 import styles from '@/Components/TopBar/topBar.module.scss';
 
-import { Block } from '@/Components/Layout/Block';
+import { BaseBlock } from '@/Components/Layout/BaseBlock';
 import { Flex } from '@/Components/Layout/Flex';
 import { Inline } from '@/Components/Layout/Inline';
 import { Text } from '@/Components/Text/Text';
@@ -18,7 +18,7 @@ import { View } from '@/Components/Layout/View';
 import { withMemo } from '@/helper/withMemo';
 import classNames from 'classnames';
 import type { ActionSheetAction } from '@/Components/ActionSheet/ActionSheet';
-import type { IconSource } from '@/Components/Icon/Icon';
+import type { IconSource } from '@/Components/Icon/BaseIcon';
 
 export type TopBarActionButtonType = {
     order?: number;
@@ -53,7 +53,7 @@ function getButtonComponents(buttons: TopBarButtonType[]) {
         }
         let child: string | ReactElement | undefined = button.title;
         if (button.icon) {
-            child = <Icon icon={button.icon} />;
+            child = <BaseIcon icon={button.icon} />;
         }
         return (
             <TopBarButton key={key} onClick={button.action} disabled={button.disabled} __allowChildren="all">
@@ -165,9 +165,9 @@ export const TopBar = withMemo(function TopBar({
                 <Flex grow={true} className={classNames(styles.buttonContainer, styles.left)} horizontal={true}>
                     {leftButtonComponents}
                 </Flex>
-                <Block className={styles.titleContainer}>
+                <BaseBlock className={styles.titleContainer}>
                     <Text className={styles.title}>{title}</Text>
-                </Block>
+                </BaseBlock>
                 <Flex grow={true} className={classNames(styles.buttonContainer, styles.right)} horizontal={true}>
                     {rightButtonComponents}
                 </Flex>

package/src/WrongChildError.ts

@@ -11,6 +11,7 @@ export class WrongChildError extends Error {
         super(
             `Expected Children of type '${expectedType}' but got type '${gotType}' in component ${component}. Value of child is '${value}'`,
         );
+
         this.name = 'WrongChildError';
         this.childValue = child;
     }

package/src/helper/withRestrictedChildren.tsx

@@ -46,7 +46,9 @@ export function withRestrictedChildren<C extends ComponentType<RbmComponentProps
         return (
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
-            <Component {...(newProps as Props)}>{children}</Component>
+            <Component {...(newProps as Props)} __allowChildren={__allowChildren}>
+                {children}
+            </Component>
         );
     };
     hocComponent.displayName = displayName;

package/src/index.ts

@@ -46,10 +46,13 @@ export * from './Components/Hooks/useOnce';
 export * from './Components/Hooks/useOnMount';
 export * from './Components/Hooks/useRerender';
 export * from './Components/Hooks/useWindowDimensions';
+export * from './Components/Icon/BaseIcon';
 export * from './Components/Icon/DoubleIcon';
 export * from './Components/Icon/Icon';
 export * from './Components/Image/Image';
 export * from './Components/InViewport/InViewport';
+export * from './Components/Layout/BaseBlock';
+export * from './Components/Layout/BaseInlineBlock';
 export * from './Components/Layout/Block';
 export * from './Components/Layout/Container';
 export * from './Components/Layout/Flex';
@@ -66,6 +69,7 @@ export * from './Components/Menu/MenuCloseContext';
 export * from './Components/Menu/MenuDivider';
 export * from './Components/Menu/MenuItem';
 export * from './Components/Menu/Submenu';
+export * from './Components/Menu/useHoverMenu';
 export * from './Components/Menu/useMenu';
 export * from './Components/SizeCalculator/SizeCalculator';
 export * from './Components/SpoilerList/SpoilerList';
@@ -75,6 +79,8 @@ export * from './Components/TabBar/TabBarButton';
 export * from './Components/Table/Table';
 export * from './Components/Text/Heading';
 export * from './Components/Text/Text';
+export * from './Components/Title/HoverTitle';
+export * from './Components/Title/withTitle';
 export * from './Components/Toast/Toast';
 export * from './Components/Toast/ToastContainer';
 export * from './Components/Toast/ToastContext';